Создание шаблона страницы для WordPress. Шаблоны страниц в WordPress

В этой статье я расскажу о способах создания шаблонов для постоянных страниц WordPress. Каждый способ несет в себе плюсы и минусы. Но прежде чем начать, коротко о том, что такое страницы и чем они отличаются от записей.

В WordPress можно создавать страницы (page) и записи (post). Отличаются они тем, что записи: попадают в ленту на главной странице; для записей указываются категории; записи не могут быть древовидными, а страницы: используются для такого содержимого как "Обо мне", "Контакты", "Карта сайта"; не имеют категорий, а имеют древовидную структуру. Записи обычно предназначены для хронологической информации (по времени добавления), а страницы для древовидной структуры не зависимой от времени. Для примера, эта статья опубликована как "запись" в рубрике "Кодекс", а ссылки в меню шапки ведут на страницы: Функции .

Страницы похожи на записи - они расположены в одной таблице базы данных и данные у них почти одинаковы: заголовок, текст, дополнительные поля и т.д. И то и другое - это записи, но разных типов: страницы древовидные и организуются путем создания родительских и дочерних страниц, а записи объединяются рубриками и метками. В WordPress можно создавать дополнительные типы записей древовидные или нет.

Создание страниц в WordPress

Часто нужно создать отдельный шаблон страницы, чтобы вывод информации отличался от остальных страниц. Создавая шаблон страницы в WordPress, можно совершенно изменить страницу: удалить сайдбар, подвал, шапку, можно изменить страницу до неузнаваемости. Например, на этом сайте так изменяется страница на которой выводятся коды файлов WordPress .

Способ 1: шаблон страницы через файл с произвольным названием и подключением его в админ-панели (классический способ)

Это самый распространенный способ создать шаблон страницы в WordPress. Для этого нужно создать.php файл, например, tpl_my-page.php в папке темы и в самом начале файла вписать пометку, что созданный файл является шаблоном для страниц:

Теперь при создании страницы в админ-панели в блоке «Свойства страницы» мы сможем выбрать "шаблон":

С версии WordPress 4.7. такие шаблоны страниц можно создать для любого типа записи, а не только для page. Для этого дополните комментарии строкой: Template Post Type: post, page , где post, page - это названия типов записей к которым относится шаблон.

/* Template Name: Мой шаблон страницы Template Post Type: post, page, product */

Преимущества:

    Создав один шаблон, мы можем удобно применять его для разных страниц. Например, можно создать шаблон без боковой панели и использовать его на разных страницах.

  • Можно получить только записи с указанным шаблоном. Например, можно вывести все страницы с шаблоном «Услуги» (файл servises.php). Иногда это удобно. Название файла шаблона хранится в метаполе _wp_page_template , поэтому чтобы вывести страницы с указанным шаблоном нужно создать запрос по метаполю (см. WP_Query).

Недостатки:

После создания файла шаблона в папке темы, нужно зайти в админ-панель и установить шаблон для страницы. При разработке это не всегда удобно. Поэтому если подразумевается использовать шаблон только для одной страницы, используйте второй метод.

Как это работает:

Когда вы заходите в админ-панель на страницу редактирования записи древовидного типа, WordPress просматривает все файлы шаблона на наличие в них строки:

Template Name: ***

Строка может располагаться где угодно и как угодно в файле.

Все файлы с подобными строками собираются и выводятся в выбор шаблона в блок "Атрибуты страницы".

При публикации страницы, в произвольное поле _wp_page_template записывается название файла шаблона или default , если шаблон не указан:

Wp_page_template = default
_wp_page_template = tpl_my-page.php

Далее, когда пользователь посещает страницу, WordPress проверят метаполе _wp_page_template , если шаблон установлен, то используется файл шаблона. В противном случае поиск шаблона страницы продолжается по иерархии .

Способ 2: шаблон страницы через файл с конкретным названием (иерархия файлов шаблона)

При создании страницы ей устанавливается ярлык (слаг, альтернативное название). Он используется в УРЛ страницы. И его можно изменить:


