Codex

Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

Создание тем

Эта страница помечена как незавершённая. Вы можете помочь проекту, дополнив её.

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

Вы можете разрабатывать темы для себя лично или для общественного пользования.

Зачем нужны темы WordPress

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

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

Тема WordPress также предоставляет некоторые преимущества.

  • Она разделяет стили представления и файлы шаблонов от системных файлов, позволяя производить обновления без сильных изменений внешнего вида сайта.
  • Она позволяет настраивать специфические для данной темы параметры вывода.
  • С помощью неё можно быстро сменить внешний вид сайта на основе WordPress.
  • Благодаря ей, отпадает необходимость пользователю изучать CSS, HTML и PHP для того, чтобы сделать свой сайт привлекательным.

Но зачем вам создавать свою собственную тему? Вот в чём главный вопрос.

  • Это возможность узнать больше о CSS, HTML/XHTML и PHP.
  • Это возможность показать свои умения в CSS, HTML/XHTML и PHP.
  • Это возможность творить.
  • Это весело (по большей части).
  • Если вы предоставили свою тему в общественный доступ, то вы получите удовлетворение от того, что поделились и дали что-то взамен Сообществу 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.css обязательно должен содержать информацию о вашей теме в виде комментариев. Каждая тема должна иметь свою собственную уникальную информацию в комментариях заголовка, в обратном случае возникнут проблемы в диалоге выбора темы. Создавая новую тему на основе уже существующей, в первую очередь измените комментарии заголовка.

Ниже приведен шаблон заголовка таблицы стилей (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 следующую строку:

       Template: test

После добавления такой строки в заголовок style.css все шаблоны темы "test" будут наследоваться вашей темой "Rose", в которой ничего нет, кроме файла с таблицей стилей style.css, и возможно, рисунков. Эти файлы необходимо поместить в каталог wp-content/themes/Rose.

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

Комментарии в заголовке style.css нужны WordPress для идентификации темы и отображения её в Administration Panel подменю Design > Themes в качестве установленной темы, вместе с другими установленными темами.

Примечание : Когда вы определяете родительскую тему, в строке комментариев Template: , вы должны использовать имя каталога темы. Например, для использования темы "Default Wordpress Theme", не пишите

       Template: WordPress Default

а пишите

       Template: default

поскольку "default" - это имя каталога родительской темы.

Файл дополнительного функционала

Тема может дополнительно использовать файл с необходимыми функциями для работы темы, он должен располагаться в каталоге темы и называться functions.php. Этот файл в основном работает подобно плагину, и если он присутствует в каталоге темы, которую вы используете, то он автоматически загружается во время инициализации WordPress. Это верно как для страниц админки, так и для остальных (внешних к админке) страниц. Предлагается следующее использование для этого файла:

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

Темы, поставляемые с WordPress и установленные из коробки, имеют файл functions.php, который определяет ряд функций и настроек в админке темы, поэтому вы можете использовать его в качестве модели. Файл functions.php в основном работает как плагин, раздел Кодекса Function_Reference - лучшее место, где можно получить более подробную информацию о том, как вы можете использовать этот файл.

Файлы шаблонов темы

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

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

Базовые шаблоны

Минимальная тема WordPress состоит из двух файлов:

  • style.css
  • index.php

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

Если вы не добавите в тему свои собственные файлы шаблонов, WordPress будет использовать встроенные файлы шаблонов по умолчанию. Например, если у вас в теме нет файлов шаблонов: ни comments.php, ни comments-popup.php, то WordPress будет автоматически использовать стандартные wp-comments.php и wp-comments-popup.php файлы шаблонов, согласно иерархии шаблонов Template Hierarchy. Эти шаблоны по умолчанию скорее всего не будут соответствовать стилям вашей темы, так что вам, вероятно, придётся разработать свои ​​собственные файлы шаблонов. Вот основные файлы, которые обычно используют для разделения вида страниц (и которые должны быть в каталоге темы):

  • header.php
  • sidebar.php
  • footer.php
  • comments.php
  • comments-popup.php

Если вы разработали эти модульные файлы шаблонов, вы можете их добавить шаблон в index.php (главный файл-шаблон), и результат их работы появится на странице у пользователя. Чтобы включить или получить эти модули шаблонов там, где вы хотите, следуйте инструкциям.

  • Для добавления шаблона header.php используйте get_header() template tag.
  • Для добавления шаблона sidebar.php используйте get_sidebar() template tag.
  • Для добавления шаблона footer.php используйте the get_footer() template tag.

Вот пример включения шаблонов:

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Более подробную информацию о том, как разрабатывать различные шаблоны и как они работают, как генерировать различную информацию в них, читайте в документации Templates

Выбор шаблонов, основанный на запросах

WordPress позволяет программисту использовать различные варианты для подключения шаблонов из набора шаблонов: во-первых, с использованием иерархии шаблонов Template Hierarchy, во-вторых - с использованием условных тегов Conditional Tags внутри цикла обработки The Loop файлов шаблона.

В первом случае, при использовании иерархии шаблонов Template Hierarchy, необходимо создать специальные файлы шаблонов, которые будут автоматически использоваться в необходимый момент для создания страницы вместо базового шаблона index.php. Например, если ваша тема содержит шаблон под названием category.php и пришёл запрос на страницу с категорией, шаблон category.php будет загружен вместо шаблона index.php. Если файл category.php в теме отсутствует, будет загружен шаблон index.php, как обычно.

Вы можете определить шаблон для конкретной категории, например, добавив в тему файл шаблона category-6.php. Файл будет использован вместо index.php в том случае, когда ID категории будет равен 6. Чтобы узнать ID категории, зайдите в Manage > Categories, если у вас есть доступ администратора в WordPress version 2.3 или ниже.

Начиная с WordPress 2.5 столбец ID был удалён из панели администратора. Вы можете определить ID категории, кликнув 'Edit Category' и посмотрев в URL-е значение cat_ID. Например, конец URL:

   '...categories.php?action=edit&cat_ID=3'

где '3' - и есть ID текущей категории. Более детально этот процесс рассмотрен в Category Templates

Если ваша тема должна уметь еще более подробно управлять шаблоном отображения, чем тот уровень контроля, который обеспечивает иерархия шаблонов Template Hierarchy, вы можете использовать условные теги Conditional Tags. Условные теги в основном проверяют, если какое-либо особое состояние верно во время исполнения WordPress Loop, в таком случае вы можете загрузить определенный шаблон или отобразить некоторые варианты текста на странице в соответствии с этим состоянием.

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

<?php
if (is_category(9)) {
   // для постов 9 категории
   include(TEMPLATEPATH . '/single2.php');
} else {
   // для других постов
   include(TEMPLATEPATH . '/single1.php');
}
?>

Или, используя объект запроса, тот же алгоритм можно реализовать по-другому:

<?php
$post = $wp_query->post;
if ( $post->in_category('9') ) {
   include(TEMPLATEPATH . '/single2.php');
} else {
   include(TEMPLATEPATH . '/single1.php');
}
?>

В любом случае, оба примера кода будут вызывать различные шаблоны, в зависимости от 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):

  1. my_theme/images/audio.jpg
  2. my_theme/images/audio.gif
  3. my_theme/images/audio.png
  4. my_theme/images/mpeg.jpg
  5. my_theme/images/mpeg.gif
  6. my_theme/images/mpeg.png
  7. my_theme/images/audio_mpeg.jpg
  8. my_theme/images/audio_mpeg.gif
  9. my_theme/images/audio_mpeg.png

