Руководство по разработке тем для WordPress: Создание вашего сайта с нуля

Подготовка и настройка окружения

Прежде чем начать писать код, вам понадобится подходящая среда для разработки. К ней относятся локальная серверная среда (например, XAMPP, MAMP или Local by Flywheel) и кодовый редактор (например, VS Code, Sublime Text или PHPStorm). Локальная серверная среда позволяет имитировать работу онлайн-сервера, что обеспечивает возможность безопасной разработки и тестирования вашего проекта на собственном компьютере, без необходимости каждый раз загружать изменения на веб-сервер.

Ключевые файлы являются основой любой темы для WordPress. Основная тема должна включать по меньшей мере два файла:style.css и index.phpСреди них,style.css Это не просто таблица стилей (stylesheet); её более важная функция заключается в том, чтобы служить “заголовком информации” (information header) вашего тематического дизайна, который используется для сообщения системе WordPress о характеристиках вашего тематического пакета. В этом файле вам необходимо использовать специальные блоки комментариев для определения таких метаданных, как название темы, автор, описание, версия и другая важная информация.

Кроме того, хотя это и не обязательно, настоятельно рекомендуется создать…functions.php Файл. Этот файл относится к вашей теме “Функциональный усилитель” (Function Enhancer) и предназначен для добавления пользовательских функций, регистрации меню, боковых панелей, а также для включения других скриптов и файлов с стилями. С его помощью вы можете расширить возможности темы без необходимости изменения основных файлов.

Рекомендуемое чтение Руководство по разработке тем для WordPress: Создание вашей первой пользовательской темы с нуля。

В современном разработческом процессе тем для WordPress также рекомендуется использовать дочерние темы (Child Themes). Это безопасный способ настроек и добавления новых функций темы без прямого изменения исходных файлов основной темы. При обновлении основной темы ваши собственные настройки (хранящиеся в дочерней теме) сохранятся. Для создания дочерней темы также необходимы два основных файла, упомянутых ранее…style.css В заголовках стилей (style headers) используется следующий формат:Template:Фильтр (field) объявляет свою родительскую тему (parent topic).

Ультахост (UltaHost) – хостинг-провайдер, предоставляющий услуги хостинга для сайтов, построенных на платформе WordPress.

Гарантия возврата средств в течение 30 дней, неограниченная пропускная способность интернет-канала и объем баз данных, бесплатная защита от DDoS-атак. При покупке на срок 3 лет предоставляется скидка в размере 501 ТБ до 4 ТБ.

страница доступа

Основной шаблонный файл для создания темы

WordPress использует систему иерархии шаблонов (Template Hierarchy), чтобы определить, какой PHP-шаблон следует использовать для отображения содержимого при запросе к конкретной странице. Понимание этих правил является ключевым моментом при разработке тем (templates).

Статьи и шаблоны отображения страниц

Самая простая шаблонная структура представляет собой…single.phpиpage.phpОни используются для контроля отображения отдельных статей в блоге и отдельных страниц. В этих шаблонах вы будете использовать ряд встроенных функций WordPress для циклической выдачи контента. Самая важная структура цикла обычно выглядит следующим образом:

<h1></h1>
    <div class="entry-content">
        
    </div>

Этот код проверяет наличие статей, затем входит в цикл и последовательно выводит их заголовки и содержимое. Функция называется… (название функции не указано в исходном тексте).the_title()иthe_content()Используется для вывода соответствующих данных.

Шаблоны для списка статей и архива

Когда пользователи заходят на главную страницу блога, страницу категорий или страницу архива авторов, WordPress использует шаблоны для отображения списков. Самыми распространенными такими шаблонами являются…index.php(В качестве последнего, альтернативного варианта…) иarchive.phpВ шаблоне списка цикл обходит несколько статей; обычно для этого используется специальный код.the_excerpt()Вы хотите получить резюме статьи, а не её полный текст.

Рекомендуемое чтение Пошаговое освоение разработки тем для WordPress: создание собственных тем с нуля。

// В цикле выводятся элементы списка статей
<article>
    <h2><a href="/ru/</?php the_permalink(); ?>"></a></h2>
    
</article>

the_permalink()Функция предназначена для получения постоянной ссылки (перманентного URL) на текущую статью.

Общие составляющие темы (общие элементы, входящие в любую тему)

Для повышения уровня повторного использования и сопровождаемости кода необходимо разделить общие элементы страниц на отдельные шаблонные файлы. Это позволяет:get_header(), get_footer(), get_sidebar()иget_template_part()Эти функции реализуются с использованием соответствующих алгоритмов и программных средств.

Например, ваш…header.phpФайл содержит заголовочную часть HTML-документа.Регионы, а также верхний навигационный меню сайта.single.phpВ этом случае вам достаточно выполнить вызов в начале кода.get_header()В этом случае WordPress автоматически включит необходимые компоненты/функции.header.php的内容。

