Создание новой темы сайта для WordPress

Введение

Тема сайта представляет собой набор различных файлов кода, стилей, разметки и медиа файлов.

Изначально после установки WordPress пользователям доступно несколько предустановленных тем: twentyfifteen, twentyfourteen и twentythirteen. Данные темы предназначены лишь для ознакомления и дают пользователю пример кода, который можно использовать для создания своей собственной темы.

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

Создание первых файлов темы

Каждая новая тема должна располагаться в отдельной директории yoursite.ru/www/wp-content/themes/theme_name.

В каталоге темы обязательно должны быть как минимум два файла: index.php и style.css

Файл index.php нужен для первоначального функционирования сайта и содержать его разметку и код.

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

Файл style.css хранит в себе метаданные темы (название, имя автора и т.п.) и основные стили сайта.

Далее создадим тему с именем travelblog.

Сначала в корне сайта создаем директорию с именем темы.

md /var/www/example.ru/www/wp-content/themes/travelblog

Далее в директории темы создаем файлы index.php и style.css.

touch index.php style.css

В файле index.php укажем простейшую разметку и отображение имеющихся у нас постов.

В файле style.css в самом начале укажем некоторые метаданные о нашей теме. Метаданные необходимо поместить в многострочный комментарий.

Теперь нам нужно добавить превью-изображение для нашей темы. Создайте любое изображение отражающее суть вашей темы и задайте ему имя screenshot. Разместите файл с изображением в корне темы.

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

Теперь когда мы зайдем в админ панели Внешний вид > Темы, то мы увидим превью-изображение и все метаданные нашей темы, здесь же мы можем ее активировать.

Меню выбора тем в WordPress
Меню выбора темы сайта в WordPress

При нажатии на кнопку Информация о теме, можно увидеть все введенные метаданные из файла style.css.

Информация о теме
Информация о теме

После активации темы, на сайте мы сможем увидеть главную страницу index.php.

Отображение сайта после активации созданной темы
Отображение сайта после активации созданной темы