Перечень стандартных файлов шаблонов темы

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

style.css
Главный файл таблицы стилей. Файл должен быть в теме обязательно и обязательно должен содержать описанные выше комментарии в заголовке файла.
index.php
Главный файл шаблонов. Если вы в своей теме используете свои шаблоны, этот файл index.php обязателен.
comments.php
Шаблон комментариев. Если его нет, используется файл comments.php из темы по умолчанию.
comments-popup.php
Добавляет всплывающее меню для комментариев на JS. При отсутствии вызывается comments-popup.php из темы по умолчанию.
home.php
Шаблон главной страницы блога.
single.php
Шаблон страницы одиночного поста. Используется, когда запрошен конкретный пост. Для этого и других шаблонов по запросу используется index.php, если в вашей теме нет соответствующего файла шаблона.
page.php
Шаблон отдельной страницы, используется для отображения запрошенной страницы Page.
category.php
Шаблон категории category template. Используется при запросе категории.
author.php
Шаблон автора блога author template. Используется при запросе автора блога.
date.php
Шаблон вывода даты-времени. Используется при запросе даты и времени. Год, месяц, день месяца, час, минута, секунда.
archive.php
Шаблон архива. Используется, когда запрошены категория, автор или дата. Учтите, что этот шаблон может быть переопределен шаблонами category.php, author.php и date.php для соответствующих типов запросов.
search.php
Шаблон результатов поиска. Используется после выполнения поиска.
404.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), как запросы отображаются в шаблонах.

Следующий код <?php bloginfo('template_directory'); ?> вставляет URL шаблона в вывод шаблона. Вы можете добавить любую дополнительную информацию для ссылок на файлы из вашей темы.

