Как создать дочернюю тему wordpress

Как создать дочернюю тему WordPress?

Переходим к практике и давайте посмотрим, как можно работать с дочерними темами WordPress на реальном примере и посмотрим, какой основной смысл и принципы работы этого инструмента.

В видео я открыл тестовый сайт WordPress. Давайте представим, что в активной теме нам понадобилось поменять оформление какого-либо элемента.

Конечно, мы можем перейти в папку с активной темой, открыть нужный шаблон или файл стилей css и исправить его содержимое. Все будет работать нормально, но это будет до тех пор, пока мы не обновим нашу текущую тему.

Как только мы ее обновим, все изменения у нас станут недоступными.

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

Официальную документацию по дочерним темам WordPress можно найти здесь:

Это официальная документация от разработчиков тем WordPress.

Для того, чтобы создать дочернюю тему WordPress, нам нужно создать для нее папку. Название папки такое же как у активной темы, только в конце, через знак тире можно добавить слово child. Чтобы легче было ориентироваться. Но, вы можете назвать этот как вам будет удобно.

Единственный обязательный файл для дочерней темы — это файл style.css. Его и нужно создать в файле новой дочерней темы, которую вы создаете.

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

/* Theme Name: Twenty Ten Child Template: twentyten */

Имя темы вы можете указать произвольно. Далее можно перейти в раздел Внешний вид — Темы и активировать дочернюю тему.

Если мы сейчас обновим страницу в браузером со страницами нашего сайта, вы можете увидеть ситуацию, что слетели все стили.

Дело в том, что файл дочерней темы style.css перетер все содержимое, которое имелось в родительской теме в файле style.css.

Для того, чтобы устранить эту проблему, предлагается решение импорта всего содержимого из файл style.css родительской темы.

@import url("../имя_родительской_темы/style.css");

Имейте ввиду, что строка импорта стилей CSS должна идти самой первой перед всеми стилями в файле style.css.

Т.е. мы импортируем все стили из файла style.css родительской темы в файл style.css дочерней темы.

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

Хотя у нас активная дочерняя тема и в ней имеется на данный момент только один файл style.css, эта тема заимствовала все файлы, которые есть в родительской теме.

Это основы создания дочерней темы WordPress. Попробуйте тоже добиться такого же эффекта у себя.

Дмитрий Ченгаев ��
Занимаюсь заказной веб-разработкой. Подписывайтесь на телеграм канал https://t.me/dchengaev 😉

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Верстка, HTML и CSS.

• Быстрый старт в HTML для начинающих.
• Фундамент CSS. Значения.
• Блочная и строчная модель CSS.
• Основы позиционирования элементов. CSS.
• Фундамент CSS. Основы и выборка элементов (селекторы).
• Позиционирование на Flexbox в CSS.
• Ускоренная верстка веб-страниц с помощью фреймворка Bulma.
• Работа с медиа-запросами в CSS.

• Вводный курс Javascript.
• Javascript. Работаем с HTML и CSS (DOM).
• Javascript. Работа с событиями.
• Библиотека. React dnd. Drag and drop.
• Разработка расширений Google Chrome

• Базовый курс Vue.js
• Vue. Компоненты.
• Вопросы установки и подключения Vue.js
• Composition API компоненты Vue.js
• Библиотека Vue.Draggable
• Центральное хранилище Vuex
• Система аутентификации Vue.js
• Базовые компоненты форм Vue 3.
• Таблицы Vue 3. vue3-easy-data-table
• Vee-validate 4. Валидация форм Vue 3.
• Работа с Ant Design Vue
• Разное Vue.js

Серверная часть веб-разработки.

• Основы языка SQL.
• Локальные хранилища браузеров.
• Разворачиваем PHP, Apache, MySQL на Ubuntu 22
• Firebase. Realtime database. Работа на PHP.
• Основы Redis для веб-разработчиков
• Базы данных
• API. Основы работы.
• Composer.
• Веб-сервер Apache.
• Серверная часть разработки. Разное.

• Язык программирования PHP. Основы.
• Объектно-ориентированное программирование на PHP.

