Учебное пособие по темам WordPress для начинающих — Часть 1: Введение

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

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

За капотом WordPress определяет, какой шаблон загрузить, основываясь на URL-адресе, по которому вы находитесь. Если ваш WordPress установлен в домене «example.com/wordpress/», вы должны увидеть шаблон главной страницы. Перейдя на «example.com/wordpress/category/news/», вы по умолчанию получите список сообщений, которым присвоена категория «Новости». с помощью шаблона категории.

WordPress следует иерархии того, какой шаблон загружать, а выбор зависит от того, какие шаблоны доступны в вашей теме. Например, «example.com/wordpress/category/news» WordPress сначала будет искать шаблон, специфичный для категории «новости». Если он не был найден, WordPress будет искать шаблон, специфичный для идентификатора категории. Опять же, если это не было найдено, WordPress ищет шаблон общей категории. Если таковой не будет найден, WordPress будет искать еще более общий шаблон для архивов. И так далее.

WordPress Codex, который является сайтом документации WordPress, содержит полезное и обновленное изображение, иллюстрирующее иерархию файлов шаблонов темы; https://codex.wordpress.org/Файл:Template_Hierarchy.png#file

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

Вы читаете изображение, двигаясь слева направо. В зависимости от того, на какой странице вы находитесь, шаблоны очень специфичны, и чем больше вы продвигаетесь к правой стороне, тем более общими становятся шаблоны. Последний запасной вариант — самый правый; index.php, который будет загружен, если другие подходящие шаблоны не будут найдены.

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

Мы начнем с простого! Сегодня мы создадим всего несколько файлов, необходимых для того, чтобы WordPress распознал их как тему, а затем расширим их.

Анатомия темы WordPress

Вам нужно всего два файла, чтобы создать действующую тему WordPress.

На иллюстрации иерархии шаблонов вы заметили самую крайнюю правую; называется index.php? Это окончательный резервный шаблон, если WordPress не сможет найти какой-либо шаблон. Это один из необходимых файлов. Другой файл представляет собой файл таблицы стилей (.css). В нем не обязательно должен быть какой-либо CSS, но он должен содержать блок комментариев, который предоставляет WordPress информацию о вашей теме. Эти две вещи — все, что вам нужно для правильной темы WordPress.

Давайте создадим нашу тему, создав эти два файла!

Создание вашей первой темы

Все темы должны находиться в каждой своей отдельной папке внутри подпапки /wp-content/themes/. Если вы перейдете к этой папке в своем файловом навигаторе, вы, вероятно, уже увидите здесь несколько папок с темами; двадцать девятнадцать, двадцать семнадцать и т. д. Это темы, которые включены в WordPress по умолчанию.

В /wp-content/themes/, создайте новую папку. Назовите его соответствующим образом (строчными буквами, без пробелов, не так, как у любой другой папки). Обычно имя папки представляет собой сокращенную версию имени вашей темы. В этом уроке я назову папку с темой «wptutorial».

Войдите в папку вашей темы и создайте новый пустой файл с именем index.php. Я отредактировал файл и просто добавил случайный текст, чтобы нам было легче увидеть, когда он используется:

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

Откройте style.cssфайл и сразу запустите блок комментариев (/*и закройте его кнопкой */). Внутри этого блока комментариев нам нужно следовать некоторым правилам WordPress в том, как определить нашу тему. Как минимум, нам нужно определить имя нашей темы. Но мы также можем добавить информацию об авторе, домашнюю страницу, номер версии, информацию о лицензии и многое другое. См. документацию WordPress о том, что вы можете добавить.

В этом уроке мы не будем усложнять задачу; мы добавим название темы, и вы напишете свое имя как автора. Вы можете продолжить и использовать любое имя (имена), которое вы хотите, это то, что я ввел в свой style.css:

/* 
Theme Name: A White Pixel Theme 
Author: Alex White 
*/

Сохраните и закройте файл (это руководство больше не будет касаться этого файла), если только вы не хотите писать CSS для своей темы по мере продвижения.

Поздравляем! Теперь вы создали действующую тему WordPress!

Активация вашей темы

Давайте войдем в панель администратора WordPress и перейдем к «Внешний вид> Темы» и посмотрим, сможем ли мы найти там нашу тему.

Нажмите кнопку «Активировать» и перейдите на свой сайт. Вы должны увидеть все, что вы написали index.php!

Этот index.phpшаблон будет использоваться независимо от того, на какой странице вы находитесь. Попробуйте просмотреть один пост, и вы увидите то же самое. Тема должна иметь как минимум 5-10 шаблонов для обработки различного контента. Не волнуйся, мы доберемся.

Круто, у нас есть тема! В следующем уроке мы начнем на нем кодировать и заставим его что-то делать.