Начиная с нуля: Полное руководство по разработке тем для WordPress и советы по лучшим практикам

Подготовка среды разработки и изучение структуры темы

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

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

Анализ основных файлов и каталогов

Находящийся в корневом каталоге темы… style.css Файл не является просто таблицей стилей (stylesheet); он также представляет собой своего рода “идентификационный документ” темы. Блок комментариев в заголовке файла содержит всю метаинформацию о теме: название темы, автора, описание, версию и т. д. Именно с помощью этой информации WordPress определяет используемую тему в своем интерфейсе.

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

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: A custom theme built from scratch.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Ещё один основной документ — это functions.phpЭто не шаблонный файл, а так называемый “расширитель функционала” темы. Здесь вы можете добавлять пользовательские функции, настраивать меню и боковые панели, включать скрипты и файлы стилей. По сути, это место, где можно добавлять PHP-код к теме без изменения основных файлов WordPress.

Уровни шаблонов и организация файлов

WordPress использует интеллектуальную систему, называемую “уровнями шаблонов” (template hierarchy), для определения того, какой файл шаблона следует загрузить в ответ на запрос к конкретной странице. Понимание этой структуры является ключом к эффективному разработческому процессу. Например, при посещении отдельной статьи WordPress последовательно ищет подходящий файл шаблона. single-post.php、single.phpИ наконец, index.phpРаспространенные файлы-шаблоны включают:
* header.phpЗаголовок веб-страницы.
* footer.phpФутер сайта.
* sidebar.phpБоковая панель.
* page.php: Используется для отдельных страниц.
* single.php: Используется для отдельных статей.
* archive.php: Используется для категоризации, добавления меток и других функций архивации страниц.
* 404.phpСтраница ошибки 404.
* front-page.phpГлавная страница сайта (имеет более высокий приоритет, чем настройки самой главной страницы).

Разделите эти шаблонные файлы и передайте их по отдельности… get_header(), get_footer(), get_sidebar() Функции, такие как `wait` и другие подобные, следует вызывать только тогда, когда это необходимо. Это лучшая практика для соблюдения принципа DRY (Don’t Repeat Yourself) в программировании – избегания повторения кода.

Создание шаблонов тем и циклов

Основная движущая сила всех тем для WordPress заключается в так называемом “основном цикле” (main loop). Этот цикл отвечает за извлечение контента (статей, страниц и т. д.) из базы данных и его отображение на пользовательской странице. Понимание и правильное использование этого цикла является важнейшим навыком при разработке тем для WordPress.

Стандартный способ написания основного цикла (main loop)

一个典型的循环结构包含在 if 语句中，该语句检查当前查询是否有文章可以显示。我们使用 while Цикл используется для перебора каждой статьи.

Рекомендуемое чтение От нуля до одного: полное руководство по разработке тем для WordPress и практическое обучение.。

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
            <header class="entry-header">
                <h2 class="entry-title"><a href="/ru/</?php the_permalink(); ?>"></a></h2>
            </header>
            <div class="entry-content">
                
            </div>
        </article>
    

    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>

Внутри цикла вы можете использовать ряд шаблонных тегов для отображения информации о статье. Например: the_title(), the_content(), the_permalink(), the_post_thumbnail() и т.д.

Создание пользовательского шаблона страницы

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

<?php
/*
Template Name: 全宽页面布局
*/
get_header(); ?>
<div id="primary" class="full-width-content">
    <main id="main">
        <?php
        while ( have_posts() ) : the_post();
            get_template_part( 'template-parts/content', 'page' );
        endwhile;
        ?>
    </main>
</div>

После создания этот шаблон появится в списке доступных шаблонов на странице настроек веб-сайта WordPress (в разделе “Атрибуты”), чтобы его могли использовать авторы статей при их редактировании. Для лучшей организации кода рекомендуется размещать повторно используемые фрагменты контента (например, аннотации к статьям, метаданные статей) в отдельных файлах или модулях. template-parts каталог и используйте get_template_part() Вызов функции.

Добавление функций и настроек темы

Современная тема для веб-сайта не должна ограничиваться просто набором статических шаблонов; она должна предоставлять возможности для умеренной настройки, позволяя пользователям изменять внешний вид сайта без необходимости обращения к коду. Это достигается в основном за счет использования таких инструментов и функций… functions.php Реализация работы с файлами и API WordPress.

Функции, поддерживаемые при регистрации темы:

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

function my_theme_setup() {
    // 启用文章和评论的 RSS feed 链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 启用自定义 logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
    // 启用标题标签功能（WordPress 自动管理 `<title>` 标签）
    add_theme_support( 'title-tag' );
    // 启用 HTML5 标记支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Создание разделов меню и инструментов

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

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

function my_theme_menus() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_menus' );

Регион регистрации плагинов (панель боковая):

function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在此添加小工具。', 'my-first-theme' ),
        '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' );

