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

Чтобы начать разработку тем для WordPress, необходим компьютер с настроенной локальной средой PHP. Для быстрого создания такой среды можно использовать инструменты, такие как XAMPP, MAMP или Local by Flywheel. Далее вам понадобится кодовый редактор — например, Visual Studio Code, PHPStorm или Sublime Text, который обеспечивает выделение синтаксиса кода, предложения по его написанию и другие удобства, значительно повышающие эффективность разработки. Наконец, убедитесь, что у вас установлена и активирована последняя версия WordPress.

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

your-theme/
├── style.css          # 主题样式和基本信息
├── index.php         # 主模板文件
├── header.php        # 头部模板
├── footer.php        # 底部模板
├── sidebar.php       # 侧边栏模板
├── functions.php     # 功能和特性定义
├── page.php          # 页面模板
├── single.php        # 文章模板
└── assets/
    ├── css/
    ├── js/
    └── images/

Создание файла с основной темой.

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

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

Определение информации о теме и основного стилистического файла

style.cssФайл представляет собой не только таблицу стилей, но и своего рода “идентификационный документ” темы. Блок комментариев в его верхней части содержит всю необходимую метаинформацию, которая используется WordPress для распознавания темы. Пример базовых комментариев, находящихся в заголовочном файле темы, приведен ниже:

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

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

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

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始构建的简单自定义主题，用于学习WordPress主题开发。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

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

Создание шаблона каркаса темы

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

<main id="primary" class="site-main">
    <p>Если есть записи:</p> <p>Пока есть записи:</p> <p>Показываем содержание записи:</p> <p>Заканчиваем цикл:</p> <p>Если нет записей:</p> <p>Выводим сообщение:</p> <p>Заканчиваем if-else:</p> <p>Выводим код завершения:</p> <p>Закрываем тег PHP:</p> <p>Окончание программы:</p>
</main>

Разделить шаблоны верхней и нижней части страницы

header.phpФайл обычно содержит заголовок HTML-документа до начала области контента. Он должен включать в себяЗаявление…Ярлыки,Регион (использование)wp_head()Крючки, а также заголовок веб-сайта и главная навигация. Ключевые функции…wp_head()Оно позволяет плагинам и темах вставлять необходимый код (например, CSS и JS) в заголовок страницы.

footer.phpФайл содержит всё содержимое, которое следует за окончанием основной области текста (например, разделы с футером, информацией об авторских правах и т. д.). Он должен заканчиваться определённым форматным элементом, обозначающим конец файла.wp_footer()Вызов функции завершен; эта функция необходима для нормального функционирования многих плагинов (например, плагинов для анализа кода).

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

Введение новых функций и улучшение дизайна темы (Introduction of new features and enhancement of the theme design)

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

Включить функцию основных тем (Core Themes)

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

<?php
function my_theme_setup() {
    // 启用文章和评论的HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 启用文章缩略图功能
    add_theme_support( 'post-thumbnails' );
    // 设置默认缩略图尺寸
    set_post_thumbnail_size( 800, 400, true );
    // 启用标题标签支持（由WordPress自动生成<title>标签）
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Меню регистрации и загрузка ресурсов

Позиции элементов навигационного меню позволяют пользователям управлять ими в разделе “Внешний вид” -> “Меню” в режиме администрирования.register_nav_menus()Реализация функции:

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

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

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

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

Правильное загрузочное поведение файлов CSS и JavaScript является гарантией хорошей производительности сайта. Вам следует использовать…wp_enqueue_style()иwp_enqueue_script()Функции и их подключение кwp_enqueue_scriptsНа крючке. Так можно обеспечить правильность зависимостей между компонентами и избежать их повторного загрузки.

Создание шаблона конкретной страницы

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

Дизайн шаблонов для отдельных статей и независимых страниц

single.phpШаблон предназначен для отображения отдельной статьи. Он используется в сочетании с…index.phpЦиклы работы с данными похожи на обычные процессы обработки информации, но обычно включают в себя более полную метаинформацию: категории, теги, авторов, время публикации, а также разделы для комментариев.

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

page.phpШаблоны предназначены для отображения отдельных статических страниц. Как правило, они не отображают метаданные статей (такие как категории, время публикации), а циклы обработки данных в них упрощены; главная цель шаблонов — отображение содержимого, введенного с помощью редактора страниц.

Создание шаблонов для списков статей и страниц архива

archive.phpШаблоны используются для отображения архивных страниц с категориями, тегами, авторами, датами и другой информацией. Обычно они включают в себя заголовок (например, “Категория: Технологии”) и список статей.

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

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

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

home.phpилиfront-page.phpИспользуется для настройки дизайна главной страницы блога. Если такая возможность предусмотрена.front-page.phpОно будет использоваться в качестве главной страницы сайта; если такая страница существует.home.phpОно будет использоваться в качестве страницы индекса статей.

Реализация пользовательского поиска и страницы 404

search.phpИспользуется для отображения результатов поиска. Вы можете использовать это место по своему усмотрению.the_search_query()Функция предназначена для вывода ключевых слов, используемых пользователем при выполнении поиска.

404.phpЭто сообщение отображается, когда пользователь пытается зайти на несуществующий адрес. Хорошая страница ошибки 404 должна включать в себя дружелюбное сообщение, поле для поиска и ссылки на важные страницы сайта.

Интеграция мини-приложений и динамической боковой панели

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

Зона подготовки к регистрации плагинов

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

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>',
            'before_title'  =&gt; '<h2 class="widget-title">',
            'after_title'   =&gt; '</h2>',
        )
    );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

