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

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

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

Подготовка и настройка окружения

Перед тем, как начать писать код, вам понадобится подходящая среда разработки. Она включает локальную серверную среду (например, XAMPP, MAMP или Local by Flywheel), редактор кода (например, VS Code или PhpStorm) и новую установку WordPress. Убедитесь, что ваша версия WordPress является последней, чтобы иметь возможность использовать новейшие функции и API.

Далее вам необходимо внести изменения в файл functions.php в папке /wp-content/plugins/your-plugin-name/.wp-content/themesСоздайте новую папку в каталоге, название которой будет соответствовать “слагу” вашей темы, например:my-first-themeЭта папка станет местом хранения всех ваших тематических файлов. Самые основные файлы темы WordPress состоят всего из двух:index.phpиstyle.cssСреди них,style.cssЭто не просто таблица стилей, а также “заголовочный файл”, содержащий метаданные темы. Её комментарии крайне важны для того, чтобы WordPress мог распознать вашу тему.

Создайте базовыйstyle.cssДокумент, аннотация в верхней части которого должна содержать следующую информацию:

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

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

Text DomainДля обеспечения интернационализации название папки с темами должно совпадать с названием вашей темы. Кроме того, необходимо создать самую простую из возможных папок.index.phpДокумент должен содержать только одно предложение.<?php get_header(); ?>И с одним…<h1>Привет, мир!</h1>В этот момент в разделе “Внешний вид” -> “Темы” в административной панели WordPress вы должны увидеть свою тему и иметь возможность активировать её. Хотя сейчас она ничего не отображает (поскольку мы её ещё не создали).header.phpОднако это означает, что вы уже успешно сделали первый шаг.

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

Понять, что такое файлы шаблонов и уровни шаблонов.

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

Основные шаблонные файлы включают в себя:
* index.phpЭто конечный шаблон, который будет использоваться для всех запросов, если не удастся найти более конкретный шаблон.
* header.php: Содержащий документы.<head>Части и область заголовка веб-сайта. Черезget_header()Введение функций.
* footer.phpЭто область нижней части веб-сайта. Через неё можноget_footer()Введение функций.
* sidebar.phpЭто включает компонент боковой панели. Через негоget_sidebar()Введение функций.
* functions.phpЭто не шаблонный файл, а “библиотека функций” вашей темы, используемая для добавления функций, регистрации меню, виджетов и т. д.

Для разных типов страниц существуют более конкретные шаблоны:
Одно статья: порядок поиска такой:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。
Статические страницы: порядок поиска такой же, как и у обычных страниц.custom-template.php(Пользовательский шаблон) -> page-{slug}.php -> page-{id}.php -> page.php -> singular.php -> index.php。
Список статей (главная страница блога, страница категорий и т. д.): порядок поиска следующий:home.php(Для страницы со списком статей в блоге) -> front-page.php(Используется для настройки статической страницы в качестве главной страницы) -> index.php。

Создание шаблонов заголовков и футери.

Сначала создайте…header.phpОно должно начинаться с…<!DOCTYPE html>Начнем и включим вызовы ключевых функций WordPress, таких какwp_head()。

Рекомендуемое чтение Индивидуальные премиальные темы WordPress: полное руководство по проектированию, разработке и оптимизации.。

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
</head>
<body no numeric noise key 1004>
    <header>
        <h1><a href="/ru/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
        <nav>
            'primary')); ? &gt;
        </nav>
    </header>

Аналогичным образом, создайте…footer.phpИ убедитесь, что вызывается функцияwp_footer()Функция.

    <footer>
        <p>©  . Все права защищены.</p>
    </footer>
    
</body>
</html>

Теперь вы можете обновить свойindex.phpИспользуйте эти шаблонные элементы.

<main>
    <h1>Привет, мир, из Main!</h1>
    &lt;?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            the_title(&#039;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>No content found.</p>';
    endif;
    ?&gt;
</main>

Расширьте функциональность темы с помощью файла functions.php.

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

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

Добавить поддержку темы и навигационное меню для регистрации.

Прежде всего, давайте включим некоторые основные функции темы. Используйтеadd_theme_support()Функция используется для объявления функциональности, поддерживаемой темой.

<?php
// functions.php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和页面的特色图像功能
    add_theme_support('post-thumbnails');
    // 为文章中的图像添加响应式图片支持
    add_theme_support('responsive-embeds');
    // 添加对HTML5标记的支持
    add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));
}
add_action('after_setup_theme', 'my_first_theme_setup');

Далее необходимо зарегистрировать местоположение навигационного меню. Это позволит пользователям настраивать меню в разделе “Внешний вид” -> “Меню” и использовать его в шаблонах.wp_nav_menu()Функция вызывает его.

function my_first_theme_menus() {
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'my-first-theme'),
        'footer'  => __('Footer Menu', 'my-first-theme'),
    ));
}
add_action('init', 'my_first_theme_menus');

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

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

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

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-script', get_template_directory_uri() . '/js/main.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

\nСоздание цикла и шаблона контента.

“Цикл” — это структура кода PHP в WordPress, используемая для извлечения и отображения статей из базы данных. Она является основой практически всех шаблонов.

Поймите структуру главного цикла.

Выше упомянутое…index.phpВ примере мы уже видели базовый цикл. Давайте разберем его подробнее:

