Чтобы создать тему WordPress, вы должны хорошо знать CSS, HTML, Javascript или Jquery и хотя бы понимать основы PHP. Также перед тем, как приступить к изучению материала, вам нужно установить wordpress локально на компьютер или на хостинге.

The Underscores

Да, создание темы WordPress с нуля кажется пугающей задачей, но не волнуйтесь, вы можете использовать underscores-это стартовая тема, на основе которой вы можете создать любую тему WordPress.
Перейдите на сайт http://underscores.me и введите имя вашей темы в текстовое поле, после этого нажмите кнопку Создать (generate).

Через несколько секунд начнется загрузка, и у вас будет готова начальная тема на основе underscores. После загрузки архива  темы, распакуйте его в папку темы вашего сайта WordPress  wp-content/ themes.

Вот как будет выглядеть структура вашей темы:

Как создать тему wordpress

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

Веб-сайт может быть структурирован со следующими файлами:

  • Header (Заголовок)
  • Footer (Подвал)
  • Content Section (Содержимое)
  • Sidebar (Боковая панель)

На рисунке ниже представлена базовая структура веб-сайта с указанными файлами темы. Заголовок управляется файлом header.php, боковая панель – sidebar.php и за нижнюю часть (подвал) отвечает файл footer.php.

создание темы WordPress

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

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

WordPress Посты

Для записей WordPress использует файл single.php. Однако в теме underscore этот файл включает в себя другой файл в каталоге template-parts  с именем template-parts/content, который отображает содержимое одной записи. Таким образом, если сообщение WordPress загружено, эти 2 файла отвечают за создание содержимого раздела контента.

Страницы WordPress

Если страница WordPress загружена, загружается файл page.php (если доступен), и этот файл также включает в себя другой файл в каталоге template-parts под названием  template-parts/content – page, который отображает содержимое страницы.

Архивы, Результаты поиска и страница ошибок

Помимо записей и страниц есть и другие типы страниц WordPress, давайте посмотрим на них как на список с классификацией файлов:

  • Архив страниц, файлов (archive.php, content.php )
  • Category Archive Pages
  • Tag Archive Pages
  • Date Archive Pages
  • Author Archive Pages
  • Страница результатов поиска, файлы (search.php, content-search.php)
  • Страница Ошибок (404.php)

Файл по умолчанию

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

Давайте пересмотрим приведенную выше диаграмму:

создание темы WordPress

Однако, если вы посмотрите в папку темы, вы заметите больше файлов, давайте посмотрим на них.

Комментарии

comments.php  отвечает за отображение комментариев WordPress.

Functions

Это очень важный файл. Он используется для настройки функциональности темы.  Готовая тема уже включает в себя много полезных и необходимых функций в functions.php, например:

  • Сделать тему доступной для перевода.
  • Первичная регистрация меню.
  • Пользовательская фоновая функция.
  • Регистрация областей виджетов.
  • Погрузка скриптов и стилей.
  • Пользовательская функция заголовка.

Файл Стилей

Существует также файл таблиц стилей в теме WordPress. Он поставляется с файлом style.css, который содержит базовый css, чтобы дать вам основу для дальнейшего оформления вашей темы / веб-сайта.

Файл Скриншота

Есть также файл под названием screenshot.png, который является файлом изображения и используется на обозначения вашей темы в разделе Внешний вид.

Тема включает в себя еще несколько файлов и папок – inc, js, languages, layouts.

template-parts – этот каталог, который я упоминала выше, он содержит некоторые файлы PHP для раздела контента:

    • content.php
    • content-none.php
    • content-page.php
    • content-search.php

Как создать тему wordpress

Эта шпаргалка поможет быстрее запомнить важную информацию.

Оформление темы

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

Как создать тему wordpress

Нажав на кнопку информация о теме вы увидите примерно следующее:

Как создать тему wordpress

Активируйте свою тему и посетите домашнюю страницу своего сайта WordPress. Вы увидите сломанный сайт без стиля.

Как создать тему wordpress

Теперь мы будем применять стили и настраивать эту тему шаг за шагом.

Инструменты, необходимые при создании отзывчивой темы WordPress шаг за шагом:

1. Данные

Прежде чем применять какие-либо настройки к этой теме, вам нужно создать свой шаблон сайта с помощью HTML + CSS и, возможно JS.

В интернете есть множество бесплатных шаблонов, которые можно скачать и использовать в качестве тренировки.

2. Ошибки

При создании собственной темы вы также должны получать уведомления, когда что-то идет не так, для этого  нужно установить плагин, вы можете напрямую установить его из каталога плагинов WordPress, например плагин Query Monitor.

Также, чтобы получать сообщения об ошибке в режиме реального времени нужно открыть файл wp-config.php, найти запись define(‘WP_DEBUG’, false)  – заменить false на true

define(‘WP_DEBUG’, true);

Еще вам понадобится любой текстовый редактор, например Sublime Text Editor, VSC или Notepad++.

Назвать тему

Перейдите в папку каталога тем и откройте style.css, здесь вы можете установить имя вашей темы, URI, автора, описание и теги. Когда вы откроете style.css вы увидите что-то вроде этого,

Как создать тему wordpress

Название темы (Theme Name ) — название вашей темы.

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

Автор (Author) — это вы. Укажите свое имя или псевдоним.

Автор URI-ссылка на вашу домашнюю страницу или сайт.

Описание (Description) — необязательное описание вашей темы. Это будет отображаться в бэкэнде WordPress.

Version-версия вашей темы, например 1.0.

Лицензия, URI лицензии, Теги-эти вещи важны только в том случае, если вы планируете отправить свою тему в каталог тем WordPress.

Theme Name: test
Theme URI: https://www.lenakso.top
Author: Elena Babakina
Author URI: https://www.lenakso.top
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: test
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

Теперь все, что нам осталось сделать, это дать «лицо» нашей теме. Откройте каталог тем, в котором вы найдете screenshot.png -файл (test\wp-content\themes\test). Сделайте снимок вашей темы (главная страница верстки) и назовите его screenshot.png. Замените файл screenshot.png скриншотом вашей темы. После выполнения этих шагов вы должны увидеть картинку вашего шаблона:

Как создать тему wordpress

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