С нуля: освоение ключевых процессов и лучших практик современной разработки тем WordPress

Среда разработки и инициализация проекта

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

Для локальной среды можно выбрать комплексные инструменты, такие как Local、Laragon или MAMPЭти инструменты позволяют в один клик установить Apache/Nginx, PHP и MySQL, значительно упрощая процесс настройки среды. Выбор зависит в основном от ваших предпочтений по операционной системе и конкретных требований к функциям.

Как правильно настроить структуру каталогов темы

Чёткая и организованная структура каталогов — краеугольный камень профессиональной разработки тем. Она не только позволяет вам самим легко поддерживать код, но и помогает другим разработчикам понимать его и сотрудничать. Современные темы WordPress обычно придерживаются структуры, похожей на “шаблон”.

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

в каталоге установки WordPress wp-content/themes В папке создайте папку с названием вашей темы, например my-awesome-themeЗатем в этой папке рекомендуется создать следующие основные каталоги:
* /assets：используется для хранения всех статических ресурсов。
* /assets/css: хранить таблицы стилей, например style.css и editor-style.css。
* /assets/js：хранит файлы JavaScript.
* /assets/images：хранит изображения, значки и другие медиафайлы.
* /assets/fonts：Для хранения пользовательских шрифтов.
* /template-parts: хранит повторно используемые фрагменты шаблонов, такие как верхний колонтитул, нижний колонтитул, метаданные статьи и т. д.
* /inc или /includes: хранение файлов расширения функциональности темы, например пользовательских функций, регистрации виджетов, определения пользовательских типов записей и т. д.
* /patterns(Необязательно, но рекомендуется): храните файлы определений шаблонов блоков редактора всего сайта.

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

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

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

Необходимо создать файл с информацией о теме (theme information file).

Каждая тема WordPress должна иметь файл с именем style.css файл, который является не просто таблицей стилей, а “удостоверением личности” темы. Информация в заголовке комментария в верхней части этого файла — ключ к тому, как WordPress распознаёт тему.

/*
Theme Name: 我的炫酷主题
Theme URI: https://example.com/my-awesome-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 一个专为博客和杂志网站设计的现代化、响应式WordPress主题。
Version: 1.0.0
Tested up to: 6.5
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
Domain Path: /languages
*/

Среди них,Text Domain Используется для интернационализации и является уникальным идентификатором вашей темы в файле перевода.Requires at least и Requires PHP Указывает минимальные версии WordPress и PHP, необходимые для работы темы, что крайне важно для удобства пользователей и безопасности.

Кроме того, для поддержки функций редактора всего сайта (FSE) вам также нужно создать theme.json Файл. Этот файл служит мостом связи между редактором Gutenberg и темой и используется для глобального определения стилей, палитры, настроек типографики и т. д.

Создать шаблон основной темы

Файлы шаблонов — это каркас темы WordPress, они определяют, как будут отображаться различные типы контента. WordPress автоматически выбирает подходящий файл шаблона для отображения страницы в соответствии с “иерархией шаблонов”.

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

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

Как создать шапку и подвал сайта

Шапка и подвал сайта — это части, общие для каждой страницы. Мы разместим их отдельно в header.php и footer.php Средний.

В header.php В файле вам нужно разместить раздел head HTML-документа и вызвать основные функции WordPress. Ключевые функции включают wp_head()Он позволяет ядру WordPress, плагинам и темам вставлять здесь необходимый код (например, таблицы стилей, метатеги).

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

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

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

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1002>

<header id="masthead" class="site-header">
    <!-- 你的网站导航和Logo代码 -->
</header>

footer.php отвечает за закрытие header.php открытую вкладку и вызвать wp_footer() Функции играют крайне важную роль при загрузке скриптов и реализации дополнительных (плагинных) функций.

Как создать цикл статей

Цикл записей — это основная логика темы WordPress, которая используется для извлечения и отображения записей из базы данных. Эта логика обычно размещается в index.php、single.php(отдельная статья) или page.php(на одной странице).

