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

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

Архитектура современных тем для WordPress существенно отличается от традиционных подходов. Основные изменения касаются полного перехода на использование блочных тем (Block Themes) и режима полного редактирования всего сайта (Full Site Editing, FSE). Это означает, что внешний вид и структура темы – от заголовков и футеров до содержимого статей – могут создаваться и изменяться с помощью инструмента редактирования Gutenberg и блоков, без необходимости написания сложных PHP-шаблонов.

Структура основных файлов в рамках современного дизайн-тематики претерпела радикальное упрощение. Самым важным из этих файлов является шаблонный файл.theme.jsonЭтот файл определяет глобальные настройки темы, палитры цветов, форматирования текста и другие аспекты визуального стиля интерфейса. Еще один крайне важный файл…index.htmlОно заменило традиционные методы/инструменты.index.phpВ качестве шаблона по умолчанию используются статические блоки HTML-кода, которые могут быть обработаны редактором, для создания основной структуры страницы.style.cssФайл всё ещё существует и в основном используется для указания информации о теме страницы, однако большинство определений стилей CSS было перенесено в другие места.theme.jsonИли управляется редактором.

Для обеспечения совместимости с более ранними версиями WordPress проверяется наличие определенных файлов в корневом каталоге темы.block-templatesилиtemplatesПапки. Эти папки используются для хранения файлов HTML-шаблонов, основанных на блоках (block-based HTML templates).single.htmlилиpage.htmlЭти элементы будут использоваться в приоритетном порядке по сравнению с PHP-шаблонными файлами. Кроме того, способ обработки стилей и фронтенд-ресурсов, поступающих из тем (тематических разделов сайта), зависит от конкретных настроек системы.wp_enqueue_styleиwp_enqueue_scriptФункции, как правило, находятся в главном файле.functions.phpВы можете зарегистрироваться и встать в очередь здесь.

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

Понимание этого сдвига в подходах к разработке — от создания статичных PHP-шаблонов к использованию JSON и блочных тегов для определения стилей и структуры — является первым шагом на пути к освоению современных методов разработки тематических сайтов.

Ультахост (UltaHost) – хостинг-провайдер, предоставляющий услуги хостинга для сайтов, построенных на платформе WordPress.

Гарантия возврата средств в течение 30 дней, неограниченная пропускная способность интернет-канала и объем баз данных, бесплатная защита от DDoS-атак. При покупке на срок 3 лет предоставляется скидка в размере 501 ТБ до 4 ТБ.

страница доступа

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

Для создания современной темы для WordPress сначала необходимо…wp-content/themesСоздайте новую папку с тематическими материалами в каталоге. Это касается как блочных, так и других типов тематических разделов.style.cssФайл по-прежнему является необходимым “идентификационным” документом, и блок комментариев в его верхней части должен содержать определенную информацию.

/*
Theme Name: 我的现代主题
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 一个使用全站编辑的现代WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-modern-theme
*/

Сразу после этого вам необходимо создать “мозг” для современного тематического дизайна.theme.jsonЭтот JSON-файл находится в корневом каталоге темы и используется для централизованного управления глобальными стилями и настройками темы. С помощью этого файла можно определить параметры системы форматирования (например, размеры и семейства шрифтов), палитры цветов, стандартные стили блоков и т. д. Плагины и подтемы могут дополнительно изменять эти настройки, позволяя создавать индивидуальные стили. Это базовый инструмент для настройки внешнего вида сайта.theme.jsonСтруктура следующая:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "name": "黑色", "slug": "black", "color": "#000000" },
        { "name": "白色", "slug": "white", "color": "#ffffff" }
      ]
    },
    "typography": {
      "fontSizes": [
        { "name": "小", "slug": "small", "size": "14px" },
        { "name": "中", "slug": "medium", "size": "20px" }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "white",
      "text": "black"
    },
    "typography": {
      "fontSize": "var(--wp--preset--font-size--medium)"
    }
  },
  "customTemplates": [
    {
      "name": "宽幅页面",
      "title": "宽幅页面",
      "postTypes": [ "page" ]
    }
  ]
}

Основной шаблон темыindex.htmlБыла определена стандартная структура страницы. Она состоит исключительно из блоковых тегов, обернутых HTML-комментариями, понятными редактором. Например:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-content {"layout":{"type":"constrained"}} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Такая структура четко разделяет заголовок страницы, основной контент и футер, и это обеспечивается с помощью…wp:post-contentСодержимое статей загружается динамически по блокам. В конце необходимо создать в корневом каталоге темы директорию под названием “Template Parts” (Части шаблонов).partsИ поместить его туда.header.htmlиfooter.htmlФайлы с компонентами и другими элементами.

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

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

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

