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

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

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

Основные концепции разработки тем для WordPress.

Прежде чем приступать к изучению кода, крайне важно понять основные элементы, из которых состоит тема для WordPress. Тема — это не просто набор файлов на PHP и CSS; это приложение, которое следует определенной структуре и тесно взаимодействует с ядром WordPress. Основой темы является система уровней шаблонов, которая определяет, как WordPress выбирает и отображает соответствующие шаблонные файлы в зависимости от типа страницы, на которую совершен контакт (домашняя страница, страница статьи, страница категории и т. д.).

Основная тема должна включать в себя два файла:style.cssиindex.phpСреди них,style.cssЭто не просто таблица стилей (stylesheet) — это своего рода “идентификационный документ” темы (theme). Блок комментариев в заголовочном файле этой темы содержит такую метаподпись, как название темы, имя автора, описание, версия и другую важную информацию.index.phpЭто файл шаблона по умолчанию; если другие более детализированные файлы шаблонов отсутствуют, WordPress использует именно этот файл.

Контент темы организуется с помощью ряда стандартизированных шаблонных файлов.single.phpДля отображения отдельной статьи.page.phpИспользуется для отображения отдельных страниц.archive.phpДанный элемент интерфейса предназначен для отображения списка архивированных статей. Ключ к его успешному разработческому решению заключается в понимании и эффективном использовании множества встроенных функций, предоставляемых системой WordPress.the_title()、the_content()、wp_head()иwp_footer()Эти функции извлекают данные из базы данных и безопасно отображают их на странице, выполняя роль своего рода моста, соединяющего внешний вид сайта с его содержимым.

Рекомендуемое чтение Как выбрать и настроить подходящую вам тему WordPress?。

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

Давайте начнем с создания минималистичного тематика под названием “MyFirstTheme”, чтобы ознакомиться с процессом разработки. Сначала перейдите в каталог установки WordPress.wp-content/themes/Создайте новую папку и назовите её…myfirsttheme。

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

Создать файл с таблицей стилей

Сначала создайте файл заголовков информации о теме (theme information header file).style.cssЭтот файл содержит метаданные, описывающие тему документа (или проекта, или ресурса).

/*
Theme Name: MyFirstTheme
Theme URI: https://yourdomain.com/
Author: Your Name
Author URI: https://yourdomain.com/
Description: 一个用于学习WordPress主题开发的简洁主题。
Version: 1.0
License: GPL v2 or later
Text Domain: myfirsttheme
*/

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

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

Далее необходимо создать базовые элементы (или компоненты) системы.index.phpФайл. Это вход во всю тему.

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

<main>
        
            <article>
                <h2></h2>
                <div></div>
            </article>
        
    </main>

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

Этот код создает полную структуру HTML5-страницы.wp_head()иwp_footer()Хаки (hooks) позволяют плагинам и темам вставлять код (например, CSS или JS) в верхнюю и нижнюю части страницы.body_class()Функция возвращает список имен CSS-классов, что облегчает создание условных стилей.the_post()Функция устанавливает глобальные переменные во время выполнения цикла.$postПеременная… позволяет это сделать.the_title()иthe_content()Способен корректно выводить данные текущей статьи.

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

Импорт функциональных файлов

Хотя система, содержащая только…style.cssиindex.phpТема уже может функционировать, но полноценная тема, как правило, включает в себя дополнительные элементы и функции.functions.phpЭто не шаблонный файл, а “функциональный плагин” для темы, предназначенный для подключения функций к различным точкам доступа (хакам) в WordPress – таким как действия (actions) и фильтры (filters).

Создатьfunctions.phpФайл, используемый для добавления функций поддержки тем, а также для упорядоченного ввода таблиц стилей и скриптов.