• Быстрый старт в Symfony 6
• Шаблонизатор Twig в Symfony.
• Symfony. Работа с переменными окружения.
• Symfony. Работа с сервисами и бандлами (bundles).
• Symfony. Работа с базой данных. Основы.
• Symfony. Работа с базой данных. Связи.
• Symfony 6. Аутентификация пользователей через login форму.
• Наследование сущностей Doctrine (на примере Symfony)
• Symfony. Создание API-платформы.
• Symfony. API Platform. Фильтры.
• Основы работы с файлами в Symfony на примере загрузки изображений.
• Работа с бандлом Doctrine Extensions.
• Symfony. Работа с формами.
• Админка на EasyAdmin в Symfony
• Query Builder
• Docker для Symfony
• Deploy. Symfony.
• Symfony 6. Связка с Vue приложением.
• Symfony. Практика работы с многоязычными сайтами.
• Слушатели и подписчики событий Symfony
• Mercure Hub и Symfony
• Symfony. HttpClient.
• Symfony. Тесты.
• Symfony Messenger. Работа с очередями сообщений.

• Быстрый старт в Laravel
• Переменные окружения в Laravel
• Основы работы с базой данных в Laravel

Техническая сторона веб-аналитики сайтов.

• Яндекс Метрика для начинающих. Основы.
• Яндекс.Метрика. Работа с целями.
• Google Tag Manager.
• Аналитика сайтов. Разное.

• Основы работы с WordPress
• Дочерние темы WordPress. Правки, которые сохраняются при обновлении.
• Иерархия шаблонов WordPress
• Минимальная тема WordPress своими руками.
• Произвольные поля WordPress.
• WordPress. Работа с базой данных.
• Шорткоды (shortcodes) WordPress.
• WordPress. Разное.

SEO и продвижение сайтов.

• Полезные инструменты для веб-разработчиков
• Git. Система контроля версий.
• Текстовый редактор vi (vim).
• Командная строка unix-подобных систем
• Операционные системы для веб-разработчика.
• Gulp
• GitHub
• Плагин Emmet
• PhpStorm
• Консоль браузера. Эффективная работа.
• Основы Docker для веб-программистов.
• Insomnia. API (REST) клиент.

• Автоматизация веб-проектов
• Услуги по WordPress
• Услуги. Веб-аналитики.

• API. Яндекс.Метрика.
• Logs API. Яндекс.Метрика.
• Работа с API amocrm с PHP и Python. OAuth 2.
• Работа с сервисами Яндекс.Облака
• API.Ozon.

Google Apps Script

• Принципы программирования
• Теория архитектуры MVC.

Дочерние темы WordPress

Дочерняя тема WordPress (подтема) — это дополнительная тема, которая позволяет изменять/дополнять функции и внешний вид основной темы. При этом основная тема остается не тронутой, а значит её можно обновлять, не опасаясь, что внесенные изменения потеряются. Дочерняя тема — это тема созданная на основе родительской. «На основе» значит, что если запрашиваемого файла темы нет, он будет взят из родительской темы: родительская тема как бы страхует дочернюю тему. С технической стороны, при создании дочерней темы, она становится основной, а родительская дополняющей темой.

Оглавление:

• Создание дочерней темы
• Файл style.css
• Файл functions.php
• Файлы шаблона
• Как это работает: шаг за шагом
• Локализация подтем
• Функции WordPress связанные с дочерними темами
• Заметки

Зачем нужна дочерняя тема?

Дочерние темы нужны для того, чтобы разработчики тем могли обновлять/улучшать свои темы, а пользователи могли обновлять темы и не терять при этом внесенные изменения.

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

Что можно изменить в дочерней теме?

В ней можно изменить практически все, но нужно понимать что и как работает (см. ниже). Однако, чтобы изменять некоторые вещи, родительская тема должна быть создана с учетом возможных изменений. Если разработчик родительской темы, не продумывает возможные изменения, то изменить некоторые моменты будет или сложно, или невозможно.

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

Создание дочерней темы

Создать подтему легко! Ниже создается дочерняя к twentyfifteen тема.

1. Создайте папку с любым названием в каталоге тем: wp-content/themes . Пусть twentyfifteen-child
2. Создайте в новой папке файл style.css . С содержимым:

/** * Theme Name: Моя дочерняя тема * Template: twentyfifteen * * Не обязательные параметры: * Theme URI: http://example.com/ * Description: Дочерняя тема для темы twentyfifteen * Author: Kama * Author URI: http://example.com/about/ * Version: 1.0 */ /* импортируем стили родительской темы */ @import url(«../twentyfifteen/style.css»); /* Свои дополнительные стили */ .foo

Обязательно нужно указать строку Template: twentyfifteen , (строка регистрозависима) она указывает что это подтема темы twentyfifteen.