hosting.com Общий хостинг

Высокая производительность благодаря процессорам AMD EPYC, SSD-накопителям NVMe и LiteSpeed, круглосуточная экспертная поддержка, передовые меры безопасности, включая SSL, защиту от грубой силы, вредоносных программ и DDoS, экономия до 73%

страница доступа

Аналогично, для блоков кода, которые используются повторно в нескольких местах (например, в метаданных статей), их можно сохранить в отдельном файле или базе данных.content.phpилиtemplate-parts/content.phpЗатем используйте это в основном шаблоне.get_template_part('template-parts/content', get_post_format());Вызовите его. Второй параметр позволяет загружать различные варианты файлов в зависимости от формата статьи (например, галереи, цитаты)content-gallery.php）。

Использование файлов с функциями для улучшения функционала темы

functions.php Файл является своего рода “центром управления” темой; в него следует помещать весь функциональный код, который не относится к прямому выводу HTML-контента. Этот код автоматически загружается WordPress при инициализации темы.

Регистрация функций и меню темы

Одной из основных и необходимых операций является использование…add_theme_support() Функции предназначены для указания того, какие функции WordPress ваша тема поддерживает. Например, включение возможности использования специальных изображений для статей, настройки пользовательских меню и поддержки HTML5-тегов является стандартной практикой.

Рекомендуемое чтение Основная архитектура и принципы работы WordPress。

function my_theme_setup() {
    // 添加文章和页面特色图片支持
    add_theme_support('post-thumbnails');
    // 为导航菜单功能添加支持
    add_theme_support('menus');
    // 为评论列表、搜索表单等添加HTML5标记支持
    add_theme_support('html5', array('comment-list', 'search-form'));
}
add_action('after_setup_theme', 'my_theme_setup');

Затем вы можете использовать…register_nav_menus() Функция предназначена для определения мест размещения элементов навигации в теме, таких как “верхняя главная навигация” и “нижняя навигация”.

Введение таблиц стилей (CSS) и JavaScript

Правильная инквенировка (вставка в очередь) файлов CSS и JavaScript является важным аспектом профессионального разработчика. Это обеспечивает соблюдение зависимостей между элементами кода и предотвращает конфликты между скриптами. Ни в коем случае не следует использовать эти файлы непосредственно в темплатных файлах.илиТеги используются для включения ресурсов (например, изображений, файлов кода и т. д.) в документ.

Общий хостинг InterServer

Общий хостинг $2.50 USD в месяц, первый месяц $0.1 USD промо-код tryinterserver, 461 скрипт облачных приложений, установка в один клик.

страница доступа

function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style('my-theme-style', get_stylesheet_uri());
    // 引入自定义JavaScript文件，依赖于jQuery
    wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

Крюкwp_enqueue_scripts Используется для загрузки скриптов и стилей на переднем фронте веб-сайта.get_stylesheet_uri()иget_template_directory_uri() Функция поможет вам получить правильный URL к каталогу тем.

Создать область виджетов

Разделы для вставки виджетов (Widget Areas), расположенные в боковой панели или в нижней части страницы, позволяют пользователям настраивать содержимое с помощью интерфейса типа «перетаскивания элементов в режиме разработки».register_sidebar() Функция позволяет создать новую область для размещения инструментов (маленьких приложений или утилит).

function my_theme_widgets_init() {
    register_sidebar(array(
        'name'          => '主侧边栏',
        'id'            => 'sidebar-1',
        'description'   => '此区域的小工具将显示在文章和页面侧边。',
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>'перед заголовком '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ));
}
add_action('widgets_init', 'my_theme_widgets_init');

