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

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

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

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

Настройка среды разработки и создание инфраструктуры

Прежде чем начать писать код, вам понадобится подходящая среда локального разработки. Можно использовать XAMPP, MAMP или такие приложения для настольных компьютеров, как Local by Flywheel. Убедитесь, что в среде установлены PHP, MySQL, а также серверы Apache или Nginx.

\nСоздание тематического каталога и основных файлов.

Для самой базовой темы WordPress достаточно всего двух файлов. Во-первых, эти файлы должны находиться в каталоге, где установлен WordPress.wp-content/themesВ папке создайте новую папку, например, назовите её «New Folder».my-first-theme。

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

В этой папке создайте первый основной файл:style.cssЭтот файл является не только таблицей стилей, но и содержит метаданные темы. В заголовке файла обязательно должна находиться примечание с правильной форматировкой.

Ультахост (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://example.com
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

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

<!DOCTYPE html>
<html no numeric noise key 1010>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1007>
    <header>
        <h1><a href="/ru/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
        <p></p>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>©</p>
    </footer>
    
</body>
</html>

Теперь ваша тема может быть добавлена в список тем в разделе “Внешний вид” -> “Темы” в бэкенде WordPress и активирована.

Основной шаблонный файл и иерархия шаблонов

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

Статьи и шаблоны страниц.

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

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

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
    <header class="entry-header">
        <h1 class="entry-title"></h1>
        <div class="entry-meta">
            发布于： | 作者：
        </div>
    </header>
    <div class="entry-content">
        
    </div>
    <footer class="entry-footer">
        &lt;?php the_tags( &#039;标签：&#039;, &#039;, &#039;, &#039;<br />' ); ?&gt;
    </footer>
</article>

Для отдельных страниц WordPress будет искать…page.phpВы также можете создавать шаблоны для конкретных идентификаторов страниц или псевдонимов страниц. Например:page-about.phpЭто будет использоваться исключительно на страницах с информацией о продукте (т. е. на страницах типа “О продукте”).

Архив и шаблон главной страницы.

Страница списка статей блога (например, по категориям, тегам, архиву авторов)archive.phpВы можете использовать…is_category()、is_tag()Условные теги различаются друг от друга по своим внутренним параметрам (характеристикам).

Домашняя страница веб-сайта по умолчанию состоит из…index.phpКонтроль… Но вы можете создать что-то новое.front-page.phpДавайте определим структуру статической главной страницы или создадим её.home.phpДавайте определим, как должна выглядеть главная страница блога, на которой отображаются последние статьи.

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

Функции тем и механизмы хуков (hooks)

Гибкость и расширяемость WordPress во многом обусловлены его системой хуков (Hooks), включая действия (Actions) и фильтры (Filters). Темы (Themes) могут использовать эти хуки для настройки поведения сайта и обработки данных.functions.phpФайлы используются для работы с этой системой.

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

functions.phpЭти файлы используются для добавления функций тематизации, регистрационных меню, боковых панелей и других элементов интерфейса. Как правило, для их создания применяются специальные инструменты или скрипты.after_setup_themeЭтот хук действий предназначен для инициализации основных функций темы.

<?php
function my_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );
    // 启用HTML5标记支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 注册一个导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Раздел для регистрации плагинов/дополнений

Регионы для размещения вспомогательных инструментов, такие как боковые панели или нижние блоки (Widget Area), также должны быть учтены при дизайне сайта.functions.phpЗарегистрируйтесь и используйте это.widgets_initКрючок.

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

function my_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>'перед заголовком '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

После регистрации вы сможете использовать файлы шаблонов (например…).sidebar.phpИспользуйте его в своём резюме.dynamic_sidebar( 'sidebar-1' )Пришло время вызвать эту функцию/процедуру для работы с данной областью.

Оптимизация шаблонных компонентов и циклов

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

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

Разделение компонентов шаблона

Создатьheader.php、footer.phpиsidebar.phpДокумент. Отправитьindex.phpПереместите соответствующие фрагменты кода туда, куда они должны быть. Затем используйте их на их прежнем месте.get_header()、get_footer()иget_sidebar()Функции используются для их включения (т. е. для объединения их кода в единое целое).

Расширенное обработание циклов статей

Основное использование цикловwhile ( have_posts() ) : the_post(); ... endwhile;Однако на странице архива обычно необходимо отображать резюме статей, а не их полный текст. Для этого можно воспользоваться соответствующими инструментами или функциями.the_excerpt()Функция.

Для лучшего контроля над циклами, особенно при использовании пользовательских запросов, вам необходимо понимать…WP_QueryКлассы. Например, на главной странице отображаются только статьи, относящиеся к определенной категории:

<?php
$custom_query = new WP_Query( array(
    'category_name' => 'featured',
    'posts_per_page' => 3,
) );
if ( $custom_query->have_posts() ) :
    while ( $custom_query->have_posts() ) : $custom_query->the_post();
        // 显示文章内容
    endwhile;
    wp_reset_postdata(); // 重置主查询数据
endif;
?>

Помните: после выполнения пользовательского запроса используйте…wp_reset_postdata()Чтобы восстановить глобальные настройки…$postПеременные играют крайне важную роль; в противном случае это может повлиять на корректное отображение последующих компонентов шаблона (например, боковых панелей).

резюме

С момента создания…style.cssиindex.phpНачнем с освоения структуры шаблонов и их использования.functions.phpВы добавили новые функции, разделили компоненты шаблона на более логичные части и оптимизировали алгоритмы работы циклов. Тем самым вы завершили основной этап разработки WordPress-темы. Ключевым моментом является соблюдение стандартов и правил, установленных WordPress – это обеспечивает хорошую совместимость вашей темы с другими модулями и упрощает её обслуживание. На следующем этапе вы можете добавить более подробную метаинформацию к статьям, интегрировать пользовательские типы статей или использовать такие предпроцессоры, как Sass, для управления стилями. Это сделает вашу тему более профессиональной и мощной.

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

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

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

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

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

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

Вам нужно сделать две вещи. Во-первых, оберните все строки, которые необходимо перевести, функцией перевода WordPress. Например:__( ‘文本’, ‘my-theme-textdomain’ )или_e( ‘文本’, ‘my-theme-textdomain’ )И также…style.cssиfunctions.phpВо-первых, необходимо правильно настроить текстовый домен (Text Domain). Затем используйте такие инструменты, как Poedit, для создания шаблона файла в формате .pot, а также соответствующего файла языка в формате .mo. Поместите эти файлы в папку темы (theme folder)./languagesВнутри каталога.

Как правильно включать файлы CSS и JavaScript в процесс разработки тем?

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

```php
function my_theme_scripts() {
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . 'https://www.likacloud.com/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

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

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

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

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

Теги.