Начиная с нуля: Полное руководство по созданию профессионального подтемы для WordPress

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

Зачем вообще использовать подтемы (subtopics)?

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

Данный вопрос решается с помощью механизма “перекрытия” (override) в подтемах. При отображении страницы WordPress сначала ищет соответствующие шаблоны в каталоге подтемы. Если такие шаблоны найдены, используется версия, предусмотренная подтемой; в противном случае система автоматически возвращается к версии шаблонов, предусмотренной основной (родительской) темой. Благодаря этому вы можете изменять только те элементы страницы, которые вам необходимо, оставляя остальную часть страницы под управлением обновлений и обслуживания основной темы.

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

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

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

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

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

Основная структура создания подтемы:

Создание подтемы (subtopic) очень просто — для этого достаточно двух базовых файлов: таблицы стилей (stylesheet) и файла с функциями (function file). Сначала вам необходимо… /wp-content/themes/ В каталоге создается новая папка, которая обычно называется “имя_родительской_темы-дочерняя”, например: twentytwentyfour-child。

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

Суть подтемы заключается в её файле стилей (stylesheet file). style.cssЭтот файл содержит не только правила CSS, но что более важно – комментарии в заголовочной части файла, которые указывают WordPress, что это подтема, а также имя её родительской темы.

/*
 Theme Name:   Twenty Twenty-Four Child
 Theme URI:    https://example.com/twentytwentyfour-child/
 Description:  Twenty Twenty-Four Child Theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentyfour
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentytwentyfour-child
*/

Среди них,Template: Эта строка крайне важна: её значение должно полностью совпадать с именем каталога родительской темы (с учётом регистра букв). Именно на основе этого WordPress определяет отношения между родительской и дочерней темами.

Импорт стилей из родительской таблицы стилей

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

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

<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
function my_child_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' ),
        wp_get_theme()->get('Version')
    );
}
?>

get_template_directory_uri() Функция получает URL каталога родительской темы. get_stylesheet_directory_uri() Для получения URL-адреса каталога текущей активной темы (подтемы) используется массив зависимостей. array( 'parent-style' ) Убедитесь, что стили подтем загружаются после стилей родительской темы, чтобы ваши собственные правила CSS могли корректно переопределять стили родительской темы.

Расширение функций подтем (subtopics)

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

Пользовательские функции веб-сайта

Например, вы можете захотеть добавить на сайт новый пользовательский тип статьи под названием “Проект”. Для этого можно воспользоваться настройками подтем (subtopics). functions.php Зарегистрируйте его в файле.

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

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

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

add_action( 'init', 'register_project_post_type' );
function register_project_post_type() {
    $args = array(
        'public'      => true,
        'label'       => '项目',
        'has_archive' => true,
        'supports'    => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
        'menu_icon'   => 'dashicons-portfolio',
    );
    register_post_type( 'project', $args );
}

Кроме того, вы также можете удалить некоторые ненужные функции родительской темы. Например, если родительская тема добавила футер-инструменты, которые вам не нужны, вы можете воспользоваться соответствующими настройками для их удаления. remove_action() Чтобы его убрать, предположим, что родительская тема находится здесь (то есть в определенном месте или в рамках системы). init Используется на крючке. parent_theme_footer_widgets К функции был добавлен небольшой инструмент (приложение/дополнение); вы можете удалить его следующим образом:

add_action( 'after_setup_theme', 'remove_parent_theme_features', 15 );
function remove_parent_theme_features() {
    remove_action( 'init', 'parent_theme_footer_widgets' );
}

Обратите внимание: здесь используется… after_setup_theme Крючок (hook) и установленная более высокая приоритетность (например, 15) используются для того, чтобы гарантировать, что код родительской темы (parent theme) будет выполнен перед выполнением кода дочерней темы (child theme). add_actionТаким образом, у нас… remove_action Это сможет сработать только в определённых условиях.

Заменить файл шаблона родительской темы.

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

Рекомендуемое чтение Раскройте свой потенциал: изучите основные технологии и лучшие практики для создания профессиональных тем WordPress.。

Для более детального контроля вы даже можете переопределить элементы шаблона (Template Parts) или конкретные блоки шаблона. Например, чтобы изменить отображение метаданных статьи, достаточно скопировать и изменить соответствующие элементы из родительской темы. template-parts/content-post-meta.php Файл должен быть помещен в ту же папку, что и подтема.

Расширенные приемы разработки подтем (subtopics)

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

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

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

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

Реализация локализации текста