Базовая структура цикла статьи выглядит следующим образом. Она использует have_posts() и the_post() Функция для перебора найденных статей.

Рекомендуемое чтение Полное руководство: как разработать мощную и гибкую тему 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-awesome-theme' ); ?></p>

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

Функции и настройка темы

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

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

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

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

Как зарегистрировать меню навигации и боковую панель

Пользовательские меню навигации и боковая панель (область виджетов) — это базовые функции темы. Вам нужно в functions.php Используйте специальные функции для их регистрации, и только после этого ими можно будет управлять в меню “Внешний вид” в панели администратора.

пользоваться register_nav_menus() Функция для регистрации расположений меню. Например, зарегистрировать “главное меню” и “меню в подвале”.

function my_awesome_theme_setup() {
    register_nav_menus(
        array(
            'primary' => esc_html__( 'Primary Menu', 'my-awesome-theme' ),
            'footer'  => esc_html__( 'Footer Menu', 'my-awesome-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_awesome_theme_setup' );

Чтобы зарегистрировать область виджетов (боковую панель), нужно использовать register_sidebar() Функция. Вы можете задать название, ID, описание боковой панели, а также HTML-теги обёртки до и после неё.

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

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

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

function my_awesome_theme_setup() {
    // ... 之前的菜单注册代码 ...
    add_theme_support( 'post-thumbnails' ); // 为“文章”和“页面”启用特色图像
    // 你还可以设置缩略图尺寸
    set_post_thumbnail_size( 800, 450, true ); // 默认特色图像尺寸， true表示裁剪
    add_image_size( 'my-theme-blog-list', 400, 250, true ); // 自定义一个图像尺寸
}

После включения в интерфейсе редактирования статьи появится метабокс “Изображение записи”, позволяющий пользователю загрузить или выбрать изображение. В шаблоне вы можете использовать the_post_thumbnail() Функцией вывести это.

Оптимизация стиля, скриптов и производительности

Правильная постановка CSS- и JavaScript-файлов в очередь — ключевая практика разработки для WordPress. Никогда не используйте напрямую в файлах шаблонов <link> или <script> ресурсы с жёстко заданными метками, а следует использовать wp_enqueue_style() и wp_enqueue_script() Функция.

Как правильно добавлять CSS и JS в очередь

В functions.php Создайте новую функцию в, чтобы регистрировать и ставить в очередь ресурсы вашей темы. Затем привяжите эту функцию к wp_enqueue_scripts Этот элемент (акционный хук) находится здесь.

function my_awesome_theme_scripts() {
    // 注册并排队主样式表（style.css）
    wp_enqueue_style( 'my-awesome-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 注册并排队一个自定义的CSS文件
    wp_enqueue_style( 'my-awesome-theme-main-css', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0.0' );

// 注册并排队一个自定义的JavaScript文件
    wp_enqueue_script( 'my-awesome-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );

// 如果需要在脚本中使用PHP变量（如ajax_url），可以使用wp_localize_script
    wp_localize_script( 'my-awesome-theme-navigation', 'myThemeData', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
    ));
}
add_action( 'wp_enqueue_scripts', 'my_awesome_theme_scripts' );

Обратите внимание, последний параметр — true Означает, что скрипт находится внизу документа (</body>Предварительная загрузка обычно позволяет повысить производительность рендеринга страницы.

Как внедрить интернационализацию и локализацию

Чтобы вашу тему можно было использовать по всему миру, вам нужно выполнить интернационализацию (i18n). Это означает, что все текстовые строки, выводимые в шаблонах и PHP-коде, должны быть обёрнуты в функции перевода.

Наиболее часто используемыми функциями являются… esc_html__()(для вывода экранированного HTML) и esc_html_e()(используется для прямого вывода экранированного HTML). Все они требуют указания данных, определённых в информации заголовка темы. Text Domain。

// В сообщении об отсутствии статей в цикле обработки статей
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-awesome-theme' ); ?></p>

// 在导航菜单注册时
'primary' =&gt; esc_html__( 'Primary Menu', 'my-awesome-theme' ),

Подготовив код, вы можете использовать такие инструменты, как Poedit, чтобы просканировать все строки перевода и создать .pot（файл шаблона），затем создайте соответствующий .po и .mo Переведите файл и поместите его в тему /languages Каталог.

резюме

В этой большой статье системно рассматривается ключевой процесс современной разработки тем WordPress — от настройки окружения до совершенствования функционала. Мы начали с создания стандартизированной структуры проекта, подчеркнув style.css и theme.json важность. Затем мы подробно рассмотрели логику построения иерархии шаблонов, в частности динамического отображения содержимого с помощью цикла записей. В части расширения функциональности мы изучили, как использовать functions.php Расширьте тему, зарегистрируйте меню и виджеты, а также добавьте поддержку миниатюр записей.

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

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

В чём разница между темой и плагином? Где следует размещать функциональный код?

Тема отвечает за визуальное представление и компоновку содержимого сайта (то есть “внешний вид”), тогда как плагины используются для добавления на сайт отдельных функций (например, контактных форм, SEO-оптимизации, электронной коммерции). Простое правило таково: если код изменяет внешний вид сайта, он относится к теме; если он добавляет новую функциональность, его следует рассматривать как плагин. В долгосрочной перспективе оформление функционального кода в виде плагина позволяет сохранить эти функции при смене темы.

Обязательно ли использовать файл theme.json? Какие у него преимущества?

Для современной разработки тем с прицелом на будущее настоятельно рекомендуется использовать theme.jsonЭто больше не дополнительная расширенная функция, а ядро архитектуры редактора всего сайта WordPress. Его преимущества заключаются в следующем: возможность централизованно управлять глобальными стилями и настройками (цвета, шрифты, интервалы), обеспечивать более единообразный опыт работы с блочным редактором, сокращать количество встроенных стилей, а также упрощать реализацию адаптивного дизайна и тёмного режима. Начиная с WordPress 5.8, это стало важной частью разработки тем.

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

Вывод HTML стандартных виджетов WordPress (таких как рубрики и список последних записей) обычно содержит множество вложенных элементов, которые вам не нужны. div и имена классов. Вы можете настроить их с помощью фильтров (Filter). Например, используя widget_categories_args Фильтр изменяет параметры запроса виджета рубрик или, более основательно, с помощью widget_categories_output и другие фильтры напрямую изменяют создаваемый им HTML. Другой, более современный и гибкий способ — создать собственный пользовательский блок, чтобы заменить традиционные виджеты.

Что такое иерархия шаблонов и как её использовать?

Иерархия шаблонов — это система принятия решений в WordPress, которая определяет, какой файл шаблона использовать для отображения текущей страницы. Она следует принципу “от наиболее конкретного к наиболее общему”. Например, для записи с ID 123 WordPress будет последовательно искать:single-post-123.php -> single-post.php -> single.php -> singular.php -> И в конце концов… index.php. Вы можете создать более конкретные файлы шаблонов (например, category-news.php отдельно разработать страницу категории “Новости”), чтобы точно контролировать внешний вид разных страниц; это гораздо понятнее, чем писать большое количество условных операторов в одном файле.

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

Первый шаг — wp-config.php В файле включен режим отладки WordPress. WP_DEBUG Константа установлена на trueЭто позволит отображать все ошибки, предупреждения и уведомления PHP на странице. Также рекомендуется установить WP_DEBUG_LOG Для… trueЗаписать ошибку в… /wp-content/debug.log В файле следует избегать прямого раскрытия сообщений об ошибках посетителям. Кроме того, использование инструментов разработчика браузера (вкладок Console и Network) для проверки ошибок JavaScript и проблем с загрузкой ресурсов также является необходимым навыком фронтенд-отладки.