Вызов боковой панели в шаблоне

После регистрации вам необходимо использовать эти данные в файлах шаблонов.dynamic_sidebar()Функция предназначена для вывода информации из данной области. Например, в…sidebar.phpКитайский:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
<?php endif; ?>

Затем, вindex.php、single.phpИспользуйте это в шаблонах, которым требуется боковая панель.get_sidebar()Интродукция функцийsidebar.phpТеперь пользователи могут добавлять различные виджеты в главный боковой меню, просто перетаскивая их на соответствующую область на странице “Внешний вид” → “Виджеты” в меню административной панели WordPress.

резюме

Создание собственной темы для WordPress с нуля представляет собой систематический процесс обучения, который начинается с понимания основной структуры файлов и постепенно переходит к изучению уровня шаблонов, расширения функционала и реализации механизмов для работы с динамическим контентом. Ключевым моментом является освоение всех аспектов этого процесса.style.css、index.php、header.php、footer.phpиfunctions.phpРоль и способ создания этих основополагающих файлов.add_theme_support()Включите данную функцию, создайте целевые шаблоны страниц на основе иерархии шаблонов, а затем используйте их для формирования конкретного контента.register_sidebar()После интеграции вспомогательных инструментов тема приобретает полноценные функции и четкую структуру, что позволяет считать ее готовой к использованию. Это не просто техническое решение, но и результат глубокого понимания логики работы системы управления контентом WordPress.

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

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

Не обязательно. Если вы создаете тему с нуля и с нуля, полностью оригинальную, вы можете сразу создать родительскую тему. Лучший сценарий использования подтем — когда вы хотите настроить и изменить существующую тему (родительскую) и при этом быть уверенными, что в будущем сможете безопасно обновить родительскую тему, не потеряв свои собственные изменения. Изучение разработки с нуля и создание родительской темы с самого начала помогает лучше понять всю архитектуру системы.

Почему мой тематический дизайн не отображается в разделе “Внешний вид” на заднем плане (в системных настройках)?

Обычно это происходит по следующей причине:style.cssПроблема возникла из-за неправильного формата блока с комментариями о теме документа, его отсутствия или наличия грамматических ошибок. Пожалуйста, тщательно проверьте, был ли блок комментариев в начале файла написан в соответствии с установленным форматом, особенно…Theme Name:Эта строка должна присутствовать и быть корректной. Также убедитесь, что ваша папка с тематическими материалами (тематический каталог) уже размещена в нужном месте.wp-content/themes/Внутри каталога.

В чем разница между файлом functions.php и плагинами?

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

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

Чтобы тема поддерживала несколько языков (интернационализация и локализация), необходимо выполнить два основных шага. Во-первых,style.cssКомментарийный блок и…functions.phpВо всех местах текста, которые необходимо перевести, используйте такой формат:__( ‘文本’, ‘my-first-theme’ )Такую функцию перевода необходимо обернуть в некий контейнер (класс, объект и т. д.), чтобы обеспечить ее правильное использование и управление.‘my-first-theme’Это ваш текстовый домен (Text Domain). Далее вам потребуется использовать такой инструмент, как Poedit, чтобы сканировать файлы тем (theme files) и сгенерировать необходимые данные..potШаблонные файлы, а также файлы, предназначенные для каждого языка..poи.moФайлы перевода, поместите их в папку темы/languages/Внутри каталога.