Чтобы ваша подтема поддерживала несколько языков, необходимо правильно настроить текстовые поля (Text Fields) и использовать функции перевода. style.css Заголовок и… functions.php Первым шагом является загрузка текстового поля.

В functions.php В тексте используется выражение «в использовании». load_child_theme_textdomain Функция:

add_action( 'after_setup_theme', 'child_theme_localization_setup' );
function child_theme_localization_setup() {
    load_child_theme_textdomain( 'twentytwentyfour-child', get_stylesheet_directory() . '/languages' );
}

Затем, в местах, где необходимо выполнить перевод текста, используйте такие инструменты или методы, как… esc_html__( 'Your Text', 'twentytwentyfour-child' ) Такой функциональный “обёрток” (function wrapper) позволяет легко организовать структуру кода. Затем вы можете использовать инструменты вроде Poedit для генерации необходимого кода. .po и .mo Переведите файл и сохраните его в подтеме. /languages/ Каталог.

Безопасно изменять ключевые функции

Иногда возникает необходимость изменить сложную функцию в родительской теме, но эта функция не предоставляет достаточной гибкости благодаря использованию хуков (hooks). Однако если функция является “плагиноподдерживаемой” (pluggable), то её можно модифицировать без проблем. if ( ! function_exists( ... ) ) Пакет… Тогда вы можете использовать это в рамках подтемы (subtopic). functions.php Можно прямо заново объявить эту функцию внутри кода, тем самым полностью заменив её существующее определение.

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

резюме

Создание подтем для WordPress является важным навыком, который должен овладеть каждый профессионал. Это позволяет создавать безопасные и устойчивые решения для настройки внешнего вида сайта, при этом ваш собственный код четко отделяется от основного кода темы. Начиная с создания файла, содержащего необходимые заголовки (headers),… style.css и загружающих стилей functions.php Начиная с создания шаблонов, расширения функционала сайта, а затем переходя к настройкам локализации и более сложным формам изменения внешнего вида сайта, каждый шаг согласуется с рекомендациями WordPress. Постоянное использование подтем (subthemes) является надежной основой для того, чтобы ваш сайт оставался современным на протяжении многих лет и при этом сохранял свой уникальный дизайн и функциональность.

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

Каковы требования к названиям папок с подтемами?

Имена папок с подтемами не подлежат строгим ограничениям, однако для лучшей читаемости и понятности рекомендуется использовать формат “название родительской темы-подтема”. Например: astra-childКлючевой момент заключается в том, что… style.css В заголовке файла… Template: Это поле; его значение должно полностью совпадать с именем папки родительской темы (с учетом регистрации букв). В противном случае WordPress не сможет правильно установить отношения между родительской и дочерней темами.

Поддерживается ли создание подтем для всех родительских тем?

Подавляющее большинство современных тем, соответствующих стандартам кодирования WordPress, полностью поддерживают использование подтем (subthemes). Теоретически любая тема может служить родительской темой (parent theme). Однако некоторые плохо спроектированные или устаревшие темы могут приводить к проблемам при использовании подтем из-за использования абсолютных путей к ресурсам или отсутствия необходимых шаблонов. Перед выбором родительской темы разумно ознакомиться с её документацией или отзывами пользователей.

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

Во-первых, в вашем локальном или тестовом окружении создайте новую подтему на основе неизмененной оригинальной родительской темы. Затем подробно сравните изменения, внесенные вами в файлы родительской темы, с их оригинальными версиями. Организованно перенесите эти изменения (которые могут касаться кода CSS, PHP или HTML) в соответствующие файлы новой подтемы: код CSS следует поместить в файлы подтемы. style.cssФункциональный код следует разместить в соответствующем месте программы. functions.phpИзмененные файлы шаблонов копируются в каталог подтемы, после чего на них производятся необходимые изменения. Это довольно тщательный процесс, но он позволяет избежать дальнейших проблем с настройками.

Могут ли подтемы (subtopics) повлиять на скорость работы веб-сайта?

Правильно созданные подтемы практически не влияют на скорость работы веб-сайта. Дополнительные файлы CSS и JS, как правило, занимают небольшое место в размерах данных, и при правильной последовательности их загрузки их можно эффективно объединять и кэшировать. Основные накладные расходы при использовании подтем могут возникать из-за… functions.php В код подтемы была добавлена сложная PHP-логика. Поэтому важно сохранять код подтемы простым и эффективным – это те же принципы, которых придерживались при разработке основной темы. Рациональное использование технологий кэширования может дополнительно снизить возможное влияние на производительность.