Общий хостинг InterServer
Общий хостинг $2.50 USD в месяц, первый месяц $0.1 USD промо-код tryinterserver, 461 скрипт облачных приложений, установка в один клик.
Логотип InterServer. страница доступа 
<!-- 对于循环中的每一篇文章，我们在这里输出内容 -->
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <h2><a href="/ru/</?php the_permalink(); ?>"></a></h2>
            <?php the_post_thumbnail(); ?>
            <div class="entry-content">
                
            </div>
        </article>
    <?php endwhile; ?>
    <!-- 分页链接 -->
    &lt;?php else : ? &lt;?php else : ?
    <!-- 如果没有文章 -->
    <p><?php _e('Sorry, no posts matched your criteria.', 'my-first-theme'); ?></p>

Создание шаблона для одной статьи.

Теперь давайте создадим шаблон, предназначенный для отображения одной статьи.single.phpЭто более подробно, чем циклическая проверка на странице списка.

<main id="primary">
    <?php
    while (have_posts()) : the_post();
    ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
            <header>
                <h1></h1>
                <div class="entry-meta">
                    <?php
                    printf(
                        __('Posted on %s by %s', 'my-first-theme'),
                        get_the_date(),
                        get_the_author_posts_link()
                    );
                    ?>
                </div>
                <?php the_post_thumbnail('large'); ?>
            </header>
            <div class="entry-content">
                &lt;?php
                // Пагинация, для длинных постов, использующих тег  тег для длинных постов
                wp_link_pages(array(
                    'before' =&gt; '<div class="page-links">' . __('Pages:', 'my-first-theme'),
                    'after' =&gt; '</div>', .
                ));
                ? &gt;
            </div>
            <footer>
                &lt;?php the_tags(&#039;<span class="tags-links">' . __('Tagged: ', 'my-first-theme'), ', ', '</span>'); ? &gt;
            </footer>
        </article>
        
</main>

резюме

Благодаря этому руководству вы завершили основной этап создания базовой темы WordPress с нуля. Мы начали с настройки среды разработки и создания базовых файлов, а затем перешли к изучению системы уровней шаблонов WordPress, которая является основой для создания гибких тем. Вы научились создавать повторно используемые элементы.header.phpиfooter.phpШаблонные компоненты, а также мощные инструменты для их использования…functions.phpДокумент добавляет к вашей теме поддержку ключевых функций, таких как навигационное меню и загрузка стилей. Наконец, мы изучили механизм “циклической обработки” в WordPress и создали шаблоны для отображения списка статей и отдельных статей.

Это всего лишь отправная точка. Далее вы можете изучить возможность создания большего количества специализированных шаблонов (например,page.php, archive.phpЗарегистрируйтесь в разделе инструментов, добавьте пользовательские типы статей и таксономии, а также реализуйте более продвинутый адаптивный дизайн и взаимодействие с JavaScript. Помните, что изучение официальной документации для разработчиков и постоянная практика — лучший способ улучшить свои навыки.

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

Что делать, если после активации моей темы на веб-сайте появился пустой экран (белый экран)?

Это обычно вызвано фатальной ошибкой PHP. Сначала проверьте свой код.functions.phpЕсть ли в файле грамматические ошибки, например, отсутствие запятых или скобок? Откройте WordPress.WP_DEBUGШаблоны могут помочь вам увидеть конкретные сообщения об ошибках. Вwp-config.phpВ документе будет указано, что...define('WP_DEBUG', false);превратиться вdefine('WP_DEBUG', true);。

Как добавить функцию настраиваемого логотипа для моей темы?

Вашемfunctions.phpДокумент былadd_theme_supportЧасть, добавьте строку:add_theme_support('custom-logo');Вы также можете передать массив параметров, чтобы определить размер логотипа и то, является ли его высота гибкой и т. д. После этого пользователи могут загрузить логотип в разделе “Внешний вид” -> “Настройки” -> “Идентификация сайта” и использовать его в шаблонах.the_custom_logo();Функция вызывает его.

Почему навигационное меню, которое я зарегистрировал, не отображается в фоновом режиме?

Проверьте следующее: во-первых, убедитесь, что ваш регистрационный код находится вfunctions.phpОни находятся в папке /sdcard/Download и уже правильно установлены.initКрючок илиafter_setup_themeНа крючке. Во-вторых, убедитесь, что вы правильно определили...theme_location(например.'primary'При вызове…wp_nav_menu()Во-первых, вы должны создать меню, а затем добавить его на свой сайт. Во-вторых, вы должны настроить меню, чтобы оно полностью соответствовало вашим требованиям. В-третьих, после создания меню вам необходимо назначить его определённому месту на сайте в разделе “Внешний вид” -> “Меню” -> “Управление положением”.

Как создать область для виджетов (боковая панель)?

Во-первых, вfunctions.phpИспользуйте это в Китае.register_sidebar()Функция регистрирует область для виджетов. Вам необходимо предоставить массив параметров для определения её идентификатора, названия, описания и т. д. Затем в шаблоне, в котором вы хотите отобразить боковую панель (например, ), вызывайте эту функцию.sidebar.phpВ этом примере используетсяdynamic_sidebar()Вызываем функцию и передаём ей идентификатор виджета. В конце концов, вindex.phpилиsingle.phpВ таких шаблонах используется<?php get_sidebar(); ?>Введите шаблон боковой панели.

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

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

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

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

Теги.