Следующий код <?php bloginfo('stylesheet_directory'); ?> добавляет URL каталога, который содержит файлы стилей .css вашей темы, в вывод шаблона. Вы можете добавить любую дополнительную информацию для ссылок на файлы вашей темы, особенно те, которые необходимы для таблиц стилей (чтобы этого избежать, используйте это вместо <?php bloginfo('stylesheet_directory'); ?>).

Константа TEMPLATEPATH содержит абсолютный путь к каталогу шаблонов текушей темы (без символа '/' в конце).

Обратите внимание, что URI, которые используются в таблице стилей, привязаны к каталогу, где находится файл таблицы стилей, а не к каталогу, где находится шаблон, использующий эти стили. Это устраняет необходимость добавления кода PHP в файл таблицы стилей для задания текущего каталога. Например, если вы в таблице стилей используете изображения из каталога images/ своей темы, вы должны указать в CSS только относительный путь, например:

h1 { background-image: URL(images/my_background.jpg); }

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

Определение пользовательских типов шаблонов

Для добавления своих собственных типов шаблонов, которые используются в определённых вами случаях, можно использовать систему плагинов WordPress. Это необходимо, если вы хотите сделать, например, различную вёрстку для различных случаев или свой шаблон комментариев и т.д. Это расширение возможностей WordPress можно достичь при помощи перехвата события template_redirect , см. action hook. Более подробную информацию о создании плагинов можно найти по ссылке Plugin API.

Необходимые вызовы событий для совместимости

При разработке темы желательно иметь в виду, что ваша тема должна быть настроена таким образом, что она может хорошо работать с любым плагином для WordPress, который вы или другой пользователь вашей темы захочет установить. Плагины расширяют функциональные возможности WordPress с помощью перехвата событий ("Action Hooks", см. Plugin API для получения дополнительной информации). Большинство событий происходит в ядре WordPress, так что вашей теме нет необходимости вызова перехваченных специальных событий для своей работы. Но некоторые перехваченные события всё же придётся вызывать, для того, чтобы устанавливаемые плагины корректно отображали информацию, непосредственно в заголовке (верхнем колонтитуле) и подвале (нижнем колонтитуле), в боковой панели, или в основном теле страницы. Вот список специальных тегов событий, которые необходимо вызывать в вашей теме для корректной работы любых плагинов:

wp_head
Происходит при отображении HTML кода элемента <head> в шаблоне header.php. Пример использования в плагине: добавление кода javascript.
Использование: <?php do_action('wp_head'); ?>
-или-  <?php wp_head(); ?>
wp_footer
Происходит при отображении заголовка (верхнего колонтитула) "footer" темы в шаблоне footer.php. Пример использования в плагине: вставка кода PHP, который должен выполняться после всего, самым последним на странице.
Использование: <?php do_action('wp_footer'); ?>
-или-  <?php wp_footer(); ?>
wp_meta
Событие обычно происходит при обработке тега <li>Meta</li> при отрисовке меню или в меню боковой панели в шаблоне sidebar.php. Пример использования: включение круговой рекламы или облака тегов в боковую панель.
Использование: <?php do_action('wp_meta'); ?>
-или-  <?php wp_meta(); ?>
comment_form
Происходит при отработке скриптов шаблонов comments.php и comments-popup.php, непосредственно перед закрытием тега формы комментариев (</form>). Пример использования: Показать предпросмотр только что добавленных комментариев.
Использование: <?php do_action('comment_form', $post->ID); ?>

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

Общие замечания для разработчиков тем

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

  1. Укажите, для чего именно предназначена ваша тема и файлы шаблонов.
  2. Придерживайтесь соглашения о наименованиях в стандартной иерархии темы.
  3. Укажите недостатки вашей темы, если таковые имеются.
  4. Пишите простые и понятные комментарии comments, особенно в сложных местах, в шаблонах и файлах стилей. Добавьте комментарии в местах, где вы изменили стандартное поведение шаблонов и стилей.
  5. Если у вас есть какие-либо специальные требования, которые могут включать пользовательские правила перезаписи или изменений или использование некоторых дополнительных, специальных шаблонов, изображений или других файлов, пожалуйста, чётко укажите шаги действий пользователя, которые он должен предпринять, чтобы получить вашу тему полноценно работающей.
  6. Попробуйте и протестируйте вашу тему в разных браузерах across browsers, чтобы поймать хотя бы некоторые из проблем, с которыми пользователи могут столкнуться problems.
  7. Укажите контактную информацию (веб-страницу или электронную почту), если возможно, для информационной поддержки и вопросов пользователей.

Найдите время, чтобы прочитать раздел "Проектирование Темы для общественного пользования" Designing Themes for Public Release. Это статья с хорошими советами по подготовке вашей темы для общественности.

Ссылки и ресурсы

Полный список ресурсов, касающихся тем и шаблонов доступен в статье Templates.