Директива @import должна быть первым правилом в style.css . Если написать правила перед ней, то она не сработает и стили родительской темы не подключаться.

Директива @import сильно замедляет загрузку страницы, поэтому стили родительской темы лучше подключать иначе.

В результате у нас должна получиться такая структура:

wp-content └── themes ├── twentyfifteen (родительская тема) └── twentyfifteen-child (подтема; может иметь любое название) └── style.css

twentyfifteen-child может содержать и другие файлы, среди них:

• style.css — (обязательный) полностью заменяет такой же файл родительской темы.
• functions.php — дополняет functions.php родительской темы (загружается перед ним).
• файлы шаблона — index.php , home.php и т.д., которые есть/нет в родительской теме. Если файл есть в дочерней теме, то этот файл полностью заменит родительский файл. Например: создав footer.php и скопировав в него содержимое footer.php из родительской темы, мы можем изменять вывод, не меняя файл родительской темы.
• другие файлы — любые другие файлы/папки/что угодно. Например, подтема может использовать новые изображения, которые подключаются в дополнительных CSS правилах.

Файл style.css

style.css — единственный обязательный файл в подтеме. Дает информацию WordPress, чтобы опознать дочернюю тему.

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

В информационном заголовке, который должен быть в начале файла, является обязательным параметр Template: . Именно по нему WP понимает, что это дочерняя тема и как называется родительская.

Пример style.css дочерней темы.

/** * Theme Name: Моя дочерняя тема * Template: twentyfifteen * Theme URI: http://example.com/ * Description: Дочерняя тема для темы twentyfifteen * Author: Kama * Author URI: http://example.com/about/ * Version: 1.0 */ // стили родительской темы @import url(«../twentyfifteen/style.css»); // дополнительные стили .foo

• Theme Name — (обязательно) название дочерней темы.
• Template — (обязательно) регистрозависимое название папки родительской темы.

Заметка: при изменении нужно сбросить настройку, для этого нужно переключится на другую тему и вернуться обратно.

Файл functions.php

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

Т.е. в случае дочерней темы, в PHP подключаются и работают оба файла functions.php дочерней и functions.php родительской темы.

Это значит, что для изменения родительской темы, в functions.php можно использовать хуки и можно «переопределять» функции, если они на это рассчитаны в functions.php родительской темы.

Использование хуков

В файле footer.php в теме twentyfifteen есть событие twentyfifteen_credits . Чтобы добавить свой текст в подвал, можно использовать это событие, для этого добавим следующий код в functions.php дочерней темы:

add_action( 'twentyfifteen_credits', function() < echo 'Компания © 2015'; >);

Переопределение функции

В файле functions.php родительской темы twentyfifteen есть функция twentyfifteen_fonts_url() — регистрирует шрифты google. Выглядит она так:

if( ! function_exists( 'twentyfifteen_fonts_url' ) ) < function twentyfifteen_fonts_url()< // код функции . >>

Условие ! function_exists(‘twentyfifteen_fonts_url’) — если функция не существует, позволяет определить такую же функцию в functions.php дочерней темы.

В этом случае срабатывать будет только наша, определенная функция, а не функция из родительской темы — она не зарегистрируется в PHP из-за условия.

Например, добавив такой код в functions.php дочерней темы, мы отключим подключение шрифтов:

function twentyfifteen_fonts_url()

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

if( ! function_exists('theme_function') ) < function theme_function() < // Код. >>

В этом случае, дочерняя тема может переопределить функцию родительской темы просто объявив ее в своем functions.php .

Файлы шаблона

В дочерней теме можно использовать все те же файлы темы, что и в любой теме WP. Полный список читайте в статье «Иерархия шаблонов темы».

Файл шаблона в дочерней теме как и style.css , заменяет файл родительской темы. Т.е. в подтеме можно заменить любой родительский файл, просто создав файл с таким же названием.

Несколько примеров создания файла шаблона в дочерней теме:

#1 Добавление шаблона, отсутствующего в родительской теме

Создадим шаблон для страницы «карта сайта». Для этого в подтеме создадим файл page-sitemap.php, а на сайте создадим страницу с ярлыком sitemap . Готово!

#2 Изменение шаблона, имеющегося в родительской теме

Допустим, у нас есть home.php в родительской теме и нам нужно его изменить.

1. Создаем home.php в подтеме.
2. Скопируем в него код файла из родительской темы.
3. Изменим скопированный код как нужно.

Как это работает: шаг за шагом

Процесс работы дочерней темы со стороны WordPress:

