В этой статье я расскажу о способах создания шаблонов для постоянных страниц WordPress. Каждый способ несет в себе плюсы и минусы. Но прежде чем начать, коротко о том, что такое страницы и чем они отличаются от записей.
В WordPress можно создавать страницы (page) и записи (post). Отличаются они тем, что записи: попадают в ленту на главной странице; для записей указываются категории; записи не могут быть древовидными, а страницы: используются для такого содержимого как «Обо мне», «Контакты», «Карта сайта»; не имеют категорий, а имеют древовидную структуру. Записи обычно предназначены для хронологической информации (по времени добавления), а страницы для древовидной структуры не зависимой от времени. Для примера, эта статья опубликована как «запись» в рубрике «Кодекс», а ссылки в меню шапки ведут на страницы: Функции.
Страницы похожи на записи — они расположены в одной таблице базы данных и данные у них почти одинаковы: заголовок, текст, дополнительные поля и т.д. И то и другое — это записи, но разных типов: страницы древовидные и организуются путем создания родительских и дочерних страниц, а записи объединяются рубриками и метками. В WordPress можно создавать дополнительные типы записей древовидные или нет.
Создание страниц в WordPress
Часто нужно создать отдельный шаблон страницы, чтобы вывод информации отличался от остальных страниц. Создавая шаблон страницы в WordPress, можно совершенно изменить страницу: удалить сайдбар, подвал, шапку, можно изменить страницу до неузнаваемости. Например, на этом сайте так изменяется страница на которой выводятся коды файлов WordPress.
- Шаблон страницы через файл с произвольным названием (классический способ)
- Шаблон страницы через файл с конкретным названием (иерархия файлов шаблона)
- Шаблон страницы через фильтр «template_include» (коддинг)
- Зачем нужны темы WordPress
- Стандарты создания тем
- Таблица стилей темы
- Файл дополнительного функционала
- Файлы шаблонов темы
- Выбор шаблонов, основанный на запросах
- Иконки типов файлов
- Перечень стандартных файлов шаблонов темы
- Ссылки на файлы из шаблона
- Определение пользовательских типов шаблонов
- Общие замечания для разработчиков тем
- Одиночное сообщение (single.php)
Шаблон страницы через файл с произвольным названием (классический способ)
Это самый распространенный способ создать шаблон страницы в WordPress. Для этого нужно создать .php файл, например, tpl_my-page.php в папке темы и в самом начале файла вписать метку, что созданный файл является шаблоном для страниц:
Теперь при создании страницы в админ-панели в блоке «Свойства страницы» мы сможем выбрать «шаблон»:
/*
Template Name: Мой шаблон страницы
Template Post Type: post, page, product
*/
Подробнее читайте в отдельной статье.
После создания файла шаблона в папке темы, нужно зайти в админ-панель и установить шаблон для страницы. При разработке это не всегда удобно. Поэтому если подразумевается использовать шаблон только для одной страницы, используйте второй метод.
Как это работает:
Когда вы заходите в админ-панель на страницу редактирования записи древовидного типа, WordPress просматривает все .php файлы в корневой папке темы и в всех вложенных папках (просматривается один уровень) на наличие следующей строки (строка может располагаться где угодно и как угодно в файле):
Template Name: ***
Все файлы с подобными строками собираются и выводятся в выбор шаблона в блок «Атрибуты страницы».
При публикации страницы, в произвольное поле _wp_page_template записывается название файла шаблона или default, если шаблон не указан:
_wp_page_template = default
_wp_page_template = tpl_my-page.php
Далее, когда пользователь посещает страницу, WordPress проверят метаполе _wp_page_template, если шаблон установлен, то используется файл шаблона. В противном случае поиск шаблона страницы продолжается по иерархии.
Локализация названия шаблона
/**
* Template Name: Мой шаблон страницы
* Template Post Type: post, page, product
*/
__( ‘Мой шаблон страницы’, ‘my-theme’ );
my-theme — это ID перевода — параметр Text Domain:, который указывается в заголовках темы и при подключении файла перевода, см. load_theme_textdomain().
Шаблон страницы через файл с конкретным названием (иерархия файлов шаблона)
При создании страницы ей устанавливается ярлык (слаг, альтернативное название). Он используется в УРЛ страницы. И его можно изменить:
Изменение слага страницы
Для создание шаблона этим способом, вам нужно узнать слаг страницы и создать файл в папке темы. Допустим, наш слаг как на картинке равен contacts, тогда создадим в теме файл page-contacts.php. и заполним его нужным кодом (можно скопировать содержимое из файла шаблона page.php и отредактировать под себя).
Все, теперь при посещении страницы мы должны увидеть новый шаблон. Аналогично можно взять ID (пусть 12) страницы и создать файл page-12.php.
Нет необходимости заходить в админ-панель и устанавливать файл шаблона. Шаблон начинает работать сразу после создания файла. Удобно при разработке.
Шаблон создается только для одной, конкретной страницы. Зависит от слага страницы, если он изменится шаблон работать не будет. Если использовать ID, то зависимость от слага пропадает, но становится непонятно в файла темы, к какой странице относится шаблон (если несколько шаблонов с ID).
Практически бесполезен при написании шаблонов, а тем-более плагинов. Его можно использовать, когда правишь свой сайт, в котором слаг или ID страницы известны заранее.
WordPeress подбирает какой файл использовать в следующем порядке (файлы должны быть в корне темы):
Шаблон страницы через фильтр «template_include» (коддинг)
Это продвинутый способ, он более сложный, но вместе со сложностью он открывает широкие возможности. С помощью этого способа можно задать шаблон любой странице, записи, категории, любой публикации на сайте или вообще группе любых публикаций.
Зачем нужны темы WordPress
Темы WordPress состоят из файлов и стилей, которые вместе определяют внешний вид сайта. Они могут сильно отличаться между собой, позволяя пользователям быстро изменить дизайн веб-сайта. Но зачем вам может понадобиться своя тема?
Тема WordPress также предоставляет некоторые преимущества.
Стандарты создания тем
При написании кода тем WordPress, придерживайтесь следующих стандартов:
Темы WordPress находятся в поддиректориях wp-content/themes/. Директория темы содержит таблицы стилей, файлы шаблонов, файл дополнительного функционала (functions.php) и картинки. К примеру, тема под названием «test» вероятно будет расположена в директории wp-content/themes/test/.
По умолчанию WordPress содержит три темы, созданные командой разработчиков WordPress: «Twenty Fifteen», «Twenty Sixteen» и «Twenty Seventeen». Эти темы отличаются между собой и используют различные функции и теги для создания внешнего вида и страниц сайта. Внимательно изучите составляющие их файлы, чтобы лучше понять, как создать свою собственную тему.
Тема WordPress состоит из трёх основных типов файлов, в дополнение к изображениям. Первый — это таблица стилей под именем style.css, которая контролирует внешний вид страниц сайта. Второй предоставляет собой файл дополнительного функционала (functions.php). Остальные файлы — это файлы шаблонов, которые определяют, каким образом выводится информация из базы данных на веб-страницу. Давайте рассмотрим каждый тип по отдельности.
Таблица стилей темы
Ниже приведен шаблон заголовка таблицы стилей (style sheet header) вашей темы Rose. Он должен находится в начале файла стилей style.css, в первых строках:
/*
Theme Name: Rose
Theme URI: домашняя-страница-темы
Description: краткое-описание-темы
Author: ваше-имя
Author URI: ваш-URI
Template: напишите-здесь-наименование-родительской-темы—необязательное-поле
Version: номер-версии—необязательное-поле
.
Развёрнутое описание темы/Лицензия-если-нужно.
.
*/
Простейшая тема включает в себя только файл style.css плюс изображения, если они необходимы. Для создания такой темы необходимо в строке заголовка Template: указать имя родительской темы. Например, если ваша тема «Rose» происходит (наследует) от темы «test», напишите в заголовке style.css следующую строку:
После добавления такой строки в заголовок style.css все шаблоны темы «test» будут наследоваться вашей темой «Rose», в которой ничего нет, кроме файла с таблицей стилей style.css, и возможно, рисунков. Эти файлы необходимо поместить в каталог wp-content/themes/Rose.
Начиная с WordPress 2.7 тема-потомок может содержать файлы-шаблоны, имена которых совпадают с именами шаблонов в родительской теме, в админ-панели можно выбрать эти шаблоны для использования, и они будут использоваться вместо родительских.
Примечание : Когда вы определяете родительскую тему, в строке комментариев Template: , вы должны использовать имя каталога темы.
Файл дополнительного функционала
Тема может дополнительно использовать файл с необходимыми функциями для работы темы, он должен располагаться в каталоге темы и называться functions.php. Этот файл в основном работает подобно плагину, и если он присутствует в каталоге темы, которую вы используете, то он автоматически загружается во время инициализации WordPress. Это верно как для страниц админки, так и для остальных (внешних к админке) страниц. Предлагается следующее использование для этого файла:
Файлы шаблонов темы
Шаблоны — это PHP файлы, которые используются для генерации страниц или их частей, запрошенных посетителями блога. Давайте рассмотрим различные варианты шаблонов, которые можно использовать как часть темы.
WordPress позволяет определять отдельные шаблоны для различных потребностей и частей вашего блога, но вовсе не обязательно, чтобы все эти различные шаблоны вашего блога одновременно исполнялись для генерации страниц в полном составе. Шаблоны выбираются и используются для генерации страницы на основе иерархии шаблонов, в зависимости от того, какие шаблоны доступны в той или иной теме. Как разработчик темы, вы можете выбрать количество настроек, которые вы хотите реализовать с использованием шаблонов. Например, в крайнем случае, вы можете использовать только один файл шаблона, с именем index.php в качестве шаблона для всех страниц, создаваемых и отображаемых в блоге. Однако наиболее часто используют различные файлы шаблонов для генерации различного вида страниц, чтобы обеспечить максимальную гибкость настройки.
Минимальная тема WordPress состоит из двух файлов:
Оба этих файла помещают в папку темы. Файл шаблона index.php является весьма гибким. Его можно использовать так, что в него добавлены все ссылки на заголовок, боковую панель, подвал, содержание, категории, архивы, поиск, страницы ошибок и другие необходимые веб-страницы, создаваемые пользователем на вашем сайте. В другом варианте построения темы разработайте для темы другие модульные файлы шаблонов, каждый из которых примет на себя часть функционала.
Если вы не добавите в тему свои собственные файлы шаблонов, WordPress будет использовать встроенные файлы шаблонов по умолчанию. Например, если у вас в теме нет файлов шаблонов: ни comments.php, ни comments-popup.php, то WordPress будет автоматически использовать стандартные wp-comments.php и wp-comments-popup.php файлы шаблонов, согласно иерархии шаблонов Template Hierarchy. Эти шаблоны по умолчанию скорее всего не будут соответствовать стилям вашей темы, так что вам, вероятно, придётся разработать свои собственные файлы шаблонов.
Вот основные файлы, которые обычно используют для разделения вида страниц (и которые должны быть в каталоге темы):
Если вы разработали эти модульные файлы шаблонов, вы можете их добавить шаблон в index.php (главный файл-шаблон), и результат их работы появится на странице у пользователя. Чтобы включить или получить эти модули шаблонов там, где вы хотите, следуйте инструкциям.
Выбор шаблонов, основанный на запросах
WordPress позволяет программисту использовать различные варианты для подключения шаблонов из набора шаблонов: во-первых, с использованием иерархии шаблонов Template Hierarchy, во-вторых — с использованием условных тегов Conditional Tags внутри цикла обработки The Loop файлов шаблона.
В первом случае, при использовании иерархии шаблонов Template Hierarchy, необходимо создать специальные файлы шаблонов, которые будут автоматически использоваться в необходимый момент для создания страницы вместо базового шаблона index.php. Например, если ваша тема содержит шаблон под названием category.php и пришёл запрос на страницу с категорией, шаблон category.php будет загружен вместо шаблона index.php. Если файл category.php в теме отсутствует, будет загружен шаблон index.php, как обычно.
Начиная с WordPress 2.5 столбец ID был удалён из панели администратора. Вы можете определить ID категории, кликнув ‘Edit Category’ и посмотрев в URL-е значение cat_ID. Например, конец URL:
где ‘3’ — и есть ID текущей категории. Более детально этот процесс рассмотрен в Category Templates
Если ваша тема должна уметь еще более подробно управлять шаблоном отображения, чем тот уровень контроля, который обеспечивает иерархия шаблонов Template Hierarchy, вы можете использовать условные теги Conditional Tags. Условные теги в основном проверяют, если какое-либо особое состояние верно во время исполнения WordPress Loop, в таком случае вы можете загрузить определенный шаблон или отобразить некоторые варианты текста на странице в соответствии с этим состоянием.
Например, для создания различных стилей, в зависимости от номера категории, код может выглядеть следующим образом:
Или, используя объект запроса, тот же алгоритм можно реализовать по-другому:
В любом случае, оба примера кода будут вызывать различные шаблоны, в зависимости от ID категории. Условные теги не ограничиваются категориями, см. статью Conditional Tags, в ней рассмотрены все возможные варианты.
Иконки типов файлов
Эта возможность не работает в WordPress 2.5.
WordPress использует иконки типов файлов (attachment files) в вашем блоге и в интерфейсе Админ-панели, если эти иконки существуют в указанном месте.
WordPress ищет эти файлы в каталоге images текущей темы.
(А в WordPress 2.2, тема по умолчанию имеет только одну иконку, audio.jpg.)
Например, для отрисовки иконки типа MIME type audio/mpeg, WordPress будет искать файл иконки в указанном каталоге images текущей темы, он выбирает первый подходящий файл (см. описание функции wp_mime_type_icon):
Перечень стандартных файлов шаблонов темы
Ниже приведен список стандартных файлов шаблонов, используемых WordPress. Конечно, ваша тема может содержать и другие файлы стилей, изображений или программ. Просто имейте в виду, что приведеные ниже имена файлов имеют особое значение для WordPress — см. шаблон иерархии Template Hierarchy для получения дополнительной информации.
Главный файл шаблонов. Если вы в своей теме используете свои шаблоны, этот файл index.php обязателен.
Шаблон комментариев. Если его нет, используется файл comments.php из темы по умолчанию.
Добавляет всплывающее меню для комментариев на JS. При отсутствии вызывается comments-popup.php из темы по умолчанию.
Шаблон главной страницы блога.
Шаблон страницы одиночного поста. Используется, когда запрошен конкретный пост. Для этого и других шаблонов по запросу используется index.php, если в вашей теме нет соответствующего файла шаблона.
Шаблон отдельной страницы, используется для отображения запрошенной страницы Page.
Шаблон категории category template. Используется при запросе категории.
Шаблон автора блога author template. Используется при запросе автора блога.
Шаблон вывода даты-времени. Используется при запросе даты и времени. Год, месяц, день месяца, час, минута, секунда.
Шаблон архива. Используется, когда запрошены категория, автор или дата. Учтите, что этот шаблон может быть переопределен шаблонами category.php, author.php и date.php для соответствующих типов запросов.
Шаблон результатов поиска. Используется после выполнения поиска.
Шаблон для сообщения об ошибке 404 Not Found . Используется, когда WordPress не может найти сообщение или страницу, которая соответствует запросу.
Эти файлы имеют специальное значение в WordPress, поскольку они используются для замены index.php, когда они есть в каталоге темы, в соответствии с иерархией шаблонов Template Hierarchy, и когда поступил соответствующий запрос; или же в соответствии с истинностью условных тегов Conditional Tag, когда функция типа is_*(); возвращает ‘true’.
Например, если требуется отобразить единственный пост, функция is_single() возвращает ‘true’, и в каталоге активной темы есть файл шаблона single.php , этот шаблон используется для создания страницы.
Ссылки на файлы из шаблона
Тема WordPress по умолчанию представляет собой хороший пример техники (впервые описанной Майклом Хелманном (Michael Heilemann) в Kubrick в макете для WordPress 1.2), как запросы отображаются в шаблонах.
Константа TEMPLATEPATH содержит абсолютный путь к каталогу шаблонов текушей темы (без символа ‘/’ в конце).
Обратите внимание, что URI, которые используются в таблице стилей, привязаны к каталогу, где находится файл таблицы стилей, а не к каталогу, где находится шаблон, использующий эти стили. Это устраняет необходимость добавления кода PHP в файл таблицы стилей для задания текущего каталога.
Например, если вы в таблице стилей используете изображения из каталога images/ своей темы, вы должны указать в CSS только относительный путь, например:
Это хороший вариант использовать способ, описанный выше, для ссылки на файлы. В этом случае вам не понадобятся абсолютные пути в ваших шаблонах.
Определение пользовательских типов шаблонов
При разработке темы желательно иметь в виду, что ваша тема должна быть настроена таким образом, что она может хорошо работать с любым плагином для WordPress, который вы или другой пользователь вашей темы захочет установить.
Плагины расширяют функциональные возможности WordPress с помощью перехвата событий («Action Hooks», см. Plugin API для получения дополнительной информации). Большинство событий происходит в ядре WordPress, так что вашей теме нет необходимости вызова перехваченных специальных событий для своей работы. Но некоторые перехваченные события всё же придётся вызывать, для того, чтобы устанавливаемые плагины корректно отображали информацию, непосредственно в заголовке (верхнем колонтитуле) и подвале (нижнем колонтитуле), в боковой панели, или в основном теле страницы. Вот список специальных тегов событий, которые необходимо вызывать в вашей теме для корректной работы любых плагинов.
Происходит при отображении заголовка (верхнего колонтитула) «footer» темы в шаблоне footer.php. Пример использования в плагине: вставка кода PHP, который должен выполняться после всего, самым последним на странице.
Для реального примера, вы можете найти эти вызовы событий для плагинов в соответствующих шаблонах темы по умолчанию.
Общие замечания для разработчиков тем
Пожалуйста, четко представьте себе и опишите в вашей документации на тему (файл README, включенный в вашу тему, поможет многим пользователям обойти любые потенциальные камни преткновения):
Найдите время, чтобы прочитать раздел «Проектирование Темы для общественного пользования» Designing Themes for Public Release. Это статья с хорошими советами по подготовке вашей темы для общественности.
Одиночное сообщение (single.php)
Создайте скриншот для своей темы. Снимок экрана должен называться screen.png и располагаться в каталоге верхнего уровня. Скриншот должен точно отображать дизайн темы и сохранен в формате PNG. Хотя .jpg, .jpeg и .gif также являются допустимыми расширениями и форматами файлов для снимка экрана, использовать их не рекомендуется.
Рекомендуемый размер изображения: 1200 пикселей в ширину и 900 пикселей в высоту. Скриншот обычно отображается в меньшем размере, но изображение увеличенного размера позволяет просматривать его в высоком разрешении на дисплеях HiDPI. Обратите внимание: поскольку экран «Управление темами» отзывчив, верхняя и нижняя части изображения снимка экрана могут быть недоступны для просмотра, поэтому располагайте графику ближе к центру.
Темы могут дополнительно поддерживать экран настройки темы. Пример кода см. в разделе «Образец страницы параметров темы WordPress».
Как только вы перейдете на более продвинутую территорию разработки и ваши темы вырастут в размерах и сложности, вам будет проще разбить тему на множество отдельных файлов (называемых файлами шаблонов). Например, большинство тем WordPress также включают:
Создание отдельных файлов мы рассмотрим позже в этом руководстве, а пока давайте запустим вашу первую тему!
Скопируйте новую тему в папку wp-content/themes в вашей среде разработки и активируйте ее для проверки и тестирования.
Вот как выглядит ваша первая тема в интерфейсе.
Ладно, это пока не самая красивая тема, но начало потрясающее!
Помните, что главное здесь не в том, чтобы зацикливаться на том, как все эти вещи делаются сейчас, а в том, чтобы понять руководящие принципы создания тем WordPress, которые выдержат испытание временем, независимо от того, как изменится код или структура файла шаблона со временем меняется.
Всем веб-сайтам, независимо от того, как они созданы, необходимы общие элементы: заголовки, области основного контента, меню, боковые панели, нижние колонтитулы и тому подобное. Вы обнаружите, что создание тем WordPress — это на самом деле еще один способ создания веб-сайта.