<?php
// 添加主题支持功能
function myfirsttheme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和评论的RSS feed链接
    add_theme_support('automatic-feed-links');
    // 启用文章缩略图（特色图像）
    add_theme_support('post-thumbnails');
    // 添加对HTML5标记的支持
    add_theme_support('html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption'));
    // 注册一个主导航菜单
    register_nav_menus(array('primary' => __('主导航菜单', 'myfirsttheme')));
}
add_action('after_setup_theme', 'myfirsttheme_setup');

// 排队引入样式表
function myfirsttheme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style('myfirsttheme-style', get_stylesheet_uri());
    // 可以引入Google Fonts或其他CSS
    // wp_enqueue_style('myfirsttheme-google-fonts', 'https://fonts.googleapis.com/css?family=...');
}
add_action('wp_enqueue_scripts', 'myfirsttheme_scripts');

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

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

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

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

Использование шаблонных компонентов для разделения кода

\nБудетindex.phpРазделение таких общих элементов, как заголовок страницы, футер и боковые панели, на отдельные файлы-шаблоны является стандартной практикой. Создание таких файлов позволяет легче управлять их содержимым и их использованием в различных частях сайта.header.php、footer.phpиsidebar.php。

\nБудетindex.php\nКитай<body>Переместите весь код, который находится перед тегом, в другое место.header.php…</body>и</html>Весь код, расположенный перед тегами (включая содержимое футера и другие элементы страницы):wp_footer()Переместиться в…footer.phpЗатем,index.phpИспользуйте это в Китае.get_header()иget_footer()Для их использования необходимо ввести соответствующие функции.

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

Изменённыйindex.phpОсновной текст следует ниже:

<main>
    
        <article>
            <h2></h2>
            <div></div>
        </article>
    
        <p><?php _e('抱歉，没有找到任何内容。', 'myfirsttheme'); ?></p>
    
</main>

Создание пользовательского шаблона страницы

WordPress позволяет создавать пользовательские шаблоны для конкретных страниц. Например, вы можете создать шаблон для полноэкранной страницы. Создайте новый PHP-файл.template-fullwidth.phpВ начале файла добавьте следующее примечание с именем шаблона:

Общий хостинг InterServer
Общий хостинг $2.50 USD в месяц, первый месяц $0.1 USD промо-код tryinterserver, 461 скрипт облачных приложений, установка в один клик.
Логотип InterServer. страница доступа 
<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的全宽页面模板
 */
get_header(); ?>
<main class="full-width">
    <?php while (have_posts()) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1004>
            <h1></h1>
            <div class="entry-content">
                
            </div>
        </article>
    <?php endwhile; ?>
</main>

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

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

Вarchive.phpНа странице категорий или списка элементов вам, возможно, потребуется изменить поведение основного цикла программы. Для этого используйте соответствующие инструкции или функции.WP_QueryКлассы могут создавать пользовательские запросы.

// 示例：在模板中查询特定分类下的 sticky 文章
 'news',
    'post__in' =&gt; get_option('sticky_posts'),
    'posts_per_page' =&gt; 3
));
if ($sticky_query-&gt;have_posts()) :
    while ($sticky_query-&gt;have_posts()) : $sticky_query-&gt;the_post();
        // 输出文章内容
        the_title('<h3>', '</h3>');
        the_excerpt();
    endwhile;
    wp_reset_postdata(); // 重置全局$post数据
endif;
?&gt;

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

Оптимизация тематики и лучшие практики

После завершения разработки последним этапом перед публикацией является проверка надежности, безопасности и производительности созданного решения.

Обеспечение безопасности и интернационализации

Все данные, выводимые динамически, должны быть скомпилированы (эскапированы). Для этого используйте функции, предоставляемые WordPress.esc_html()、esc_attr()、esc_url()Для выполнения перевода используйте следующий подход:__()Для выполнения перевода строк используйте соответствующие инструменты или методы._e()Мы уже рассматривали этот вопрос ранее…functions.phpВ тексте уже было указано, что область для ввода текста (текстовое поле) уже настроена.myfirsttheme。