В шаблоне используйте… wp_nav_menu() Отобразить меню, используйте… dynamic_sidebar() Отобразить область с мини-приложениями.

Безопасное внедрение скриптов и стилей

Никогда не следует вставлять данные непосредственно в код шаблонных файлов в виде жесткого кодирования. <link> или <script> Метки. Их следует использовать. wp_enqueue_script() и wp_enqueue_style() Функции и их подключение к wp_enqueue_scripts На крючке.

function my_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
    // 引入自定义 JavaScript 文件
    wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '', true );
    // 如果需要，引入 jQuery（注意：WordPress 默认已包含）
    // wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Оптимизация производительности и продвинутые функциональные возможности

Завершенные темы необходимо оптимизировать, чтобы обеспечить их высокую скорость работы, безопасность и удобство в обслуживании. Ниже приведены некоторые рекомендации по совершенствованию их качества.

Применение наилучших практик повышения производительности

Управление скриптами и стилями: загружайте скрипты и стили только на те страницы, где они необходимы. Используйте для этого
wp_enqueue_scripts Хук в сочетании с условными проверками (например…) is_front_page(), is_page()）。
Оптимизация изображений: убедитесь, что размер изображений, создаваемых темой, является разумным. Используйте add_image_size() Необходимо определить подходящие размеры изображений и использовать их в пользовательском интерфейсе (фронтенде), чтобы избежать их масштабирования на стороне клиента.
Минимизация HTTP-запросов: разумное объединение CSS- и JavaScript-файлов (хотя плагины WordPress часто решают эту проблему, разработчикам следует делать это осознанно).
Использование кэша: на уровне кода результаты сложных запросов к базе данных могут быть сохранены в кэше с помощью API Transients.

Обеспечьте безопасность и интернационализацию темы.

Безопасность имеет первостепенное значение. Всегда экранируйте или проверяйте пользовательский ввод. WordPress предоставляет множество функций, которые помогут вам в этом:
При отображении динамического контента используйте… esc_html(), esc_attr(), esc_url() Необходимо провести эскапирование.
При переводе текста используйте

* При переводе текста используйте

__(), _e() Например, в C++ мы можем использовать функцию, которая выводит сообщение об ошибке, и предоставить текстовую область (Text Domain) для вызова этой функции.
При создании опций темы обязательно используйте механизмы проверки Nonce и прав, предоставляемые WordPress, чтобы предотвратить атаки типа CSRF (Cross-Site Request Forgery) и несанкционированный доступ.

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

Для более сложных настроек WordPress Customizer представляет собой мощный инструмент предварительного просмотра в режиме реального времени. Вы можете использовать его, чтобы $wp_customize К объекту добавляются настройки и элементы управления.

В то же время, с популяризацией блочного редактора Gutenberg становится очень важным добавить в тему поддержку “блочных стилей” и “редакторских стилей”. Это гарантирует, что визуальное отображение контента будет одинаковым как в переднем, так и в заднем редакторах, обеспечивая безупречный пользовательский опыт.

резюме

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

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

Какие базовые знания необходимы для разработки темы WordPress?

Вам необходимо освоить основы HTML, CSS и PHP. Знание JavaScript (особенно для взаимодействия с REST API WordPress или разработки блоков) будет дополнительным преимуществом. Понимание основных принципов работы WordPress, таких как типы записей, таксономия и запросы к базе данных, также является очень важной отправной точкой.

Как сделать так, чтобы моя тема соответствовала стандартам загрузки в официальный каталог WordPress?

Чтобы ваша тема соответствовала требованиям для размещения в официальном каталоге тем WordPress.org, вы должны строго соблюдать его требования к проверке тем. Это включает в себя: использование безопасных методов кодирования (эскейпинг вывода, проверка ввода), полную интернационализацию (использование функций перевода и правильных текстовых полей), обеспечение отсутствия ошибок или предупреждений в коде темы, поддержку доступности и отсутствие в комплекте кода или ресурсов, несовместимых с GPL. Рекомендуется ознакомиться с этими стандартами на раннем этапе разработки.

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

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

Что такое тематическое юнит-тестирование? Почему оно так важно?

“Тестовые данные для темы” обычно представляют собой набор тестовых данных WordPress (файлы XML), содержащий контент различных типов. Вы импортируете их на свой сайт для тестирования работы вашей темы в различных условиях, таких как длинные статьи, короткие статьи, многоуровневые комментарии, различные форматы мультимедиа (изображения, видео, аудио), виджеты, меню и т. д. Это очень важно, поскольку помогает выявить потенциальные проблемы с оформлением, разметкой и функциональностью темы, а также гарантирует, что тема будет работать корректно в реальной, сложной среде контента, избавляя вас от жалоб пользователей после публикации.