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

Подготовка среды для разработки тем для WordPress

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

Настройка локальной среды разработки

Наиболее распространенным способом разработки сайтов является использование интегрированных пакетов программного обеспечения для локальных серверов, таких как XAMPP, MAMP или Laragon. Эти инструменты позволяют одним кликом установить серверы Apache, MySQL и PHP, избавляя пользователей от необходимости выполнения сложных настроек. Для разработки с использованием системы WordPress особенно рекомендуется использовать среды, оптимизированные для работы с этой платформой, например Local by Flywheel или DesktopServer. Эти инструменты обеспечивают удобство в создании сайтов, управлении базами данных и выборе версий PHP.

Выбор основных инструментов и редакторов

Вам понадобится кодовый редактор. Рекомендуем использовать Visual Studio Code, PhpStorm или Sublime Text. Все они обладают функциями выделения кода, автодополнения и управления проектами. Особенно эффективен Visual Studio Code при работе с плагинами, предназначенными для WordPress (например, WordPress Snippet и PHP Intelephense), которые значительно повышают эффективность разработки.

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

Кроме того, система управления версиями Git является абсолютно необходимой. Даже если вы работаете как независимый разработчик, использование Git для отслеживания изменений в коде, создания веток и создания резервных копий проекта – это хорошая практика. Вы можете инициализировать свой репозиторий локально и в будущем разместить его на удаленных хостинг-платформах, таких как GitHub, GitLab или Bitbucket.

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

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

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

Понимание основной структуры темы WordPress

Стандартная тема для WordPress представляет собой папку, содержащую определенные файлы, которая находится в определенном месте на сервере. /wp-content/themes/ В папке "Catalog". Даже самая простая тема должна содержать два основных файла.

Файл стилей для темы (stylesheet file for the theme)

style.css Это файл, содержащий информацию об идентификаторе темы (“идентификационный документ” темы) и её внешнем виде (определения её внешнего вида). Блок комментариев в начале файла включает в себя все метаданные темы, которые будут считаны системой WordPress и отображены на странице “Внешний вид” -> “Темы” в меню административной панели. Пример базового блока комментариев представлен ниже:

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个用于学习 WordPress 主题开发的入门主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

В этом файле вы продолжите написание всех CSS-правил, необходимых для управления внешним видом веб-сайта: шрифтами, цветами, размещением элементов и т. д.

Основной файл шаблона индекса