Для создание шаблона этим способом, вам нужно узнать слаг страницы и создать файл в папке темы. Допустим, наш слаг как на картинке равен contacts , тогда создадим в теме файл page-contacts.php . и заполним его нужным кодом (можно скопировать содержимое из файла шаблона page.php и отредактировать под себя). Все, теперь при посещении страницы мы должны увидеть новый шаблон. Аналогично можно взять ID (пусть 12) страницы и создать файл page-12.php .

Достоинства:

Нет необходимости заходить в админ-панель и устанавливать файл шаблона. Шаблон начинает работать сразу после создания файла. Удобно при разработке.

Недостатки:

Шаблон создается только для одной, конкретной страницы. Зависит от слага страницы, если он изменится шаблон работать не будет. Если использовать ID, то зависимость от слага пропадает, но становится непонятно в файла темы, к какой странице относится шаблон (если несколько шаблонов с ID).

Практически бесполезен при написании шаблонов, а тем-более плагинов. Его можно использовать, когда правишь свой сайт, в котором слаг или ID страницы известны заранее.

Как это работает:

WordPeress подбирает какой файл использовать в следующем порядке (файлы должны быть в корне темы):

  • {любое_название}.php (когда используется шаблон страницы)
  • page-{ярлык_записи}.php
  • page-{ID_записи}.php
  • page.php
  • singular.php
  • index.php

Способ 3: шаблон страницы через фильтр "template_include" (коддинг)

Это продвинутый способ, он более сложный, но вместе со сложностью он открывает широкие возможности. С помощью этого способа можно задать шаблон любой странице, записи, категории, любой публикации на сайте или вообще группе любых публикаций. Смотрите примеры с описанием:

// фильтр передает переменную $template - путь до файла шаблона. // Изменяя этот путь мы изменяем файл шаблона. add_filter("template_include", "my_template"); function my_template($template) { # аналог второго способа // если это страница со слагом portfolio, используем файл шаблона page-portfolio.php // используем условный тег is_page() if(is_page("portfolio")){ if ($new_template = locate_template(array("page-portfolio.php"))) return $new_template ; } # шаблон для группы рубрик // этот пример будет использовать файл из папки темы tpl_special-cats.php, // как шаблон для рубрик с ID 9, названием "Без рубрики" и слагом "php" if(is_category(array(9, "Без рубрики", "php"))){ return get_stylesheet_directory() . "/tpl_special-cats.php"; } # шаблон для записи по ID // файл шаблона расположен в папке плагина /my-plugin/site-template.php global $post; if($post->ID == 12){ return wp_normalize_path(WP_PLUGIN_DIR) . "/my-plugin/site-template.php"; } # шаблон для страниц произвольного типа "book" // предполагается, что файл шаблона book-tpl.php лежит в папке темы global $post; if($post->post_type == "book"){ return get_stylesheet_directory() . "/book-tpl.php"; } return $template; }

Такой код нужно разместить в файл темы functions.php или в плагин, или подключить как-то еще. Как видно из примера во время фильтра template_include уже работают условные теги, установлены глобальные переменные: $wp_query , $post и т.д.

Достоинства:

    Можно установить шаблон для любой страницы или группы страниц. Практически полный карт-бланш в действиях.

  • Можно создать шаблон при написании плагина.

Недостатки:

Необходимость писать код и отдельно его подключать (например, в functions.php темы).

Шаблоны для Страниц в WordPress предназначены для того чтобы придать индивидуальный вид вашим страницам. Чаще всего все страницы имеют один шаблон, либо вариант шаблона с сайдбаром и без него. Согласитесь, этого мало для полета фантазии. В этом уроке мы рассмотрим как лучше всего создавать свои шаблоны для страниц.

Что такое шаблоны страниц

Тема в WordPress может иметь несколько разных шаблонов для вывода страниц, записей, архивов и так далее. Среди шаблонов мы рассматриваем сейчас шаблоны для Страниц. При создании Страницы в WordPress можно выбрать специальный шаблон для неё:

Разные темы могут предоставлять разные шаблоны страниц, например шаблон для страницы во всю ширину экрана (без боковой колонки), с левой боковой колонкой вместо правой и прочее. Отсутствие этой опции при редактировании страниц означает, что тема не объявила дополнительные шаблоны.