Файлы шаблонов обычно хранятся в папке, связанной с конкретной темой (theme).templatesВнутри папки. WordPress автоматически подбирает соответствующие шаблонные файлы в зависимости от типа запроса. Например,single.htmlПредназначено для отображения отдельной статьи.page.htmlИспользуется для статических страниц.home.htmlилиindex.htmlИспользуется для домашней страницы блога. Вы можете…theme.json\ncustomTemplatesНекоторые шаблоны пользовательских настроек предоставляются для выбора пользователями в редакторе страниц.

Компоненты шаблонов хранятся в следующем месте:partsВ этом папке значительно повышается уровень повторного использования кода и удобство его обслуживания. Создан файл с заголовками страниц (header files).header.htmlВерхнюю часть страницы можно оформить с помощью блока с заголовком сайта, блока навигации и других элементов. Для создания файла футера (нижней части страницы) также необходимо выполнить соответствующие действия.footer.htmlЗдесь можно разместить информацию об авторских правах и раздел с различными маленькими инструментами (приложениями, утилитами).

hosting.com Общий хостинг

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

страница доступа

Типичный…header.htmlВозможно, это будет выглядеть следующим образом:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<header class="wp-block-group">
    <!-- wp:site-title /-->
    <!-- wp:navigation {"ref":4} /-->
</header>
<!-- /wp:group -->

В этом примере…wp:navigationБлоки определяются по своим характеристикам или свойствам.refАтрибуты содержат ссылку на навигационный меню, созданное и сохраненное в разделе “Внешний вид” -> “Редактор” (идентификатор меню — 4). Это демонстрирует преимущества разделения процесса редактирования содержимого и структуры сайта. С помощью таких компонентов, включенных в основной шаблон, можно обеспечить единообразие внешнего вида всего сайта при одновременной гибкости в редактировании отдельныхТогда их можно вставить на страницу.

Для более сложных версток можно воспользоваться различными инструментами и подходами.wp:group、wp:columns、wp:queryДля создания строк, столбцов и циклического контента используются блоки. Например,wp:queryБлоки позволяют динамически отображать последние статьи – это эквивалентно главному циклу в традиционных тематических структурах. Однако теперь всё настраивается полностью с помощью визуального редактора.

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

Добавление функций и стилей с помощью файлов функций

Несмотря на то, что блочные темы во многом зависят от…theme.jsonИ HTML-шаблоны, но…functions.phpФайл по-прежнему является ключевым элементом функционала расширения тем (theme extensions). Это PHP-файл, который не возвращает никаких значений и используется для добавления новых функций, регистрации скриптов стилей, а также для определения поддержки различных тем.

Одной из основных операций является регистрация и добавление в очередь таблиц стилей и скриптов для темы. Даже если основная часть стилей…theme.jsonДля управления сайтом вам, возможно, понадобится дополнительный пользовательский CSS-код.

Общий хостинг InterServer

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

страница доступа

function my_modern_theme_setup() {
    // 添加对特定功能的支持，例如自定义标志
    add_theme_support('custom-logo');
    // 通过区块编辑器添加主题样式
    add_theme_support('wp-block-styles');
    // 添加对全站编辑器的支持
    add_theme_support('editor-styles');
}
add_action('after_setup_theme', 'my_modern_theme_setup');

function my_modern_theme_scripts() {
    // 排队主题的主样式表
    wp_enqueue_style(
        'my-modern-theme-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get('Version')
    );
    // 排队编辑器样式
    add_editor_style('style-editor.css');
}
add_action('wp_enqueue_scripts', 'my_modern_theme_scripts');

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

// 为段落块注册一个“特别提示”样式
register_block_style(
    'core/paragraph',
    array(
        'name'         => 'notice',
        'label'        => __( '特别提示', 'my-modern-theme' ),
        'inline_style' => '.is-style-notice { padding: 1em; border-left: 4px solid #00a0d2; background-color: #f0f8ff; }',
    )
);

Кроме того, вы также можете использовать хаки (hookы).wp_head、wp_footerВставьте пользовательский код, или выполните это другим способом.add_filterМожно изменить поведение по умолчанию при выполнении запросов, а также содержимое отображаемой информации. Для более сложных задач по настройке системы создание небольшого плагина может оказаться более модульным и удобным решением.

