Чтобы создать тему WordPress, вы должны хорошо знать CSS, HTML, Javascript или Jquery и хотя бы понимать основы PHP. Также перед тем, как приступить к изучению материала, вам нужно установить wordpress локально на компьютер или на хостинге.
The Underscores
Да, создание темы WordPress с нуля кажется пугающей задачей, но не волнуйтесь, вы можете использовать underscores-это стартовая тема, на основе которой вы можете создать любую тему WordPress.
Перейдите на сайт http://underscores.me и введите имя вашей темы в текстовое поле, после этого нажмите кнопку Создать (generate).
Через несколько секунд начнется загрузка, и у вас будет готова начальная тема на основе underscores. После загрузки архива темы, распакуйте его в папку темы вашего сайта WordPress wp-content/ themes.
Вот как будет выглядеть структура вашей темы:
Как вы можете видеть на скриншоте, большинство файлов не требуют пояснений, все понятно из названия.
Веб-сайт может быть структурирован со следующими файлами:
- Header (Заголовок)
- Footer (Подвал)
- Content Section (Содержимое)
- Sidebar (Боковая панель)
На рисунке ниже представлена базовая структура веб-сайта с указанными файлами темы. Заголовок управляется файлом header.php, боковая панель — sidebar.php и за нижнюю часть (подвал) отвечает файл footer.php.
Теперь давайте разберемся, какие файлы используются для создания раздела контента сайта 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, вместо него будет загружен индексный файл по умолчанию.
Давайте пересмотрим приведенную выше диаграмму:
Однако, если вы посмотрите в папку темы, вы заметите больше файлов, давайте посмотрим на них.
Комментарии
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 шаг за шагом:
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 вы увидите что-то вроде этого,
Название темы (Theme Name ) — название вашей темы.
Theme URI — обычно здесь публикуют домашнюю страницу темы, но вы можете использовать свой собственный адрес сайта.
Автор (Author) — это вы. Укажите свое имя или псевдоним.
Автор URI-ссылка на вашу домашнюю страницу или сайт.
Описание (Description) — необязательное описание вашей темы. Это будет отображаться в бэкэнде WordPress.
Version-версия вашей темы, например 1.0.
Лицензия, URI лицензии, Теги-эти вещи важны только в том случае, если вы планируете отправить свою тему в каталог тем WordPress.
Теперь все, что нам осталось сделать, это дать «лицо» нашей теме. Откройте каталог тем, в котором вы найдете screenshot.png -файл (test\wp-content\themes\test). Сделайте снимок вашей темы (главная страница верстки) и назовите его screenshot.png. Замените файл screenshot.png скриншотом вашей темы. После выполнения этих шагов вы должны увидеть картинку вашего шаблона:
В следующей части я покажу, как мы можем настроить заголовок и меню WordPress.