Первая тема WordPress

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Архитектору

Первая тема WordPress

Тема определяет, как выглядит сайт. Дочерняя тема наследует родителя (Twenty Twenty-Four): ваш код в ituniverse-child переживает обновления родителя.

Обзор: WordPress. Локальный сервер: Локальная среда разработки на PHP.

Термины

Термин	Значение
Родительская тема	`wp-content/themes/twentytwentyfour`
Дочерняя тема	`Template: twentytwentyfour` в `style.css`
Цикл WordPress	`while (have_posts())` — перебор записей
Хук	`add_action`, `add_filter`
Шорткод	`[hello]` в тексте записи

Локальная установка

Local WP, DDEV, Docker;
хостинг: https://site/wp-admin/install.php.

Внешний вид → Темы — активируйте Twenty Twenty-Four, затем дочернюю тему после создания файлов.

Структура дочерней темы

wp-content/themes/ituniverse-child/:

ituniverse-child/
  style.css
  functions.php
  index.php

Разбор:

Показана минимальная файловая структура дочерней темы WordPress.
style.css хранит метаданные темы и пользовательские стили.
functions.php подключает ассеты и регистрирует функциональные возможности темы.
index.php служит базовым шаблоном вывода контента.
Этого набора достаточно, чтобы активировать тему и получить управляемый старт.

style.css

/*
Theme Name: IT Universe Child
Template: twentytwentyfour
Version: 1.0.0
Description: Учебная дочерняя тема
*/

.site-title a {
  color: #2563eb;
}

Разбор:

Комментарий в начале файла содержит обязательные метаданные темы для WordPress.
Theme Name — имя, которое отображается в админке при выборе темы.
Template: twentytwentyfour связывает дочернюю тему с родительской по имени каталога.
Version помогает отслеживать релизы темы и кэширование ресурсов.
CSS-правило .site-title a { color: #2563eb; } меняет цвет ссылки заголовка сайта.
Изменения в style.css применяются без правок ядра и безопасны при обновлениях WordPress.

Template — точное имя папки родителя.

functions.php

Код ITЗагрузка примера кода…

Разбор:

add_action('wp_enqueue_scripts', ...) добавляет callback в этап подключения CSS/JS на фронтенде.
$parent = 'twentytwentyfour-style'; задаёт handle родительского стиля, чтобы корректно выставить зависимость.
wp_enqueue_style($parent, get_template_directory_uri() . '/style.css'); подключает основной CSS родителя.
wp_enqueue_style('ituniverse-child', get_stylesheet_uri(), [$parent], ...) подключает CSS дочерней темы после родительского.
wp_get_theme()->get('Version') используется как версия ассета для управляемого cache busting.
add_action('after_setup_theme', ...) запускается после инициализации темы.
add_theme_support('title-tag') передаёт управление <title> ядру WordPress.
add_theme_support('post-thumbnails') включает поддержку миниатюр записей.

Вызов	Смысл
`get_template_directory_uri()`	URL родительской темы
`get_stylesheet_uri()`	URL дочерней `style.css`
`[$parent]`	Дочерний CSS после родительского

index.php и цикл

Код ITЗагрузка примера кода…

Разбор:

get_header() и get_footer() подключают общие шаблонные части страницы.
<h1><?php bloginfo('name'); ?></h1> выводит название сайта из настроек WordPress.
<p><?php bloginfo('description'); ?></p> выводит подзаголовок сайта.
if (have_posts()) проверяет, есть ли записи в текущем запросе.
while (have_posts()) : the_post(); запускает цикл WordPress и подготавливает каждую запись как текущую.
post_class() печатает CSS-классы статьи в зависимости от типа контента и состояния.
the_permalink(), the_title(), the_excerpt() выводят URL, заголовок и краткий анонс текущей записи.
Блок else показывает fallback-сообщение, если контент по запросу отсутствует.

have_posts() — есть записи для страницы.
the_post() — следующая запись.
the_title(), the_permalink(), the_excerpt() — данные текущей записи.

Внешний вид → Темы → IT Universe Child → Активировать.

Хук в подвале

add_action('wp_footer', function () {
    echo '<p style="text-align:center">Учебная тема · ' . esc_html(date('Y')) . '</p>';
});

Разбор:

add_action('wp_footer', ...) добавляет вывод в область перед закрывающим тегом </body>.
echo ... печатает HTML-фрагмент с подписью внизу страницы.
date('Y') возвращает текущий год на сервере.
esc_html(...) экранирует вставляемое значение и защищает вывод от некорректных символов.
Приём удобен для простых динамических меток, счётчиков и служебной информации в футере.

Плагин и шорткод

wp-content/plugins/ituniverse-hello/ituniverse-hello.php:

<?php
/**
 * Plugin Name: IT Universe Hello
 * Version: 1.0.0
 */

add_shortcode('hello', function ($atts) {
    $name = isset($atts['name']) ? sanitize_text_field($atts['name']) : 'мир';
    return '<p>Привет, ' . esc_html($name) . '!</p>';
});

Разбор:

Блок комментария Plugin Name и Version сообщает WordPress, что файл является плагином.
add_shortcode('hello', ...) регистрирует шорткод [hello] для использования в контенте.
Аргумент $atts содержит параметры шорткода из записи.
isset($atts['name']) проверяет, передано ли имя пользователем.
sanitize_text_field($atts['name']) очищает входное значение от небезопасных символов.
Значение по умолчанию 'мир' используется, если атрибут name не указан.
esc_html($name) экранирует имя перед вставкой в HTML-ответ.
Возврат строки '<p>Привет, ...</p>' формирует финальный HTML, который WordPress подставляет в место шорткода.

В записи: [hello name="WordPress"].

Отладка

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

Разбор:

WP_DEBUG включает режим разработки и подробную диагностику PHP-предупреждений/ошибок.
WP_DEBUG_LOG записывает ошибки в файл wp-content/debug.log.
WP_DEBUG_DISPLAY при false скрывает ошибки из публичного HTML-ответа.
Такая комбинация безопаснее для production-подобных стендов: данные об ошибках остаются в логах.
Константы обычно задаются в wp-config.php и управляют режимом отладки на уровне ядра.

Лог: wp-content/debug.log.

Частые ошибки

Симптом	Причина
Тема не в списке	Неверный `Template:`
Белый экран	Синтаксис в `functions.php`
404	Постоянные ссылки — сохранить

Дальше

theme.json, CPT;
PHPUnit для плагинов;
Laravel.

Практика верстки в дочерней теме

После базового index.php удобно сразу перейти к контролируемой структуре шаблонов.

Следующий набор файлов

header.php и footer.php для повторяющихся блоков.
single.php для страницы записи.
page.php для статичных страниц.
archive.php для списков категорий и дат.

Разделение шаблонов делает тему масштабируемой и упрощает поддержку.

Подготовка темы к командной работе

Подключите линтер PHP (phpcs) и форматтер.
Храните тему в Git, деплойте только версионированные изменения.
Выносите прикладную логику в плагин, чтобы тема отвечала за представление.
Добавьте smoke-проверку главной страницы после деплоя.

Связанные статьи: WordPress, PHPUnit, Composer, Сервер для PHP.

Первая тема WordPress