1. WP открывает style.css темы установленной в настройках системы и считывает заголовки.
2. Директива Template: объявляет что у темы есть родительская тема и указывает её название. Теперь WP работает с темой как с дочерней.
3. Дальше все файлы, кроме functions.php , подключаются с помощью locate_template(): проверяет существует ли файл в подтеме, если не существует, то подключается из родительской темы.

Наличие родительской темы у дочерней записывается в опцию сайта template . Например если у дочерней темы есть опция template=basetheme , то тема basetheme будет родительской для текущей темы.

Такая связь устанавливается при активации темы.

Локализация подтем

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

Для подключения есть спец. функция: load_child_theme_textdomain(). Используем её в functions.php подтемы:

add_action( 'after_setup_theme', 'my_child_theme_setup' ); function my_child_theme_setup() < load_child_theme_textdomain( 'my_child_theme', get_stylesheet_directory() . '/languages' ); >

Также, нужно создать файл перевода в дочерней теме: languages/en_US.mo .

Теперь можно использовать функции локализации WordPress в подтеме:

_e( 'Это нужно перевести на англ.', 'my_child_theme' );

Так, для дочерней темы у нас будут отдельные файлы перевода, а для родительской будет использоваться родные файлы.

Функции WordPress связанные с дочерними темами

• get_stylesheet_directory_uri() — получает URL текущей темы (дочерней, не родительской).
• get_template_directory_uri() — получает URL текущей темы (родительской, не дочерней).
• get_stylesheet_directory() — получает путь до текущей темы (дочерней, не родительской).
• get_template_directory() — получает путь до текущей темы (родительской, не дочерней).
• get_stylesheet() — получает название каталога текущей темы (дочерней, не родительской).
• get_template() — получает название каталога текущей темы (родительской, не дочерней).
• get_stylesheet_uri() — получает готовый URL на файл стилей style.css текущей темы. Если используется дочерняя тема, то получит ссылку на стили доч. темы. В этом случае для родительской темы такой функции в WordPress нет.

Т.е. если нужно получить ссылку на файл темы, но при этом используется дочерняя тема, то УРЛы от: get_stylesheet_directory_uri() и get_template_directory_uri() буду отличаться: первый будет на дочернюю тему, а второй на родительскую.

Заметки

Форматы записей

Функция add_theme_support( ‘post-formats’ ) переопределит форматы, заданные родительской темой, а не дополнит их.

@import в style.css дочерней темы

Несмотря на то что везде пишут использовать @import в style.css подтемы. Делать это я не рекомендую. Потому что в этом случае браузер не может параллельно загрузить оба файла стилей: от родительской темы и от дочерней. Ему придется загрузить их последовательно: сначала стили дочерней темы, там он увидит @import и только потом начнет загружать стили родительской темы. В итоге получается, что мы теряем в скорости загрузки страницы порядка 200мс. Столько уходит на загрузку файла стилей. Под загрузкой подразумевается отправка запроса на сервер, ожидание ответа, загрузка файла.

Лучше подключить файлы стилей по-отдельности в HTML: сначала стили родительской темы, а затем дочерней, чтобы они были ниже в HTML коде и перебивали родительские стили. Делается это так:

add_action('wp_enqueue_scripts', 'my_theme_styles' ); function my_theme_styles() < wp_enqueue_style('parent-theme-css', get_template_directory_uri() .'/style.css' ); // не обязательно, правильная родительская тема подключит его сама. //wp_enqueue_style('child-theme-css', get_stylesheet_directory_uri() .'/style.css', array('parent-theme-css') ); >

В результате в HEAD части HTML документа мы получим две ссылки на два файла стилей, которые при загрузке будут загружаться параллельно, а не последовательно. Это сэкономит нам время на один запрос к серверу от бразуера.

Подробнее про такой тип загрузки читайте в отдельной статье: Альтернатива @import в дочерних темах

Создание дочерней темы

Эта возможность доступна на сайтах с тарифным планом WordPress.com Creator или Entrepreneur. Если для вашего сайта действует один из устаревших тарифных планов, эта функция доступна с планом Pro.

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

Следует отметить, что это сложная процедура, для выполнения которой требуются знания HTML и PHP.

Что такое дочерняя тема?

Дочерняя тема наследует возможности и стиль родительской темы.

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

Ниже приведены снимки экранов двух тем в нашем репозитории — Edin и Goran. Goran — дочерняя тема Edin. Она наследует основной дизайн Edin, но имеет дополнительные настройки.

