Создайте свою собственную тему WordPress

Опубликовано: 2021-12-21

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

Сегодня мы рассмотрим, как вы можете создать свою собственную тему WordPress. Давайте идти!

Зачем создавать собственную тему WordPress?

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

Требования перед созданием темы

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

Также требуются практические знания и понимание CSS, PHP и HTML.

Создать тему

Мы назовем нашу тему «Моя первая тема». Первый шаг — создать необходимые файлы, чтобы тема была видна в админке. Для этого мы создадим файлы style.css и index.php.

Мы создаем подпапку для нашей темы в папке wp-content/themes/, которую мы называем «my-first-theme», и добавляем эти 2 файла в эту папку.

На этом этапе тема должна быть видна как выбор в области администратора.

Если какой-либо из этих файлов отсутствует, вы получите сообщение о том, что тема не работает. Например, если index.php отсутствует, вы увидите что-то вроде этого:

В файл style.css мы добавим несколько комментариев, которые расскажут WordPress о нашей теме. Самая важная информация — это имя, под которым она будет указана. Помимо этого, вы можете указать, кто является автором, или указать URI автора, чтобы пользователи могли посетить веб-сайт, чтобы узнать больше о вашей теме. Дайте описание, которое будет отображаться в модальном всплывающем окне темы администратора, и версию установки.

 /* Theme Name: My First Theme Author: Dev Loper Author URI: https://my-first-theme.com Description: This is my theme's description Version: 1.0 */

ПРИМЕЧАНИЕ. Вы также можете определить свою лицензию. Если вы хотите, чтобы ваша тема распространялась на WordPress, она должна быть совместима с GPL.

Если вам нужно отобразить изображение логотипа, вставьте файл screenshot.png в то же место, где расположены файлы style.css и index.php.

Теперь, если вы активируете свою тему на экране администратора тем, вы должны увидеть что-то вроде этого:

И если вы нажмете «Сведения о теме», вы должны увидеть это:

Файлы темы

Теперь пришло время написать код в файле index.php. В качестве теста откройте файл в своем любимом редакторе и вставьте любой элемент HTML, например

 <h1>My First Theme's Content</h1>

Сохраните файл и посетите интерфейс. Вы должны видеть только заголовок «Контент моей первой темы».

На этом этапе вы должны решить, какой макет будет у вашей темы.

Макет темы

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

В двух словах, WordPress предоставляет способ вызова различных файлов php в зависимости от типа контента. Это достигается с помощью запросов. Запрос проверяет, есть ли на просматриваемой в данный момент странице сообщения, является ли она страницей результатов поиска или каким-либо другим видом контента, и выводит соответствующий код.

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

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

Этот код, используя встроенные функции WordPress wp_head() и wp_footer(), обеспечивает макет содержимого по умолчанию, который включает в себя заголовок с логотипом, заголовком и меню, основную часть, где запросы будут отображать правильный контент, и нижний колонтитул, содержащий информацию о сайте.

Если мы хотим разделить этот код и использовать отдельные файлы header.php и footer.php, вам следует создать файлы в папке темы.

И разделите код следующим образом:

Индекс.php

 <?php get_header(); ?> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <?php get_footer();

Заголовок.php

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header>

Нижний колонтитул.php

 <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

Вот и все! Вы создали свою первую тему!

Начальные темы

Выше мы рассмотрели, как создать тему вручную… какие файлы должны быть созданы и какой код вы можете включить. Если вы уже знакомы с этим, вы можете сэкономить время, загрузив стартовую тему WordPress за считанные секунды. Попробуйте, например, Underscore, где вы можете просто указать имя и сразу загрузить zip-файл темы.

Потрясающе, правда?

Вывод

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