рис. начало/связанные со знаниями/WordPress/Содержание Подробности

Введение в разработку тем для WordPress: шаг за шагом создаем вашу первую пользовательскую тему

3-минутное чтение
2026-03-15
2026-06-03
1,931
Я получаю комиссионные, когда вы совершаете покупки по ссылкам ниже, без дополнительных затрат для вас.

Подготовка и настройка среды

Прежде чем начать писать первую строку кода, вам понадобится подходящая среда для разработки. К ней относятся локальный сервер и текстовый редактор. Рекомендуется использовать инструменты вроде XAMPP, MAMP или Laragon для настройки локального сервера – они позволяют одним кликом установить и запустить серверы Apache, MySQL и PHP. Выберите текстовый редактор по своему вкусу (например, Visual Studio Code, Sublime Text или PHPStorm); их функции выделения кода и автодополнения значительно повысят эффективность вашей работы.

Далее вам необходимо создать новый каталог для вашей новой темы в локальной установке WordPress. Все темы WordPress хранятся в определенной папке на сервере. /wp-content/themes/ Внутри этой папки создайте новую папку для темы, которую собираетесь разработать. Например, назовите её… my-first-themeНазвание этой папки будет являться вашим идентификатором темы; оно отобразится в списке тем на серверной стороне.

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

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

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

Определение стилей и информации для темы

Всё началось с… style.css Начнем. Создайте этот файл в корневой директории папки с темой и добавьте в начало файла отформатированный блок комментариев. Этот блок комментариев играет ключевую роль в том, чтобы WordPress распознал и загрузил вашу тему. Приведенный ниже код демонстрирует структуру заголовочного файла стилистического файла (stylesheet header):

Ультахост (UltaHost) – хостинг-провайдер, предоставляющий услуги хостинга для сайтов, построенных на платформе WordPress.
Гарантия возврата средств в течение 30 дней, неограниченная пропускная способность интернет-канала и объем баз данных, бесплатная защита от DDoS-атак. При покупке на срок 3 лет предоставляется скидка в размере 501 ТБ до 4 ТБ.
UltaHost ЛОГО страница доступа 
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://yourwebsite.com
Description: 这是一个学习 WordPress 主题开发而创建的入门级主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

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

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

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

<!DOCTYPE html>
<html no numeric noise key 1011>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1008>
    
    <header>
        <h1><a href="/ru/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
        <p></p>
    </header>

<main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                // 文章内容输出
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            echo '<p>暂无文章。</p>';
        endif;
        ?&gt;
    </main>

<footer>
        <p>©</p>
    </footer>
    
</body>
</html>

В этом файле используются основные шаблонные теги WordPress. bloginfo() Получение информации о веб-сайте.the_title() и the_content() В цикле выводятся заголовки статей и их содержимое.wp_head() и wp_footer() Это крайне важные механизмы («хаки»), которые позволяют ядру WordPress, плагинам и другим скриптам взаимодействовать с содержимым страниц. <head> и <footer> Загрузка кода в определенную область системы.

Разделение шаблонов и внедрение функций

Модульные шаблонные файлы

\nБудет index.php Если весь код находится в одном файле, это затрудняет его обслуживание и модификацию. Согласно наилучшим практикам, код следует разделить на несколько отдельных компонентов-шаблонов (Template Parts). Создайте следующие файлы для организации структуры кода:
* header.phpХранение <head> Общий верхний блок контента, включающий информацию о регионе, навигацию в верхней части сайта и другие элементы.
* footer.phpМесто для хранения информации об авторских правах и другого общего контента, расположенного в нижней части веб-сайта.
* sidebar.phpОбласть для хранения панельных инструментов (по желанию).
* functions.phpФайл с функциями, связанными с основными функциями темы.

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

Затем используйте… get_header()、get_footer() и get_sidebar() 等函数在 index.php Внедрить их в процесс. После модификаций… index.php Основная часть станет очень лаконичной:

<main>
    
        <article>
            &lt;?php the_title( &#039;<h2>', '</h2>' ); ?&gt;
        </article>
    
        <p><?php esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ); ?></p>
    
</main>

Обратите внимание: мы использовали… esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ) Выполнение работы по подготовке перевода является стандартной практикой в области интернационализации.

Улучшение функционала тем (Enhancement of theme features)

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

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

Ниже приведён базовый… functions.php Пример:

__( '主导航菜单', 'my-first-theme' ),
    ) );

// 添加对 HTML5 标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

// 添加标题标签支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 注册侧边栏小工具区域
function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-first-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h3 class="widget-title">',
        'after_title'   =&gt; '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