// 正确示例
echo '<a href="/ru/' . esc_url($user_profile_link) . '/">'`.esc_html($user_name)`.'</a>';
// 国际化示例
submit_button(__('保存更改', 'myfirsttheme'));

Добавить область для маленьких инструментов (приложений/утилит).

Раздел с маленькими инструментами (Sidebar) является классической функцией WordPress.functions.phpВ системе была создана область для размещения панельных инструментов (сайдбарных дополнений).

function myfirsttheme_widgets_init() {
    register_sidebar(array(
        'name' =&gt; __('主侧边栏', 'myfirsttheme'),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __('在此添加小工具。', 'myfirsttheme'),
        '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', 'myfirsttheme_widgets_init');

Затем…sidebar.phpВ тексте используется выражение «в использовании».dynamic_sidebar()Функция предназначена для её вызова.

<?php if (is_active_sidebar('sidebar-1')) : ?>
    <aside>
        <?php dynamic_sidebar('sidebar-1'); ?>
    </aside>
<?php endif; ?>

Меры по оптимизации производительности

Оптимизация скорости загрузки темы крайне важна. Убедитесь, что файлы CSS и JavaScript были правильно объединены и сжаты (что обычно выполняется на этапе разработки с помощью инструментов построения кода, таких как Webpack или Gulp).add_image_size()Необходимо указать подходящие размеры изображений, чтобы избежать загрузки слишком больших исходных файлов на пользовательском интерфейсе. Что касается скриптов, их следует использовать только в случаях необходимости.wp_dequeue_script()Удалите необходимый код, и убедитесь, что скрипт загружается в футере страницы (для этого выполните соответствующие настройки).wp_enqueue_script()Последний параметр должен быть установлен на…true）。

резюме

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

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

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

Можно, но для этого потребуется время на изучение основных знаний. Рекомендуем сначала овладеть HTML и CSS – они являются основой для формирования внешнего вида веб-страниц. Затем постепенно изучайте синтаксис PHP, поскольку сама система WordPress написана на этом языке. В конце концов, начните разработку, используя специфические для WordPress функции и механизмы (хаки). Отличным способом обучения будет начало с модификации существующих тем.

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

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

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

Пожалуйста, проверьте, находится ли ваша пользовательская шаблонная файлация в корневом каталоге темы, а также правильно ли сформатирован блок с комментарием о названии шаблона в начале файла. Блок комментариев должен соответствовать стандартам PHP-комментариев, и строка “Template Name:” должна быть указана без ошибок. Кроме того, убедитесь, что файл имеет необходимые расширения и содержит все необходимые элементы для корректного функционирования шаблона..phpПри использовании соответствующего суффикса необходимо также обновить кэш в бэкенде WordPress.

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

Для того чтобы ваша тема могла быть безопасно настроена с использованием подтем (subtopics), во время разработки необходимо соблюдать определенные правила:get_template_directory_uri()Для ссылок на ресурсы родительской темы используется определенный формат; в подтеме же применяется другой формат ссылок.get_stylesheet_directory_uri()Оберните функцию, которую можно скопировать, в…if (!function_exists(‘…’))В условных операторах документ четко указывает, что основная тема поддерживает наличие подтем, а также предоставляется информация о базовых вариантах организации этих подтем.style.cssПример.

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

Настоятельно рекомендуется соблюдать указанные правила/инструкции.Официальный стандарт PHP-кодирования для WordPressиСтандарты кодирования CSSЭто включает в себя использование одинарных кавычек для определения строк (если только не требуется обработка переменных), применение пробелов для форматирования кода, использование новых строк при записи скобок, а также называние функций и переменных с использованием маленьких букв и подчеркиваний. Соблюдение этих правил делает ваш код более понятным для других разработчиков, особенно при планах размещения вашего проекта в официальных репозиториях.

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

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

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

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

Теги.