Создание дочерней темы

Чтобы использовать дочерние темы на сайте WordPress.com, сначала нужно установить WordPress локально на свой компьютер. После создания дочерней темы на вашем компьютере нужно её сжать в zip-файл и загрузить на сайт с тарифным планом WordPress.com Business.

Вместо создания дочерней темы вручную можно использовать плагин, который сделает это за вас (например, Child Theme Configurator). В репозитории плагинов выполните поиск по ключевым словам «дочерние темы» и рассмотрите доступные варианты.

Примечание. Вы можете скачать копию бесплатных тем из нашей коллекции в нижней части каждой страницы каталога WordPress.com. Найдите ссылку для скачивания:

Нельзя создать дочернюю тему для темы, которая сама является дочерней.

Создание дочерней темы вручную

Эта возможность доступна на сайтах с тарифным планом WordPress.com Creator или Entrepreneur. Если для вашего сайта действует один из устаревших тарифных планов, эта функция доступна с планом Pro.

Рассмотрим процедуру на примере темы Twenty Seventeen.

Шаг 1.

Найдите и скачайте файл темы из репозитория WordPress.org сюда. На Mac после загрузки файла дважды щёлкните по нему, чтобы извлечь папку. На Windows щёлкните правой кнопкой мыши и нажмите «Извлечь всё».

Шаг 2.

Создайте новую папку и назовите дочернюю тему, например, «twentyseventeen-child».

Рекомендуется, чтобы имя папки с дочерней темой заканчивалось на «child». Убедитесь, что в имени папки для дочерней темы нет пробелов.

Шаг 3.

Скопируйте и вставьте файлы style.css и functions.php из оригинальной родительской темы (twentyseventeen) в новую дочернюю тему (twentyseventeen-child).

Шаг 4.

Откройте файл style.css из папки новой дочерней темы в текстовом редакторе, например Notepad, Atom, Sublime Text. Для очистки файла введите команду+A > delete на Mac (CTRL+A > delete в Windows).

После этого скопируйте и вставьте следующие строки кода:

Обратите внимание, что код CSS ниже может быть предназначен для конкретной темы.

/ * Theme Name: Twenty Seventeen Child Theme URI: https://example.com/twenty-seventeen-child/ Description: Twenty Seventeen Theme Author: John Doe Author URI: https://example.com Template: twentyseventeen Version: 1.0.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twentyseventeen */

Нужно включить в следующие строки название родительской папки, чтобы указать на то, что тема является дочерней для этой родительской темы.

– Theme name
– Description

Не меняйте следующие поля:

— Template
— Text domain

Другие поля не являются обязательными. Подробности о них см. здесь.

Строка шаблона должна содержать имя папки родительской темы. Внеся изменения, не забудьте сохранить этот файл.

Шаг 5.

Откройте файл functions.php из папки новой дочерней темы в том же текстовом редакторе. Для очистки файла введите команду+A > delete на Mac (CTRL+A > delete в Windows).

После этого скопируйте и вставьте код ниже, заменив значение $parent-style названием вашей темы, добавив -style в конце (в нашем случае получится twentyseventeen-style).

Внеся изменения, не забудьте сохранить этот файл.

get('Version') ); > add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Шаг 6.

Теперь нужно сжать эти папки в zip-файл.

1. Найдите файл или папку, которые нужно сжать.
2. Нажмите и удерживайте (или выберите правой кнопкой мыши) файл или папку, нажмите «Отправить» и выберите «Сжатая ZIP-папка».

В том же расположении будет создана новая сжатая папка с тем же именем. Чтобы переименовать ее, нажмите и удерживайте (или выберите правой кнопкой мыши) папку, нажмите «Переименовать» и введите новое имя.

1. Найдите элементы, которые нужно сжать в zip-файл, в Mac Finder (файловой системе).
2. Нажмите правой кнопкой мыши файл, папку или файлы, которые нужно сжать.
3. Выберите «Сжать объекты».
4. Найдите только что созданный архив ZIP в той же папке.

Шаг 7.

Загрузить пользовательскую тему можно в разделе Внешний вид → Темы, нажав кнопку Загрузить тему. Загрузите родительскую и дочернюю темы и активируйте дочернюю.

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

Создание дочерней темы с помощью Child Theme Configurator

Эта возможность доступна на сайтах с тарифным планом WordPress.com Creator или Entrepreneur. Если для вашего сайта действует один из устаревших тарифных планов, эта функция доступна с планом Pro.