index.php Это шаблон по умолчанию для данной темы и его использование обязательно. Когда WordPress не может найти более специфический шаблон (например, single.php или page.phpКогда это необходимо, его используют для отображения страницы. Обычно он содержит теги шаблонов WordPress, которые позволяют включать верхнюю часть страницы (header), цикл для отображения содержимого статей, боковую панель (sidebar) и нижнюю часть страницы (footer).

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

Помимо этих двух файлов, полнофункциональная тема обычно включает в себя следующие шаблонные файлы:
* header.phpЗаголовочная область веб-сайта (Header area of the website)<head> (Вместе с верхней навигацией.)
* footer.phpФутер (нижняя часть) веб-сайта.
* functions.phpСимвол “:” используется для добавления таких элементов интерфейса, как функции управления темами, меню регистрации, боковые панели и т. д.
* page.phpСимвол «:» используется для отображения статических страниц.
* single.phpДанный символ используется для отображения отдельной статьи.
* archive.phpТэг : используется для отображения архивных страниц, таких как категории и метки.

Создайте свою первую тему с нуля.

Давайте теперь создадим самую простую тему, чтобы понять, как работают различные её компоненты в совместности.

Создание базовых файлов и каталогов

Во-первых, на вашем локальном сайте, созданном с использованием системы WordPress… /wp-content/themes/ В каталоге создайте новую папку с названием… my-first-themeЗатем в этой папке создайте два пустых файла:style.css и index.phpВставьте примечания к заголовку CSS, упомянутые в предыдущем разделе. style.css Документ.

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

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

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

Создание базовой шаблона индекса

Далее – процесс редактирования. index.php Файл. Его самая простая версия может содержать вызовы основных функций WordPress. Для начала мы используем… get_header() Функция используется для включения необходимых заголовков (headers) в код.

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 在这里输出文章内容
            the_title( &#039;<h1>', '</h1>' );
            the_content();
        endwhile;
    else :
        echo '<p>暂无文章。</p>';
    endif;
    ?&gt;
</main>

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

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

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

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

<?php
function my_first_theme_setup() {
    // 让主题支持文章特色图像
    add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => esc_html__( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 注册一个侧边栏小工具区域
function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( '在此添加小工具。', 'my-first-theme' ),
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Затем вам нужно… header.php В документе используются wp_nav_menu() Функция предназначена для отображения регистрированного вами меню.

Дальнейшее развитие темы и подготовка к её публикации

После завершения работы над базовой темой вы сможете улучшить её функциональность и гибкость с помощью более детализированных шаблонов и механизмов взаимодействия («хуков»).

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

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

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

Используйте шаблонные компоненты для оптимизации структуры.

Шаблонные компоненты (Template Parts) представляют собой отличный способ модульной организации повторно используемых фрагментов шаблонов (например, карточек с резюме статей). Вы можете создать такие компоненты, чтобы их было легко включать в различные шаблоны. template-parts/content.php В файл нужно перенести код, который выводит содержимое каждой статьи во время цикла. Затем… index.php В цикле используется… get_template_part() Нужна функция для её вызова:

while ( have_posts() ) :
    the_post();
    get_template_part( 'template-parts/content', get_post_type() );
endwhile;

Использование хуков действий и фильтров

Хаки (Hooks) являются основой плагинной системы WordPress и широко используются при разработке тем. Хаки действий (Action Hooks) позволяют вставлять код в определенные моменты выполнения скрипта, например, добавлять дополнительный текст после основного содержимого статьи. Хаки фильтров (Filter Hooks) позволяют изменять данные, например, укорачивать содержимое резюме статьи.

Например, используя… wp_enqueue_scripts Для правильного включения файлов JavaScript и CSS используются специальные «хаки» (action hooks).

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 引入自定义的 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Провести окончательные тесты и подготовить продукт к пакетированию.

Перед публикацией необходимо провести тщательные тесты. Убедитесь, что тема корректно отображается в различных браузерах (Chrome, Firefox, Safari, Edge). Также проверьте, как отображается сайт на мобильных устройствах и компьютерах (с учетом реактивного дизайна). В области управления WordPress включите режим отладки (debug mode). wp-config.php Установите его на своём телефоне. define( 'WP_DEBUG', true );Устраните все предупреждения и ошибки, связанные с использованием PHP. Проверьте, корректно работают ли все основные функции WordPress (комментарии, поиск, страницы с результатами поиска).

В конце удалите все ненужные файлы, такие как лог-файлы и резервные копии, созданные в процессе разработки. Затем сжайте всю папку с исходным кодом в ZIP-архив. Этот архив можно использовать для установки программы.

резюме

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

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

Обязательно ли знать PHP для разработки темы WordPress?

Да, для дальнейшей разработки тем для WordPress необходимо владеть языком программирования PHP. Сама система WordPress написана на PHP, и все шаблонные файлы (с расширением .php) содержат код на этом языке, который используется для динамического генерирования контента. Хотя вы можете изменять внешний вид подтем без написания большого количества кода на PHP, для создания пользовательских шаблонов, реализации сложных функций или изменения логики запросов знания PHP крайне важны.

Какова функция файла functions.php, связанного с темой (theme)?

functions.php Файл является “центром функциональности” темы. Он используется для добавления или изменения функций темы без необходимости модификации основных файлов темы. Его основные функции включают: включение поддержки определенных функций темы (например, использования специальных изображений, настройки пользовательского фона), регистрации элементов навигационного меню и панели инструментов, задержки загрузки таблиц стилей и скриптов, определения пользовательских функций, а также использования механизмов действий (actions) и фильтров (filters) для изменения стандартного поведения WordPress.

Что такое подтема (subtopic), и зачем её использовать?

Подтема (sub-theme) – это тема, которая зависит от другой темы (родительской темы); она наследует все функции, стили и шаблоны родительской темы, но позволяет безопасно переопределять их или добавлять новые элементы. Основная цель использования подтем – сохранение ваших собственных настроек при обновлении родительской темы. Если вы изменяете файлы родительской темы напрямую, ваши изменения будут стерты после обновления, в то время как изменения, сделанные в подтеме, останутся. Это лучшая практика для кастомизации тем и их обслуживания в процессе обновлений.

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

Чтобы тема поддерживала несколько языков (интернационализация и локализация, i18n/l10n), необходимо выполнить два основных шага. Во-первых, необходимо обернуть все текстовые строки темы с помощью функций перевода, предоставляемых WordPress. Например, можно использовать… esc_html__( ‘文本’, ‘text-domain’ ) или _e( ‘文本’, ‘text-domain’ )Во-вторых, для создания шаблонных файлов (.pot) используются специальные инструменты (например, Poedit). На основе этих шаблонов переводчики могут создавать файлы с текстом на нужных языках в форматах .po и .mo (например, zh_CN.po). style.css Головная часть должна быть правильно настроена. Text Domain Это ключевой момент.