После регистрации вам потребуется внести изменения в файл шаблона (например,sidebar.phpИспользуйте его в своём резюме.dynamic_sidebar('sidebar-1');Функция предназначена для вывода информации из этой области.

Разработка реактивного дизайна и написание стилей (Responsive design and style development)

Современные веб-сайты должны хорошо отображаться на различных устройствах. Для этого темы сайтов должны быть реагирующими (responsive). Реализация реагирующего дизайна в основном осуществляется с помощью CSS-запросов к медиа (Media Queries) и гибкого (fluid) расположения элементов интерфейса.

Стратегия стилизации, ориентированная на мобильные устройства

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

/* 基础样式（针对移动设备） */
.container {
    width: 100%;
    padding: 0 15px;
}
.article {
    font-size: 16px;
    line-height: 1.6;
}

/* 针对平板及以上设备 */
@media (min-width: 768px) {
    .container {
        max-width: 750px;
        margin: 0 auto;
    }
}

/* 针对桌面设备 */
@media (min-width: 992px) {
    .container {
        max-width: 970px;
    }
    .article {
        font-size: 18px;
    }
}

Эта стратегия обеспечивает доступ к основному контенту на всех устройствах и постепенно улучшает пользовательский опыт на устройствах с более большими экранами.

Гибкое обращение с изображениями и медиафайлами

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

img,
iframe,
video {
    max-width: 100%;
    height: auto;
}

Это правило CSS обеспечивает, что ширина элемента, отображающего медиафайлы, не превышает ширины его родительского контейнера, а высота автоматически подстраивается в соответствии с пропорциями, что предотвращает нарушение целостности макета.

Использование вспомогательных классов и функций WordPress

Сам WordPress генерирует множество полезных CSS-классов, которые вы можете использовать для более точного управления стилями. Например,На метках будут добавлены классы, обозначающие типы страниц или статей (например,…).page, .single-post), а также классы, связанные с идентификаторами статей (например,.postid-123В цикле, который обходит список статей…post_class()Функция генерирует список классов для каждого контейнера статьи (например, классы, определяющие формат статьи, её категорию и т. д.), что значительно облегчает процесс детализированного стилизования элементов интерфейса.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <!-- 文章内容 -->
</article>

В таблице стилей вы можете задать положение элемента следующим образом:

/* 为所有文章添加通用样式 */
article {
    margin-bottom: 2em;
}
/* 仅为“引语”格式的文章添加特殊样式 */
.format-quote {
    background-color: #f9f9f9;
    border-left: 4px solid #ccc;
    padding-left: 1em;
}

резюме

Разработка тем для WordPress – это процесс сочетания творчества, переднего (фронтенд) программирования (HTML, CSS, JavaScript) и заднего (бэкенд) программирования (PHP). Начиная с создания базовой структуры темы…style.cssиindex.phpНачните с основной папки проекта и постепенно изучайте принципы работы системы уровней шаблонов. Разбейте страницы на повторно используемые компоненты-шаблоны. Это является ключевым аспектом разработки.functions.phpФайлы являются основой для расширения функционала вашей темы, регистрации меню и использования скриптов. Кроме того, благодаря реагирующему (адаптивному) дизайну на основе CSS ваша тема обеспечивает отличный пользовательский опыт на устройствах всех типов – от мобильных телефонов до настольных компьютеров. Соблюдение распространенных практик (например, использование подтем для внесения изменений, правильная организация скриптов и стилей) сделает вашу тему более профессиональной, безопасной и удобной в обслуживании.

Часто задаваемые вопросы

Можно ли разрабатывать темы для WordPress, если у вас нет базовых знаний PHP?

Хотя теоретически можно изменить внешний вид существующей темы, лишь модифицировав HTML и CSS, для создания полнофункциональной темы, соответствующей стандартам WordPress, знания PHP являются обязательными. Вам потребуется понимание основной синтаксиса PHP, способа вызова функций, а также специфических для WordPress тегов шаблонов и системы хуков (Hooks). Рекомендуется сначала изучить основы PHP и базовые теги шаблонов WordPress.

Как опубликовать созданный продукт (например, приложение, сайт или другой ресурс) для использования другими пользователями после его разработки?

Прежде чем публиковать тему в официальном каталоге тем WordPress или продавать ее коммерчески, необходимо провести тщательные тесты и убедиться, что она соответствует стандартам кодирования, изложенным в Руководстве по разработке тем для WordPress. К этому относится проверка кода на наличие уязвимостей, обеспечение полной реагированности темы на разные устройства (респонсивности), а также подготовка темы к международному использованию (и18н-поддержке) с применением соответствующих функций для перевода.__()и_e()Затем удалите весь отладочный код. После этого вы можете выбрать вариант: отправить результаты работы в официальный каталог или распространять их через свой собственный сайт.

Какова связь между обновлениями подтем и родительских тем?

Существование подтем предназначено для безопасного изменения основной темы (патерна). При использовании подтем ваши настройки стилей и функционала сохраняются в файлах соответствующей подтемы. Когда основная тема обновляется, достаточно выполнить обновление, как и для любой другой темы; файлы подтемы остаются неизменными, и все пользовательские настройки сохраняются. Это лучшая практика для обновления основных функций темы без потери индивидуального дизайна, заданного подтемой.

Как добавить страницу с пользовательскими настройками к моему тематическому дизайну (теме)?

Для добавления пользовательских настроек к продвинутым функциям темы обычно используется API настроек (Settings API) WordPress или интеграция с популярными фреймворками для управления настройками (например, Redux, Kirki или библиотекой Carbon Fields). API настроек представляет собой набор стандартизированных интерфейсов, предоставляемых самим WordPress для безопасного создания, проверки и сохранения пользовательских параметров. Для новичков использование готовых фреймворков позволяет быстрее создать пользовательский интерфейс для настроек, однако это может увеличить сложность темы и размер ее файлов.