Шаблоны страниц можно использовать более чем для одной страницы, а некоторые темы создают вполне специфические шаблоны, предназначенные для использования всего один раз.

Как создать собственный шаблон страницы

При использовании дочерней темы вы можете так же размещать шаблоны страниц в корневой директории или субдиректории, а если выйдет обновление для родительской темы, то ваши файлы не пострадают.

Когда не следует использовать шаблоны страниц

Если с помощью вашего шаблона вы изменяете лишь стиль, а не структуру определенной страницы, то вы можете это сделать и без использования дополнительных шаблонов.

В WordPress есть вспомогательная функция body_class() , которая используется в большинстве существующих тем. С помощью классов выводимых данной функцией, вы можете изменить стиль одной любой страницы используя CSS код:

/* Спрятать боковую колонку на странице 123 */ body.page-id-123 #secondary { display: none; }

Шаблоны страниц так же не следует использовать, чтобы изменить параметры основного цикла WordPress, например для добавления произвольного типа записей или исключения категории. Для таких целей есть специальный фильтр pre_get_posts в WP_Query() .

Если у вас возникли вопросы по работе с шаблонами страниц в WordPress, буду рад ответить на них в комментариях.

Не так давно был опубликован мануал о . Он носил характер знакомства на начальном этапе, но также включал в себя и практические примеры. Хотелось бы продолжить это направление, только уделить внимание страницам. Материал по данной теме является многофункциональным, то есть очень большим. Поэтому затруднительно будет открыть все возможности шаблона страниц в одной статье. Но по меньшей мере постараемся затронуть косвенные детали и, конечно, главные параметры.

Иерархия страниц

Иерархия – это означает последовательность от вышей ступеньки до самого низа, или наоборот. В нашем случае это же порядок авторитетности шаблонных файлов для страницы. Когда пользователь попадает на одну из ваших страниц, то WordPress показывает ее содержимое исходя из варианта создания страниц (подробнее ниже).

Пользовательский шаблон – обозначается условным комментарием вверху внутри файла с произвольным названием.

page-slug.php – шаблон с названием страницы (ярлыка). Если пользовательский шаблон не был указан, то WordPress использует данный тип в качестве основного.

page-id.php – уникальный идентификатор страницы.

page.php – стандартный файл, отвечающий за содержимое страниц.

index.php – индексный файл. Если WordPress не найдет ни одного из выше перечисленного шаблона, то по умолчанию ответственный за страницы станет именно он.

Внимание. Также существует шаблон страницы в WordPress, который называется paged.php, однако, он не используется для вывода страниц единичных постов, скорее для показа списка страниц в архивах записей.

Создание пользовательского шаблона для массового использования

Есть несколько вариантом создания шаблона со своими плюсами и минусами, почти незначительными. Этот вариант, который сейчас мы рассмотрим, является самый распространенный. Первым делом необходимо создать файл php или продублировать стандартный page.php . После чего сохранить его под другим именем, к примеру, templates_my.php . Затем вверху файла добавить комментарий:

Следующим действием загрузите файл в вашу тему, перейдите в админ-панель во вкладку «Страницы-Добавить новую» или можете открыть существующею. В атрибутах страницы выберете какой шаблон будет использоваться на этой странице.

Если вдруг у вас не окажется панели «Атрибуты страницы» тогда просто поставьте галочку в настройках экрана верхнем правом углу, чтобы ее отобразить.

Массовое использование подразумевается, что данный тип шаблона может применяться к любым страницам сайта. В отличие от специализированного, который создавался с определенным идентификатором или ярлыком страницы.

Совет. Шаблон, созданный таким способом, может быть расположен в подпапке текущей темы. Тем самым не занимая лишнего места и создавая компактный вид.

Важно. Не используйте префикс page- в качестве названия шаблонной страницы. Так как WordPress будет интерпретировать файл как специализированный, что однозначно применяется только к одной странице.

Специализированные шаблоны страниц

Второй способ предназначен только для определенных страниц без исключения. Приведем пример по старой схеме. Допустим, у вас есть страница с названием «Портфолио», по умолчанию ее ярлык транслируется в английское слово «portfolio». Это можно увидеть в настройках «Страницы-Свойства». Теперь просто дублируем файл page.php и переименовываем в page-portfolio.php .