Тема тестирования и отладки

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

Во-вторых, необходимо провести тщательное тестирование с использованием редактора Gutenberg. Создайте новые страницы и статьи, попробуйте использовать различные блоки для формирования сложных макетов, проверьте, работают ли инструменты панели управления блоками и настройочные параметры корректно, а также возможности настройки пользовательских стилей (например, с помощью соответствующих функций редактора).theme.jsonБыло ли правильно применено определенное цветовое схема или размер шрифта к соответствующим блокам контента? Особенно важно проверить работу редактора всего сайта (параметры “Внешний вид” -> “Редактор”), попробовать изменить заголовки страниц, футеры, шаблоны главной страницы и т. д., и убедиться, что после сохранения изменений они корректно отображаются на пользовательском интерфейсе.

Отладка является ключевым этапом в современном процессе разработки программного обеспечения. Откройте инструменты разработчика в браузере (нажмите клавишу F12) и проверьте, нет ли ошибок в JavaScript или конфликтов в коде CSS.wp-config.phpУстановите его на своём телефоне.define('WP_DEBUG', true);На странице можно отображать предупреждения и ошибки PHP, что помогает быстро выявить проблемы в коде. Также важно убедиться, что используемая тема соответствует стандартам кодирования WordPress, а также проверить наличие ошибок в HTML-структуре с помощью инструмента W3C Validator в консоли.

Наконец, необходимо провести тестирование на совместимость с различными браузерами (Chrome, Firefox, Safari, Edge) и устройствами (настольные компьютеры, планшеты, смартфоны) с целью обеспечения единообразного пользовательского опыта для всех пользователей.

резюме

Современное развитие тем для WordPress представляет собой новую эру в подходах к их созданию: процесс разработки сместился от написания процедурных PHP-шаблонов к использованию более гибких и удобных инструментов.theme.jsonДекларативный подход к разработке, основанный на использовании блочных тегов и возможностях общей редактировки всего сайта. Разработчики должны в совершенстве овладеть этими инструментами.theme.jsonИспользуйте настройки для определения общего стиля страницы, применяйте шаблоны HTML-блоков для создания структуры страницы, и…functions.phpПроизводится улучшение функциональности. Этот подход значительно снижает сложность настройки пользовательских интерфейсов, предоставляя создателям контента большую свободу в дизайне; однако от разработчиков также требуется глубокое понимание системы блочного редактора. Следуя вышеописанному пути развития навыков, вы сможете создавать гибкие, мощные и современные темы для WordPress.

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

Для работы с темой разработочного блока #### требуются знания PHP?
Да, это по-прежнему необходимо. Хотя основная структура страницы определяется HTML-шаблонами,functions.phpФайлы по-прежнему играют важную роль при добавлении функций для работы с темами, регистрации скриптов стилей, а также при глубокой настройке системы с использованием хуков и фильтров. Кроме того, знания PHP крайне необходимы при создании динамических компонентов шаблонов, основанных на пользовательских запросах, или при решении сложных бизнес-задач.

Могут ли блочные темы сосуществовать с традиционными темами?

Можно. WordPress автоматически определяет тип используемого тематического файла. Если в корневом каталоге вашей темы находятся необходимые файлы…theme.jsonФайлы и…templates/partsБлок-шаблоны, находящиеся в папке, будут распознаны WordPress как блок-темы, и функция полноценного редактирования контента на всем сайте будет активирована. Однако, даже при наличии этих файлов, система сохраняет возможность использования традиционной системы PHP-шаблонов в качестве резерва. Если блок-шаблон, соответствующий полученному запросу, отсутствует, система автоматически переключится на использование соответствующего PHP-шаблона.single.php）。

Как добавить пользовательский CSS-код к теме блока?

Существует три основных способа. Наиболее рекомендуемым является следующий:theme.jsonДокумент былstylesЧасть добавленных стилей (CSS-правил) влияет на весь сайт или на определенные блоки его содержимого. Кроме того, их можно настроить в соответствии с параметрами используемой темы (theme settings).style.cssВ файле можно добавить дополнительные правила стилей. Для более динамичных или специфических случаев форматирования страниц также можно использовать соответствующие методы.functions.phpИспользуйте это в Китае.wp_add_inline_styleДобавьте пользовательские стили внутри функций или прямо для определённых блоков кода.

Существуют ли риски для существующего веб-сайта при использовании режима полного редактирования всего сайта?

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