// 加载主题的样式表
function my_first_theme_scripts() {
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()-&gt;get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?&gt;

В этом файле мы определили функцию. my_first_theme_setupИ через… add_action( ‘after_setup_theme’， ‘my_first_theme_setup’ ) Необходимо подключить это к определенному хэнгу (action hook) темы WordPress при ее инициализации. Для этого также используется тот же подход. register_sidebar Функция зарегистрировала область для размещения небольших инструментов (приложений/утилит) и осуществила необходимые действия для их использования. wp_enqueue_style Функция корректно включила стильный шаблон темы.

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

Настраивать шаблоны для различных типов страниц

Иерархия шаблонов в WordPress позволяет создавать отдельные файлы шаблонов для разных типов страниц. Например:
* front-page.phpИспользуется в качестве статической главной страницы.
* home.phpСтраница списка статей блога.
* single.phpСтраница с детальной информацией о отдельной статье.
* page.phpОдностраничный сайт.
* archive.phpСтраница архивации, содержащая информацию о категориях, тегах, авторах и т. д.
* search.phpСтраница результатов поиска.
* 404.phpСтраница ошибки 404.

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

Создать page.php Это позволяет вам независимо настраивать внешний вид всех страниц, не влияя при этом на содержимое статей. Его структура… index.php Похожий подход, но обычно не требуется отображение метаданных, связанных с публикацией статьи (таких как дата публикации, автор).

Разработка реагирующего дизайна и интерфейсов (реагирующего на разные размеры экранов)

Современные темы для WordPress должны быть реагирующими (responsive). Это означает, что ваш CSS должен адаптироваться к размерам экранов различных устройств – от мобильных телефонов до настольных компьютеров. Рекомендуется использовать стратегию разработки CSS с приоритетом мобильных устройств (Mobile First): сначала создавать базовые стили для маленьких экранов, а затем с помощью медиаквери (Media Queries) добавлять дополнительные стили для более крупных экранов.

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

Кроме того, для реализации интерактивных элементов (например, выпадающих меню, слайд-шоу и т. д.) в вашем проекте может понадобиться использование JavaScript. Правильный подход к этому заключается в том, чтобы… functions.php Используйте это в Китае. wp_enqueue_script() Функция предназначена для регистрации и очереди скриптов, а также для обеспечения правильного указания их зависимостей (например, от библиотеки jQuery). Это позволяет избежать конфликтов между скриптами и их повторного загрузки, а также обеспечивает совместимость с функциями оптимизации скриптов в WordPress.

резюме

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

Разработка тем – это процесс, который постоянно идет вперед и требует повторений (итераций) и углубления знаний. Далее вы можете изучить создание дочерних тем (Child Themes), чтобы безопасно изменять существующие темы, научиться использовать API настроек WordPress (WordPress Customizer), позволяющий пользователям в реальном времени изменять параметры темы из панели управления, или углубиться в изучение REST API WordPress с целью создания тем, совместимых с фронтенд-фреймворками. Важно следить за официальной документацией для разработчиков и активно участвовать в сообществе – это ключ к постоянному совершенствованию своих навыков.

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

Для разработки темы WordPress обязательно ли в совершенстве владеть PHP?

Да, наличие прочных знаний PHP является необходимым условием для разработки тем для WordPress. Поскольку сам WordPress написан на PHP, все файлы шаблонов (такие как…) index.php、single.phpи функциональные файлы (functions.phpДля всех этих целей необходимо использовать PHP-код для динамического генерирования контента, вызова функций WordPress и обработки данных.

Кроме того, вам необходимо быть знакомыми с HTML и CSS для создания структуры и стиля страниц, а также иметь базовые знания JavaScript (особенно jQuery, поскольку он встроен в ядро WordPress) для добавления интерактивных функций.

Почему изменения моей темы не отображаются в меню настроек WordPress?

Обычно это вызвано кэшированием в браузере или на сервере. Сначала попробуйте в браузере выполнить следующие действия: Ctrl + F5(Для Windows/Linux) или Cmd + Shift + R(На Mac) выполните принудительное обновление страницы, чтобы очистить кэш браузера.

Если проблема сохраняется, возможно, на стороне сервера или с помощью плагинов кэширования WordPress (например, W3 Total Cache, WP Super Cache) были сохранены старые файлы. Попробуйте очистить кэш во всех этих плагинах. На этапе разработки рекомендуется временно отключить эти плагины, чтобы избежать возможных помех в работе системы.

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

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

Например, используя… (‘文本’， ‘my-first-theme’) Провести перевод, или использовать… echo esc_html(‘文本’， ‘my-first-theme’) 进行输出和转义。你需要在 style.css Заголовок и… load_theme_textdomain() Правильная настройка при вызове функции Text Domain(Текстовое поле), затем используйте такой инструмент, как Poedit, для создания нужного контента. .pot Шаблоны перевода и .po/.mo Языковой файл.

В чем разница между функциями, находящимися в файле functions.php темы, и функциями, предоставляемыми плагинами?

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

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

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

Что дальше, что дальше?

Если вы создаёте или оптимизируете веб-сайт на WordPress, следующим шагом будет ознакомление с темами, связанными с оптимизацией производительности, настройкой плагинов и кастомизацией темы.

Расширенное чтение и практические знания

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

Теги.