С идентификатором создается точно так же, только вместо ярлыка подставляется ID страницы. Он находится в адресной строке, раздел «Страницы-Изменить» выглядит так post=9 . Таким же макаром дублируется стандартный файл и переименовывается в page-9.php .

Важно. Однотипный шаблон, который создан только для конкретной страницы не может находиться в подпапках темы. Точно также, как и в дочерних темах.

Практический пример создания шаблона страниц

Сейчас для примера создадим шаблон на основе первого варианта и изменим в нем цикл, добавив вывод категорий с записями. Открываем любой редактор, добавляем ниже представленный код, сохраняем под названием template_my.php , загружаем на сервер.

    Категория-1

    have_posts()) : $the_query -> the_post(); ?>
  • ">

    Категория-2

    have_posts()) : $the_query -> the_post(); ?>
  • ">

    Категория-3

    have_posts()) : $the_query -> the_post(); ?>
  • ">

Теперь нужно прописать стили в файле style.css

My_main { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); margin: 20px auto; padding: 15px; background: #fff; width:1000px; } .page_cat { margin: 0 9px 20px; padding: 15px; vertical-align: top; width: 28%; display: inline-block; } .page_cat h2 { color: #676767; font: bold 18px arial; margin-bottom: 20px; } .page_cat li a { text-decoration: none; color: #2879af; display: block; } .page_cat li { margin-bottom: 6px; padding: 3px 3px 3px 10px; display: block; } .page_cat li a:hover { text-decoration: underline; } .page_cat li:nth-child(2n) { background: #f7f7f7; }

Осталось сделать одно: в админ-панели во вкладке «Страницы-Изменить» указать в атрибутах страницы наш ранее созданный шаблон «шаблон для примера».

Результат.

Условные теги страниц

В заключительном пункте рассмотрим несколько условных тегов. Прописываются они в стандартном файле page.php .

Вывод элементов на определенных страницах

/images/img.png"/> /images/img.jpg"/> /images/img.jpg"/> /images/img.jpg"/>

вывод информации

"; } ?>

В WordPress можно создавать страницы (pages) или записи (posts). Когда вы пишете обычную запись в блог - вы создаёте запись. Записи автоматически появляются на главной странице в обратном хронологическом порядке.

Страницы же предназначены для такого содержимого как "Обо мне", "Контактная информация" и тому подобное. Страницы находятся вне нормальной хронологической последовательности записей и часто используются для нечувствительной к хронологии информации - той, которая всегда востребована. С помощью страниц можно организовать и управлять любым количеством содержимого.

Также можно привести такие примеры как страницы об авторском праве, лицензионные соглашения, правила использования, информации о сайте. Кстати, хорошим правилом является наличие страницы с информацией о сайте или компании и/или страницы с контактными данными. Вот один из советов от Lorelle (на английском языке) .

В целом, страницы очень похожи на записи - и те и другие имеют название и содержимое и могут использовать шаблоны представлений (Presentation Templates) для сохранения целостного вида сайта. Однако страницы имеют несколько ключевых отличий от записей.

О страницах коротко

Чем страницы являются и что могут:

  • Страницы являются контейнером для содержимого, которое не зависит от времени.
  • Страницы могут использовать различные шаблоны, которые могут включать в себя , метки шаблона () и код PHP.

Чем страницы НЕ являются и что НЕ могут:

  • Страницы - не записи. Они не проходят циклически через главную страницу. Примечание: Включать записи в страницы можно с помощью модуля Inline Posts Plugin .
  • Страницы - не пункты меню, даже если список страниц выводится на месте навигации. Для создания полноценного навигационного меню существует отдельный механизм.
  • Страницы не могут быть связаны с рубриками и метками. Организационная структура опирается только на иерархию.
  • Страницы - это не файлы. Они сохраняются в базе данных точно так же, как записи.
  • Хотя в шаблон страницы можно добавить код PHP, в саму страницу нельзя добавить код так, чтобы при этом он ещё и работал. Примечание: Этого можно достичь, используя модуль, работающий с PHP, такой как Exec-PHP или RunPHP

Создание страниц

