В этой статье я расскажу о способах создания шаблонов для постоянных страниц 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 темы).
Только следует учесть, что вордпресс генерирует некоторые классы, которые должны присутствовать в таблице стилей. К примеру классы aligncenter, alignleft и alignright служат для выравнивания изображений и блочных элементов, и их нужно включить в свою таблицу стилей (можно скопировать из таблицы стилей дефолтной темы):
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
Следующие классы используются для выравнивания изображений, которые имеют подписи (можно скопировать из дефолтной темы, в дальнейшем при необходимости поправить):
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* необязательные параметры, которые сделают скругленные углы в поддерживаемых браузерах*/
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
Кроме того, существует еще несколько классов WordPress, которые необязательно описывать в таблице стилей, но, т.к. WordPress генерирует страницы с их использованием, можно и им задать стиль:
.categories {...}
.cat-item /* Этот класс присваивается всем категориям */}
.current-cat {/* стиль текущей категории */}
.current-cat-parent {/* стиль для предка(ов) текущей категории */}
.children {/* класс для потомка */}
.pagenav {/* постраничная навигация */}
.page_item {/* любой элемент списка */}
.current_page_item {/* этот класс присваивается в списке страниц к текущей активной странице */}
.current_page_parent {/*класс для родительской страницы по отношению к текущей */}
.current_page_ancestor {/* любая страница верхних уровней по отношению к данной */}
.widget {/* все виджеты обворачиваются в этот класс */}
В процессе верстки используйте блоки и стили к ним, как это определено в скринах в начале статьи. Это не обязательно, но очень даже желательно.
К примеру в дальнейшем мы подключим поисковую форму на сайт через спец. тег wordpress , в результате чего wordpress выведет такую форму:
Поэтому учитываем это при верстки темы.
И последнее, что нужно добавить в style.css это информацию о себе любимом и о созданной теме. Информация размещается в начале файла в коментах:
/*Theme Name: Придумайте уникальное имя темы
Theme URI: http://ссылка-на-домашнюю-страницу-темы
Description: Описание темы
Author: Автор темы
Author URI: http://ссылка-на-страницу-автора
Template: название-темы-предка
Tags: теги темы - только из списка предлагаемого wordpress.org
Version: версия
Ну и здесь текст лицензии
*/
Также не забудьте сделать screenshot.png и положить его в папку с шаблоном (в корень). Информация, размещенная таким образом в таблице стилей, будет отображаться в админке в разделе Управление «темами» . Сверстанный шаблон тестируем в браузерах, если все норм, можно идти далее.
Код страниц сверстанного шаблона приводить не буду, т.к. он достаточно большой, вы его просто скачайте , далее будем работать с ним.
Принцип работы wp-темы
:
Если вы откроете папку темы по умолчанию (wp-content/themes/default), вы увидите множество файлов PHP (файлы темы) и одного файла style.css. Когда мы просматриваем блог, WP подключает файлы темы (index.php < На этом предварительная подготовка закончена и мы можем перейти к созданию темы из имеющегося исходного материала. Шаг 1:
Теперь файлы нашего шаблона нужно "распилить", т.е. вытащить в отдельные файлы footer, sidebar и header. Схема показывает упрощенный вид файла index.php
с метками, согласно которым будем его пилить: Шаг 2
- Header.php
Теперь идем в папку с дефолтной темой, открываем header.php
и копируем оттуда теги Шаг 3 - Sidebar.php
Для начала в директории тем вордпресса (wp-content/themes) создайте папку с именем нашей темы. Пусть это будет ruseller_lessons
. Затем из папки темы по умолчанию (wp-content/themes/default) скопируйте файлы comments.php, search.php
и 404.php
в папку нашей темы. Эти файлы отвечают за комментарии и поиск на блоге. Затем в ruseller_lessons
скопируйте таблицу стилей style.css
нашего шаблона, screenshot.png (300x225)
и папку images
.
Открываем index.html
и вырезаем все, что находится до коментария , создаем новый файл header.php
и вставляем в него вырезанный код, сохраняем в директории нашей темы ruseller_lessons
:
My Blog
" type="text/css" media="screen" />
" />
/">
Возращаемся к файлу index.htm. Первым делом удаляем всю форму поиска, затем вырезаем из него все от