Скачайте и установите плагин: https://wordpress.org/plugins/child-theme-configurator/. Чтобы узнать больше об установке плагинов, нажмите сюда.

Обратите внимание, что Child Theme Configurator — это сторонний плагин. Его служба поддержки находится по следующему адресу: https://wordpress.org/support/plugin/child-theme-configurator/

После установки выберите «Инструменты» > «Дочерние темы».

Шаг 1. Выберите родительскую тему.

Шаг 2. Нажмите Анализировать. Система проверит, что родительские темы используют стандартный режим работы WordPress и неожиданных ситуаций с вашей темой не будет.

Шаг 3. Это имя каталога или папки, в которой хранится тема на вашем сайте.

Шаг 4. Выберите папку для хранения стилей. Рекомендуется выбрать основную опцию stylesheet style.css, используемую по умолчанию

Шаг 5. Выберите вариант обработки таблицы стилей для родительской темы. Он определяет, как дочерняя тема будет использовать стили родительской темы. Рекомендуется использовать очередь стилей WordPress.

Шаг 6. Введите имя, описание, автора и версию дочерней темы. На этом этапе нужно ввести данные темы, которые будут отображаться с использованием CSS.

Шаг 7. Скопируйте меню, виджеты и настройки конфигуратора родительской темы. Если вы настроили родительскую тему в конфигураторе, эта опция скопирует настройки в новую дочернюю тему.

Внесение изменений в дочернюю тему

Не рекомендуем вносить изменения в свою тему прямо на работающем сайте. Ознакомьтесь с руководством по внесению изменений локально.

Поддержка дочерней темы

В службе поддержки WordPress.com подскажут, куда следует обратиться, или предложит альтернативу дочерней теме (если они есть). Помощь по работе с HTML и PHP наша служба поддержки не оказывает. Если вам потребуется дополнительная помощь, обратитесь к веб-разработчику или напрямую к автору темы.

Как создать дочернюю тему WordPress?

Дочерняя тема WordPress, или подтема – дополнительная тема, которая создается на основе родительской готовой темы WP. Благодаря дочерней теме можно изменять или дополнять функции и вид основной темы не боясь, что внесенные изменения будут потеряны.

Для чего нужны дочерние темы?

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

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

Мы покажем процесс создания дочерней темы для версий WP до 5.9 (то есть для тем Twenty Twenty Twenty и старше).

Шаг 1. Создаем папку для дочерней темы

Создаем папку в каталоге тем: wp-content/themes. Называем, например twentytwenty-child

Шаг 2. Создаем файл style.css

Создаем в новой папке файл style.css. Он должен включать следующее:

/* Theme Name: Twenty Twenty Child Author: Hostpro Template: twentytwenty */ 

• Theme Name (обязательно) – название дочерней темы,
• Template (обязательно) – название папки родительской темы (регистрозависимое).

• Theme URI (необязательно) – адрес сайта дочерней темы
• Description (необязательно) – описание дочерней темы
• Author URI (необязательно) – адрес сайта автора дочерней темы
• Author (необязательно) – имя автора дочерней темы
• Version (необязательно) – версия дочерней темы

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

Шаг 3. Создаем файл functions.php

Создаем новый файл functions.php на том же уровне, что и style.css – в папке twentytwenty-child (пожалуйста, обратите внимание, что файл должен называться именно functions.php, а не function.php).

В начале обязательно открываем тег

Если нам нужно внести всего несколько изменений, а не переписывать родительскую тему с нуля, то подключаем файл стилей родительской темы.

 function child_theme_enqueue()  // Parent styles wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); > add_action( 'wp_enqueue_scripts', 'child_theme_enqueue' ); 

Есть еще вариант с помощью директивы @import в файле style.css.

 /* Theme Name: Twenty Twenty Child Author: Hostpro Template: twentytwenty */ @import url("../twentytwenty/style.css"); #site-title a   color: #009900; > 

Но поскольку браузер не может параллельно загружать оба файла стилей (то есть сначала он увидит стили дочерней темы, далее @import, а уже потом стили родительской темы), этот вариант будет медленнее и мы его не рекомендуем.

Шаг 4. Активируем дочернюю тему

Возвращаемся в админку WP и активируем нашу дочернюю тему.

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

 rel='stylesheet' id='twentytwenty-style-css' href='https://hostpro.fun/wp123/wp-content/themes/twentytwenty-child/style.css?ver=6.1.1' media='all' />