Для того чтобы создать страницу войдите в Wordpress с достаточными привилегиями для создания статей. Выберите > > для того чтобы начать работу с новой страницей.

Изменение URL или слага (Slug) страниц

С версии 2.5 смена URL страниц стала менее интуитивной. Если у вас включены пермалинки (Permalinks) и вы выбрали настройку Day and Name (Нажмите Settings и в открывшемся списке Permalinks ), то пермалинк автоматически покажется под названием записи, когда вы начнёте печатать в теле записи (не только в заголовке).

Несмотря на то, что вы можете выбрать несколько разных настроек пермалинков или вообще их не задействовать, для того чтобы редактировать URL страницы, вы должны сделать следующее:

  1. Создать страницу с помощью Write > Page .
  2. Опубликовать её, нажав Publish .
  3. Перейти в Manage > Pages .
  4. Нажать Edit рядом со страницей.
  5. Посмотреть на пермалинк под заголовком и нажать Edit , чтобы его поменять.

Таким образом, если у вас не включено использование пермалинков, вы должны опубликовать ваши страницы перед тем как устанавливать URL.

Вывод страниц на сайте

WordPress способен автоматически создавать список страниц сайта, например в боковой колонке, используя называемую wp_list_pages() . Прочтите для более подробной информации, в том числе как:

  • Сортировать список страниц. Полная настройка порядка вывода описана в секции "Page Order" административной панели Write > Page.
  • из вывода или прятать страницу
  • Управлять отображением страниц, то есть выводить ли все страницы или некоторые подстраницы.
  • Определять насколько глубоко список уходит в иерархию страниц.

Copyright 1996-2006

Часто бывает нужно задать какой-либо странице блога на WordPress отдельный стиль, отличный от основного дизайна блога. Делается это при помощи задания этой странице отдельного шаблона . Разберем, как все это реализуется.

Сначала нужно создать собственно сам шаблон страницы . Для этого можно просто отредактировать файл page.php , который отвечает за вывод постоянных страниц.

Создаем копию этого файла и называем ее к примеру page_extra.php (имя может быть любым). После этого открываем ее в текстовом редакторе и меняем содержимое на то, какое нам нужно. Например, если нужно изменить шапку, то можно создать отдельный файл header_extra.php (имя опять же не имеет значения), а в файле page_extra.php вместо get_header(); вставляем include(«header_extra.php»); . Аналогично можем поменять другие блоки страницы.

Теперь в самом начале файла page_extra.php пишем

1 2 3 4 5

Это будет название нашего нового шаблона. Все, сохраняем файл и закидываем его в папку с установленной темой! Туда же отправляем и все вновь созданные файлы (header_extra.php ).

Теперь надо применить этот шаблон к нужной странице. Это можно сделать через админ панель блога. Для этого создаем страницу или переходим в админке wordpress на редактирование страниц и меняем шаблон трубуемой страницы на только-что созданный.



Так же можно прописать в файле page.php следующий код:

Для версий WordPress от 2.8 все вышесказанное можно сделать другим методом. Для этого используем функцию: . Ее нужно прописать в тег в файле header.php вашей темы.

В итоге текст заголовков третьего уровня станет равным 18px, причем только на статических страницах, или

1 2 3 #post-2 { color : red ; }

Этот код изменит цвет текста в посте с идентификатором 2 на красный.

Вот полный список классов body которые можно использовать для применения к ним стилей:

  • archive
  • search
  • paged
  • attachment
  • error404
  • single postid- (id)
  • attachmentid- (id)
  • attachment- (mime-type)
  • author
  • author- (имя)
  • category
  • category- (имя)
  • tag- (имя)
  • page-parent
  • page-child parent-pageid- (id)
  • page-template page-template- (имя файла шаблона)
  • search-results
  • search-no-results
  • logged-in
  • paged- (номер страницы)
  • single-paged- (номер страницы)
  • page-paged- (номер страницы)
  • category-paged- (номер страницы)
  • tag-paged- (номер страницы)
  • date-paged- (номер страницы)
  • author-paged- (номер страницы)
  • search-paged- (номер страницы)
  • Сергей Савенков

    какой то “куцый” обзор… как будто спешили куда то