Создание темы для WordPress. Первые шаги.

Также вы можете не читать этот длиннющий урок, а сразу же перейти к моему видеоуроку по созданию темы WordPress 🚀

Конечно, перед тем, как создать тему для WordPress, вы можете попробовать разобраться в уже готовых (именно так делал я). Но дело в том, что в них иногда столько всего понапихано, что это не всегда бывает легко.

Основа любой темы — файлы style.css и index.php

Для начала создайте какую-нибудь папку в /wp-content/themes — это и будет ваша будущая тема, я например создал misha123. Каждая тема должна содержать по крайней мере 2 файла — это index.php и style.css — создаём их внутри этой папки.

Если вы забили на style.css, то в админке во Внешний вид > Темы ожидайте такой ошибки:

Отсутствует файл стилей темы WordPress

Если вы забили на index.php:

Отсутствует index.php главный шаблон темы вордпресс

Тут WordPress ещё что-то болтает про дочерние темы, не обращайте внимания, вам про них ещё рано читать.

До тех пор, пока мы ещё не изучили другие файлы шаблона, index.php у нас будет отвечать за вывод любой страницы сайта, а style.css, понятное дело, содержать стили (хоть это и не обязательно), но главное, чтобы в файле style.css вы добавили метаданные и описание темы.

/*
Theme Name: Тема для Миши
Version: 105.1
Description: Вполне себе годная темка, получше некоторых
Author: Миша Рудрастых
Author URI: https://misha.blog
*/
body{color:#555;} /* это типо я показываю, что дальше идут уже ваши CSS стили */
Theme Name
Название темы, я прав?
Version
Текущая версия вашей темы
Description
Не знаю, что значит этот параметр
Author
Тут можете указать себя и тех людей, которые вам помогали
Author URI
URL на сайт автора, позволит превратить имя автора в ссылку в админке WordPress
License
Если вы создаёте под WordPress, рекомендую почитать немного про лицензию GPL
License URI
А в этом параметре указывается ссылка на страницу с лицензией
Text Domain
Что-то, связанное с переводом темы на другие языки, полагаю сейчас нам это не понадобится, но позже рекомендую почитать про правильную локализацию.
Tags
Если эта тема станет вашим будущим сайтом или сайтом вашего клиента, наиболее вероятно вам можно скипнуть этот параметр, если же вы будете в дальнейшем публиковать свою тему в официальном репозитории WordPress, тогда уделите ему особое внимание. Нет, сюда не нужно закидывать всё, что в голову придёт, со списком поддерживаемых тегов можно ознакомиться на официальном сайте.

На самом деле ни один из этих параметров не обязателен! И так всё прокатит. Например как тут:

Тема без информации в WordPress

Не исключаю, что кого-то такой вариант устроит, но только не меня, сейчас я просто скопирую предыдущий код в начало style.css темы и вот что у меня получится:

Новая тема для WordPress

Установка изображения темы

Согласитесь, на фоне других тем наша выглядит довольно уныло из-за отсутствия изображения! Ещё и квадратики мерцают при скролле 😭

Как установить изображение темы

Для того, чтобы это исправить, мы просто создаём файл screenshot.png и отправляем его прямиком в папку с темой (рекомендуемое разрешение 1200px на 900px).

Что касается расширения файла, то сгодится и jpg и gif, и jpeg, но в официальном Кодексе WP рекомендуется всё же использовать screenshot.png.

Вот, другое дело:

screenshot.jpg в качестве изображения темы

В этом примере я специально взял квадратную картинку в jpg-формате и она вполне годно отображается на странице со всеми темами, но если вы откроете информацию о теме в попап-окне, то будет печаль. Картинка растянется и будет некачественно.

Хоть и не обязательный, но по факту главный файл темы — functions.php

Трудно представить тему для WordPress, в которой отсутствует файл functions.php, он используется для включения каких-либо функций темы, например регистрации сайдбаров, также он сам может содержать какой-то дополнительный функционал, ну либо файлы, подключенные в него через include() / require().

Ах да, я не упомянул? В этом уроке я предполагаю, что у вас есть базовые знания PHP, если нет, то идём читать это.

На данный момент я рекомендую просто создать файл functions.php и попробовать поиграться с хуками, например вы можете найти какой-нибудь готовый кусочек кода в этой рубрике, вставить его в файл и посмотреть, что получится.

Главное правило по functions.php — сам по себе файл не должен ничего выводить! 💀 То есть никогда! 👿

 
<?php

И никогда! 👿

?>
 
  <?php

Это самый распространённый косяк.

Теперь напишем что-нибудь в файле index.php

<!DOCTYPE html>
<html><head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>" />
</head>
<body>
	Привет мир!
</body></html>

Как видите, я просто указал кодировку, вставил таблицу стилей, хоть и не совсем правильно при помощи get_stylesheet_uri() и написал в теле документа «Привет мир!»

Динамическим сайтом это не назовёшь, но надо же с чего-то начинать. Как я уже говорил, на данном этапе этот файл будет открываться на всех страницах вашего сайта.

И ещё кое-что, для того, чтобы помочь WordPress взаимодействовать с вашей темой, вы должны добавить перед закрывающимся тегом </head> функцию wp_head(), а перед закрывающимся тегом </body> функцию wp_footer(), выглядеть это будет примерно так:

<!DOCTYPE html>
<html><head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>" />
	<?php wp_head() ?>
</head>
<body>
	Привет мир!
<?php wp_footer() ?></body>
</html>

Когда я создаю какую-то тему, самая приятная часть для меня — это разделить вёрстку условно на шапку сайта, подвал и всё остальное, после этого код шапки отправляется в файл header.php и в дальнейшем подключается функцией get_header(), код подвала сайта отправляется в файл footer.php и в дальнейшем подключается функцией get_footer(). Приступим.

header.php

В хедер стараемся включить то, что повторяется на всех страницах сайта, ну или почти на всех.

<!DOCTYPE html>
<html><head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>" />
	<?php wp_head() ?>
</head>
<body>

Чаще всего в header.php также попадает основная навигация сайта, меню.

footer.php

C футером ситуация полностью аналогичная, отправляем то, что повторяется на страницах сайта и заканчиваем закрывающим </html> тегом.

<?php wp_footer() ?></body>
</html>

В итоге наш index.php стал выглядеть вот так:

<?php get_header(); // вставка header.php ?>
Привет мир!
<?php get_footer(); // footer.php ?>

Миша

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

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Комментарии — 5

  • Дмитрий 6 февраля 2020 #

    Спасибо, очень классно написано!!! Без воды и т.п. чепухи, которая бесит... все четко и по делу.

    • Миша 7 февраля 2020 #

      Спасибо!
      Сам очень не люблю, когда "льют воду" 👿

  • Андрюха 3 марта 2020 #

    Статья супер. Всё кратко и понятно, без лишней информации для начинающих

  • рома 23 марта 2020 #

    Не совсем понял, это законченная статья? Или где то есть продолжение?

Оставить комментарий

Если вы хотите добавить код, не забудьте обернуть его в <pre lang="php"></pre>, если же код – меньше одной строчки, то можно и в <code></code>.