Добро пожаловать в Руководство по созданию тем на WordPress на русском (WordPress Theme Developer Handbook), ваш ресурс для изучения захватывающего мира тем WordPress.

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

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

  1. Если вы новичок в разработке тем WordPress, начните с раздела 1, где вы можете узнать, что такое тема, узнать о лицензии WordPress, настроить среду разработки и создать свою первую тему.
  2. Как только вы закончите вводную часть, раздел “Основы темы” познакомит вас со строительными блоками темы WordPress.
  3. В разделе “Функциональность темы” вы увидите всевозможные типы функциональности, которые можно использовать в вашей теме.
  4. Если вы хотите обеспечить гибкость и в то же время защитить своих пользователей, перейдите к разделам “Настройка” и “Безопасность”.
  5. Если вам нужно разобраться в основах тем, ознакомьтесь с расширенными тематическими разделами, чтобы узнать о дочерних темах, лучших практиках работы с пользовательским интерфейсом, тематическом тестировании и многом другом.
  6. Как только вы подготовите свою тему для мира, последний раздел будет посвящен выпуску вашей темы, ознакомлению с некоторыми лучшими практиками распространения тем, а также подготовке ее для тематического каталога WordPress.org.

Руководство по созданию тем (WordPress Theme Developer Handbook) было создано сообществом WordPress для сообщества WordPress. Мы всегда ищем новых участников; если вы заинтересованы, заходите на блог команды docs, чтобы узнать больше об участии.

1. Первая папка, описание темы и “Hello World”

На данном этапе мы создадим папку нашей первой темы, добавим описание, сделаем превью шаблона и выведем “Hello World”.

На данный момент будем считать, что вы установили на локальный сервер Wordrpess версии старше 5.0 и на вашем компьютере есть удобный редактор кода.

Когда мы переходим в корень нашего сайта с установленной CMS WordPress, то мы видим три папки:

  • wp-admin
  • wp-content
  • wp-includes

Мы не будем работать с папками wp-admin и wp-includes, т.к. это папки ядра WordPress (далее – WP). Никакие изменения в эти папки и файлы внутри мы не вносим.

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

Мы переходим в папку wp-content и внутри мы наконец-то видим те папки с которыми мы можем работать – themes и plugins. Вторая папка содержит установленные в WordPress плагины или, как их еще называют, модули, а вот папка themes – это то, что нам нужно.

Папка themes содержит все темы (шаблоны), которые могут быть использованы на сайте.

Создаем папку темы

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

Для примера создадим новую тему с названием Test. Теперь, если в админке WordPress (административная панель) мы перейдем во вкладку Внешний вид -> Темы, то увидим нашу тему внизу в блоке “Поврежденные темы”.

WP выдаст нам предупреждение – “Таблица стилей не найдена“. Так сделали создатели WordPress, что информация о теме должна содержаться в файле стилей этой темы и он считается основным.

В нашу папку test мы добавляем новый файл style.css.

После этого WP выдаст новое предупреждение о том, что не найден еще один файл index.php.

Создаем в папке test файл index.php. Снова переходим Внешний вид -> Темы и теперь видим, что всё хорошо и WP отображает нашу новую тему среди остальных тем.

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

Это описание WP берет из файла стилей темы – style.css. Я не буду долго описывать процесс заполнения информации о теме, мы для примера возьмем пример из базовой тему движка Twenty Twenty:

/*
Theme Name: Twenty Twenty
Text Domain: twentytwenty
Version: 1.5
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Author: the WordPress team
Author URI: https://wordpress.org/
Theme URI: https://wordpress.org/themes/twentytwenty/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
 with others.
*/

Как видно из примера – нам нужно заполнить ряд полей типа Theme Name, Text Domain и т.д.

Мы копируем данный код и вставляем в файл style.css нашей темы, после чего меняем Ключ -> Значение на свои данные.

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

Далее нам нужно добавить картинку-превью для нашей темы, которая будет видна во вкладке Темы.

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

Картинка должна находиться в папке с нашей темой и называться screenshot.png. Размер превью должен быть 1200 на 900 пикселей.

После этого можно нажать “Активировать” и наша тема станет основной. Перейдя на главную страницу сайта мы увидим белый экран, т.к. в файлах index.php и style.css у нас ничего нет.

Добавим теперь для проверки работы темы в index.php строку:

<h1>Hello World!</h1>
// или <h1>Привет Мир!</h1>

И на главной странице сайта увидим:

На данный момент можно сказать, что мы создали свою первую тему для WordPress. Она не идеальна, но мы можем теперь её начать усложнять в следующих уроках.

2. Импортируем тестовые записи

Мы уже создали папку для темы, сделали описание темы и даже вывели «Hello World».

Теперь мы импортируем тестовые записи и страницы для того, чтобы создавать тему WordPress было удобно и наглядно.

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

Для загрузки тестовых данных мы сперва должны скачать XML-файл с сайта WordPress.org.

1. Переходим на WordPress.org на страницу Theme Unit Test

2. Находим строку:

Or Download a copy from https://raw.githubusercontent.com/WPTT/theme-unit-test/master/themeunittestdata.wordpress.xml

3. Нажимаем на ссылку и скачиваем XML.

Дальше импортируем XML в наш WordPress.

1. Переходим в “Инструменты” (Tools)

2. Переходим в “Импорт” (Import)

3. Выбираем файл и импортируем данные

Иногда WordPress может сообщить о том, что необходимо установить плагин для импорта данных, в таком случае мы просто жмем “Установить сейчас” (Install now) и после уже импортируем все данные из скачанного XML-файла.

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

3. Создаем шапку и футер

Мы создали папку нашей новой темы, создали описание, а кроме того импортировали тестовые данные.

Далее мы создадим шапку (header) и подвал (footer) нашей новой темы для CMS WordPress.

На текущем этапе создания темы у нас в папке два файла – index.php и style.css без которых нашу темы мы не смогли бы активировать. Наличие этих файлов критически важно для CMS WordPress.

Теперь мы начнем создавать из нашей пока статичной темы динамичную. У нас сейчас в index.php выводится только заголовок.

Я буду создавать тему на фреймворке Bootstrap версии 4, одном из самых популярных фреймворков для верстки фронтенда от команды Twitter.com.

Продолжение следует…