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

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

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

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

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

style.cssФайл содержит не только CSS-правила, но и блоки комментариев в его заголовочной части, в которых определены метаданные темы: название темы, автор, описание и версия. Именно на основе этих данных WordPress распознаёт используемую тему. Например, пример базовых комментариев в заголовочной части файла может выглядеть следующим образом:

/*
Theme Name: My First Custom Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: A clean, custom-built WordPress theme for learning.
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Помимо основных файлов, типичная структура темы также включает в себя:header.php(Кивает головой)footer.php(В нижней части сайта)sidebar.php(Боковая панель) Иfunctions.php(Файлы функций тематических функций). Необходимо понять, как использовать эти файлы с помощью тегов шаблонов (например,…)get_header(), get_footer()Модульное объединение элементов является ключом к эффективному разработческому процессу.

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

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

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

Ультахост (UltaHost) – хостинг-провайдер, предоставляющий услуги хостинга для сайтов, построенных на платформе WordPress.
Гарантия возврата средств в течение 30 дней, неограниченная пропускная способность интернет-канала и объем баз данных, бесплатная защита от DDoS-атак. При покупке на срок 3 лет предоставляется скидка в размере 501 ТБ до 4 ТБ.
UltaHost ЛОГО страница доступа

Создание основного файла стилей (CSS-файла)

Как уже подчеркивалось ранее,style.cssЭто необходимо. Создайте этот файл в папке с тематикой и заполните все необходимые поля, содержащие информацию о теме сайта. Затем вы сможете начать написание базового кода CSS для определения внешнего вида сайта. Чтобы избежать влияния стандартных настроек браузеров, обычно рекомендуется сначала сбросить их стильные настройки (т. е. использовать базовый шаблон стилей).

/* 在 style.css 的头部注释块之后 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
}

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

Далее необходимо создать…index.phpЭто стандартный, наиболее важный шаблон. Его первоначальная структура должна включать вызовы элементов, отвечающих за заголовок страницы, цикл отображения контента и нижнюю часть страницы. Шаблонные теги – это встроенные функции WordPress, предназначенные для вставки динамического контента.
Очень простой.index.phpИсходная версия может выглядеть следующим образом:

<main id="primary" class="site-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>

Разбиение шаблона на части: верхняя часть, нижняя часть и боковая панель

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

Реализация шаблона для головной части сайта

Создатьheader.phpЭтот файл содержит заголовочную часть (header) HTML-документа.доЧасть кода, отвечающая за отображение заголовков тегов, а также навигационная область в верхней части веб-сайта. Ключевые теги шаблона включают…bloginfo()Для получения информации о сайте, а также…wp_head()Хук (hook) позволяет плагинам и темам вставлять код в определённые места кода.
Основнойheader.phpПример:

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

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

<header class="site-header">
    <div class="site-branding">
        <h1 class="site-title"><a href="/ru/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p class="site-description"><?php bloginfo('description'); ?></p>
    </div>
    <nav class="main-navigation">
        'primary',
            'menu_id'        =&gt; 'primary-menu',
        ));
        ?&gt;
    </nav>
</header>

Реализация шаблона нижней части сайта

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

<footer class="site-footer">
    <p>©  . Все права защищены.</p>
</footer>

</body>
</html>

Улучшение функционала тем и возможностей их настройки (кастомизации)

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

Функции, поддерживаемые при регистрации темы:

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

hosting.com Общий хостинг
Высокая производительность благодаря процессорам AMD EPYC, SSD-накопителям NVMe и LiteSpeed, круглосуточная экспертная поддержка, передовые меры безопасности, включая SSL, защиту от грубой силы, вредоносных программ и DDoS, экономия до 73%
ЛОГОС hosting.com страница доступа 
<?php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和评论的RSS feed链接
    add_theme_support('automatic-feed-links');
    // 启用文章特色图像
    add_theme_support('post-thumbnails');
    // 注册一个主菜单
    register_nav_menus(array(
        'primary' => __('主菜单', 'my-first-theme'),
    ));
}
add_action('after_setup_theme', 'my_first_theme_setup');
?>

Добавьте их в стилевую таблицу и скрипты.

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

function my_first_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style('my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));
    // 排入主JavaScript文件
    wp_enqueue_script('my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

резюме

С момента создания папки с темами…style.cssНачать, затем перейти к созданию (Build).index.phpРазложить на составляющиеheader.phpиfooter.phpДанные шаблонных файлов затем используются для создания конечного результата (например, веб-страницы или приложения).functions.phpФайл содержит основные функции и ресурсы, необходимые для создания вашей темы для WordPress. Этот процесс составляет основную структуру разработки таких тем. Каждый шаг подробно объясняет концепцию иерархии шаблонов WordPress, а также рекомендуемые практики их использования (например, правильное применение тегов и хуков). Овладев этими основами, вы получите прочную базу для настройки и расширения функций темы в соответствии с потребностями различных проектов.

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

Сколько минимум файлов требуется для создания темы WordPress под названием ###?
Для функционирования темы WordPress достаточно как минимум двух файлов:index.phpиstyle.cssСреди них,style.cssБлок комментариев в верхней части файла должен присутствовать и содержать корректную информацию о теме; это обязательное условие для распознавания темы в WordPress.

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

Как добавить область с маленькими инструментами к моему тематическому разделу (тематическому блогу или сайту)?

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

Почему мой пользовательский навигационный меню не отображается?

Обычно это происходит потому, что не было выполнено необходимое действие (например, не были собраны необходимые данные или не был выполнен определенный процесс).functions.phpПожалуйста, правильно зарегистрируйте адрес вашего ресторана. Убедитесь, что вы использовали все необходимые данные.register_nav_menus()Функция предназначена для регистрации места размещения блюда (например, ‘primary’) и…header.phpВызов внутри…wp_nav_menu()В то время…‘theme_location’Значения параметров полностью совпадают с теми, что были указаны при регистрации. В конце необходимо также в настройках WordPress (в разделе “Внешний вид > Меню”) назначить определенное меню для использования в этом месте.

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

我应该在什么时候使用get_template_part()函数？

get_template_part()Функции предназначены для модульной организации кода, позволяя повторно использовать его фрагменты. Они особенно полезны при выводе контента различных форматов в циклах статей. Например, вы можете создать функцию, которая будет обрабатывать и форматировать данные автоматически.content.phpВ файле определяется общая HTML-структура каждой статьи, после чего…index.phpИспользуется в цикле.get_template_part(‘content’)Для его использования достаточно выполнить соответствующий вызов. Это повышает уровень повторного использования кода и его удобство в обслуживании, а также позволяет создавать более профессиональные шаблоны.content-page.phpЭто стало возможным благодаря…

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

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

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

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

Теги.