Как создать дочернюю тему в WordPress. Настройка дочерней темы. Преимущества дочерние темы

12.07.2019

Что такое дочерняя тема (child theme) и для чего её нужно создавать для сайтов на wordpress? Давайте рассмотрим данные аспекты и разберемся каким образом её можно сделать.

Дочерняя тема (child theme) — новая тема (подтема) для сайта на wordpress на основе базовой (родительской). Она берет все стандартные настройки шаблона из «родительской » темы. Такая тема получает возможности для внесения каких-либо изменений без опасений потери данных при обновлении.

Дочерняя тема фактически является копией родительской . И ссылается на основные каталоги данных дизайна и интерфейса к файлам в базе данных основной (родительской) темы.

Создают дочерние темы для внесения каких-либо изменений в исходный код базовой темы . Делается это с целью что-бы избежать обнуления всех изменений с выходом обновления «родительского » шаблона.

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

Для чего нужна дочерняя тема

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

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

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

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

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

Сделать это можно двумя способами:

  • Скачать и активировать соответствующий плагин
  • Сделать в ручную через корневой каталог сайта

Давайте рассмотрим каждый способ по отдельности.

Создание child theme через плагин

Самый удобный и популярный плагин для создания «дочки » называется Child Theme Configurator .

Он присутствует в официальном магазине плагинов для wordpress. Жмем «Установить «. После установки и активации, переходим в раздел «Инструменты » -> «Child Themes «. Заходим в настройки плагина.

В меню плагина вы увидите вот такое окно. Нам нужно выбрать первый пункт на стартовом меню «CREATE a new Child Theme «. Выбираем его.

После выбора родительского шаблона, жмем на кнопку «Analyze «. Далее откроются следующие пункты.

По результатам анализа нам должно высветиться вот такое сообщение «This theme appears OK to use as a Child theme «. Это значит, что плагин проверил наш шаблон на возможность создания «дочки » и дал добро.

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

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

Переходим к 9-ому пункту и нажимаем на кнопку «Create New Child Theme «. Ваша дочерняя тема создана и плагин можно удалить, так как свою роль он выполнил и уже не нужен для дальнейшей функциональности.

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

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

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

Первым делом, нужно перейти в папку с сайтом на хостинге вашего регистратора.

Заходим в по адресу: /www/ваш-сайт.ru/wp-content/themes/ . Создаем новую папку с названием «My Child Theme » (или любым другим — не принципиально). У меня она получила название «basic child theme «.

Теперь заходим в папку с основной нашей темой (у меня это папка «basic «) и копируем оттуда файл style.css .

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

Теперь в него нужно внести изменения. Выбираем файл style.css и жмем «Изменить «.

Теперь выделяем всё содержимое файла и удаляем (через функцию «ctrl + A «). Мы получим чистый файл style.css в который будем вписывать нужный код .

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

Давайте разберемся с каждой строкой кода.

  1. Theme name : Имя вашей темы в админ панельке для вас.
  2. Template : указываем название родительской темы.
  3. @import url(«../имя-темы/style.css»); — указываем командой откуда брать данные шаблона для дочерней темы (адрес к регистру Parent Theme ).
  4. .foo{ color:blue; } — необязательная настройка стиля произвольного шаблона для «Child Theme «.

/*
Theme Name: My child theme name
Template: имя-вашей-темы
*/

@import url(«../имя-вашей-темы /style.css»);

Вот так будет выглядеть полностью готовый файл style.css для дочерней темы:

Оставляем вот такой кусок кода и жмем «Сохранить «. Ваша дочерняя тема готова.

Как активировать дочернюю тему на WordPress

Тему создали? Теперь нужно её наложить на свой сайт. Как это сделать?

Переходим в раздел «Внешний вид » -> «Темы «. И ищем свою «дочку » по названию, которое присвоили ему через команду «Theme name » в файле style.css .

Если вы ставили тему через плагин, то его имя будет по формату: «тема -child». Ищите её по такому названию. Если тема была назвалась «twenty seventeen «, то его дочерняя тема (через плагин) будет называться: «twentyseventeen-child «.

В «Темах » находим свой дочерний шаблон и выбираем на нем кнопку «Активировать «.

На последней фотографии, вы видите два шаблона Basic . Левый — дочерняя тема шаблона (Child Theme ), а правый — родительская тема (Parent Theme ). «Дочка» перенимает все настройки дизайна с родительской через команду @import .

Проблемы дочерней темы и как их исправить

При создании дочерней темы в ручную через код, вы можете столкнуться с одной проблемой. В «Редакторе » файлов дочерней темы будет только одна «Таблица стилей » в правом столбце «Файлы темы «.

У родительской темы в «Файлах темы » будет множество строк, а у дочерней — только файл «Таблицы стилей (style.css) «. Что делать в такой ситуации?

Я решил этот вопрос так: Скопировал все файлы из папки родительской темы, кроме измененного style.css, и залил их в папку с дочерней.

Поэтому я бы предложил более простой способ решения данной проблемы.

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

Вот и всё. Тогда все вкладки в «Редакторе » у вас сохраняться и в них можно вносить любые желаемые изменения.

Вывод

Создать дочернюю тему достаточно просто и необходимо это сделать в самом начале жизни вашего сайта на wordpress. Проще всего — использовать плагин, после того, как он создаст для вас child theme, его можно удалить.

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

По средним статистическим данным, около 80% сайтов используют основные темы WordPress, и только около 20% – используют дочернюю тему. Это можно объяснить тем, что большинство клиентов не понимают, что такое дочерняя тема ВордПресс, или думают, что ее трудно настроить. В сегодняшнем уроке мы рассмотрим практические моменты создания и использования дочерней темы, а также ее важность.

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

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

Практика

В нашем примере мы создадим дочернюю тему для основной темы sebweo . Прежде всего, нам нужно создать новую папку для дочерней темы (назовем ее, например, sebweo-child). Полный путь от корня сайта будет /wp-content/themes/sebweo-child/ . В папке новой темы создайте файл style.css (единственный обязательный файл) и заполните информацию выделенную комментариями (между /* и */ ), как в примере ниже. Название темы, URI, Описание и Автора можно полностью заменить под свои нужды.

Com Template: sebweo Version: 1.0.0 */ @import url("../sebweo/style.css");

Важнейшими частями этого файла есть разделы «Template:» (идентифицирует родительскую тему) и инструкция CSS @import (импортирует стили CSS из оригинальной темы). Убедитесь в том, что путь к основному CSS файлу родительской темы правильный, и в параметре «Template:» правильно указано название родительской темы. Откорректируйте это под свои названия и пути. Все эти данные чувствительны к регистру! В нашем примере название темы (и, соответственно, название папки с родительской темой) пишется в нижнем регистре, если у вас используется название с верхним регистром – вы должны так и писать (например, Sebweo).

Активация дочерней темы

После того, как вы создали папку с дочерней темой и файл style.css , вы можете активировать свою новую дочернюю тему. Активация дочерней темы не отличается от активации обычной темы: просто зайдите в Консоль WordPress по адресу Внешний вид > Темы (Appearances > Themes), найдите только что созданную тему и активируйте ее (нажмите кнопку Активировать на блоке с темой).

Редактирования CSS стилей основной темы

Итак, мы создали дочернюю тему. Сейчас стили на сайте выглядят так же, как при оригинальной теме. Это потому, что мы импортировали все CSS стили с оригинальной темы (помните инструкцию @import ?). Чтобы отредактировать стили, добавьте любые изменения в CSS-файл дочерней темы под инструкцией @import . Стили в дочерней теме имеют больший приоритет, поскольку они загружаются после стилей основной темы и тем самым переопределяют их.

Например, нам нужно изменить фоновый цвет сайта с #fff на #f5f5f5 . Для этого мы можем добавить соответствующий CSS-код в файл sebweo-child/style.css:

Com Template: sebweo Version: 1.0.0 */ @import url("../sebweo/style.css"); /* переписываем стили основной темы */ body { background-color: #f5f5f5; }

Сохраните файл и обновите сайт: вы увидите, что фоновый цвет изменился (при условии, конечно, что в основной теме использовался белый фоновый цвет для тега body).

Редактирования файла functions.php

Файл functions.php используется, как правило, для размещения основных функций темы. При использовании дочерней темы без этого файла, он автоматически будет подгружаться с родительской темы. Но если вам нужно добавить другие специальные функции к своей теме, вы можете сделать это, создав новый файл functions.php в папке с дочерней темой. Обратите внимание, что новые функции будут загружены непосредственно перед функциями родительской темы. Файл functions.php вашей дочерней темы должен начинаться с тега . Между этими тегами можно добавлять свой желаемый php-код.

Редактирование других файлов шаблонов

Кроме изменений CSS и функций, вы можете внести структурные изменения в вашу тему, откорректировав php файлы-шаблоны. Это следует делать с осторожностью, но за счет этого вы можете настроить любую часть темы. В отличие от редактирования файла functions.php , где функции оригинальной темы импортируются автоматически, при редактировании файлов-шаблонов дочерней темы они полностью заменяют шаблоны в родительской теме. Файл родительской темы игнорируется, а вместо него используется новый (с дочерней темы). Первое, что нам нужно сделать – это воссоздать старый файл, прежде чем мы начнем его менять. Для этого просто скопируйте файл-шаблон с родительской темы и вставьте его в папку с дочерней темой. Например, если мы хотим изменить файл-шаблон для шапки сайта (header.php), мы просто скопируем его из /wp-content/themes/sebweo/ и вставим в /wp-content/themes/sebweo-child/ (замените на свои пути! ).

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

Преимущества и недостатки дочерней темы

Преимущества использования дочерней темы WordPress

  1. Безопасное обновление:

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

  1. Легко расширяется:

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

  1. Резервное копирование:

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

Недостатки использования дочерней темы WordPress

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

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подписаться

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

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

Чем отличается «дочь»

Дочерняя тема ВордПресс открывает возможность вносить необходимые изменения и коррективы. Далее мы рассмотрим, как ее создать, но перед этим разберем ее ключевые отличия:

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

Удобно ли работать

Дочерняя тема WordPress представляет собой прекрасную идею, обладающую широким перечнем преимуществ. Лично мы бы рекомендовали ее в стандартном комплекте с продуктами премиального сегмента. Перечислим лишь некоторые плюсы:

  1. Они автоматически сохраняют внесенные корректировки. Благодаря этому можно вносить коррективы напрямую в код, без рисков, что настройки собьются или будут утрачены при обновлении.
  2. Работа с ними - прекрасная подготовка для перехода к написанию основного кода для родительских вариантов.
  3. Улучшается рабочий процесс. Имея в распоряжении всего одну тематическую основу, вы можете создавать сайты, различные по сложности и функционалу.

Так как это продолжение родительской, набор особенностей и функций здесь идентичен. Главные составляющие:

  1. Директория (папка/место расположения файловых составляющих).
  2. «style.css», где прописаны основные и дополнительные свойства.
  3. «functions.php», где прописано определение функций.

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

Функционирование

«Дочери» локализуются в самостоятельной папке и могут похвастаться отдельными «functions.php» и «style.css». Всегда можно написать вспомогательные файлы, но эта пара отвечает за правильное функционирование - без сбоев и проблем.

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

Устройство theme аналогично редакторским слоям фоторедакторов. Если пользователь посещает ваш интернет-ресурс, перед ним открывается «дочь», а потом уже отсутствующие опции и стили загружаются из родительской. В конечном итоге большая часть кода передается от родителя, но перед использованием его нужно модифицировать с учетом настроек «дочери».

Как создать

Сначала проверьте, есть ли у вас в распоряжении все необходимое. А именно доступ к FTP или файловому менеджеру, открытый доступ к самой панели управления ВордПресс. Итак, приступим.

Шаг No1. Создание дочерней темы WordPress

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

Прежде всего создаем папку для дочери в стандартном каталоге. Чтобы в каталоге был порядок и содержимое было систематизировано, лучше назвать папку по образцу «Наименование родителя + окончание child». Для удобства можно добавить наименование того или иного проекта, для которого мы создаем theme. Главное, чтобы название каталога не имело пробелов, в противном случае это может привести к появлению ошибок. Файловый менеджер или FTP-клиент поможет создать новую папку. На сегодняшний день хорошо зарекомендовал себя такой FTP-клиент как FileZilla.

Для примера возьмем за основу «Twenty Seventeen», которая многим знакома. Работать я предпочитаю с Файловым менеджером, поэтому у меня путь до созданной папки выглядит таким образом:

Делаем следующее:


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

Шаг No2. Настройка

Чтобы приступить к работе, видоизменять, дополнять, адаптировать под запросы и требования вашего сайта «дочь», необходимо правильно выполнить настройки. Будем разбираться по порядку.

  1. Сначала нужно настроить внешний вид.

Для этого мы внесем коррективы в «custom.css», который расположен в каталоге. Сделать это можно через FTP-клиента, обычный текстовый редактор, файловый менеджер или специальный редактор ВордПресс (найти его можно, открыв «Внешний вид», после этого «Редактор»). Здесь понадобятся хотя бы минимальные знания правил использования CSS, а также навык проверки через браузер элементов сайта. Например, чтобы изменить цвет фона в «style.css», мы прописываем следующее правило CSS:

На следующей картинке представлено, как изменится дизайн сайта после внесенных корректировок. Фон стал салатовым:

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

2.Работа с функциями.

Применение и работа с «дочерьми» дает и такое преимущество, как возможность ведения двух независимых «functions.php». Напомним, что данные файлы применяются для удаления старых и добавления новых функций. Если они имеются, можно не беспокоиться о сохранности или проблемах в работе документа. Даже если основа обновится, он сохранится в неизменном состоянии.

Для добавления новой опции в файл вписывается и новый PHP-код. Например, код, представленный ниже, удалит опцию поиска WordPress.



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

Облегчить процесс создания можно путем использования ряда специальных плагинов. Библиотека WordPress представляет широкий выбор плагинов, большинство из них можно использовать бесплатно. Использование плагинов в разы облегчает процесс разработки. Рассмотрим наиболее популярные плагины.

  1. Child Themify.

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

2. Child Theme Configurato.

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

3. _child Theme Boilerplate.

Здесь представлены готовые шаблоны для формирования «дочерей». Шаблон назван просто - «_child» - и разработан специально для упрощения работы. Шаблон предлагает интуитивную тему, от вас требуется только указать ссылку на «родителя». Шаблон данного типа позволяет создавать профессиональные варианты - здесь уже созданы 2 готовых файла, стандартные «functions.php» и «style.css».

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

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

Вот код, с помощью которого можно добавить данную опцию:

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



Подытожим

Не имеет значения уровень владения программированием, а также опыт работы с ВордПресс. Создать дочернюю тему WordPress не составит особого труда, при этом нет риска, что настройки удалятся после выхода. Путем написания небольшого кода или внесения изменений в уже написанный и проведения простых действий с каталогом вы можете изменить свой сайт. Главное - соблюдать инструкцию, постепенно переходя от одного пункта к другому. Не забывайте следующее: если появляются обновления для «родителя», «дочери» не изменяются, это правило касается вносимых изменений в контент, настройки и так далее.

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

Дочерняя тема - это тема, которая наследует функционал и дизайн другой темы, называемой «родительской». Дочерняя тема - рекомендуемый разработчиками WP способ модифицировать «под себя» существующую тему.

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

Есть несколько причин, почему вам бы хотелось использовать дочернюю тему:

  • Если вы измените тему напрямую, и она обновится, то ваши изменения просто пропадут. Используя дочернюю тему, вы будете уверены, что ваши изменения сохранятся.
  • Использование дочерней темы может ускорить время разработки.
  • Использование дочерней темы - хороший способ изучить сам процесс разработки темы для Вордпресс.

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

Дочерняя тема состоит, как минимум, из одной папки (директории дочерней темы) и двух файлов (style.css и functions.php), которые вам нужно будет создать. Итак, вам потребуется:

  • Директория дочерней темы
  • style.css
  • functions.php

Первый шаг - это создание директории для дочерней темы, которая будет размещаться в папке wp-content/themes . Рекомендуется, чтобы название директории дочерней темы оканчивалось суффиксом “ -child ” (хотя и не обязательно, особенно, если вы создаете тему для публичного использования).

Вам также нужно удостовериться, чтобы в названии директории для дочерней темы не было пробелов, в против случае это вызовет ошибку. На скриншоте выше название нашей дочерней темы “ twentyfifteen-child ”, означающее, что родительской темой является Twenty Fifteen .

Следующий шаг - создание файла стилей для дочерней темы (style.css). Файл стилей должен начинаться со следующей мета-информации:

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

Theme Name: Twenty Fifteen Child

Theme URI: http://example.com/twenty-fifteen-child/

Description: Twenty Fifteen Child Theme

Author URI: http://example.com

Template: twentyfifteen

Version: 1.0.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready

Text Domain: twenty-fifteen-child

Важная информация, о которой вы должны знать:

  • Вам надо будет заменить текст этого примера, исходя из вашей ситуации.
  • Строка “ Template ” соответствует названию директории родительской темы. В нашем примере родительской темой является Twenty Fifteen, поэтому строка “ Template ” содержит “ twentyfifteen ”. В вашем случае может быть другая тема, поэтому скорректируйте ее соответствующим образом.
  • В принципе, файла стилей (style.css) уже достаточно для создания дочерней темы. Однако для грамотной постановки в очередь на загрузку файлов стилей потребуется файл functions.php (см. ниже).

Третий и последний шаг - постановка в очередь родительских и дочерних файлов стилей.

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

Как правильно и корректно загружать стили

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

Данный метод также предполагает использование функции wp_enqueue_style() в дочернем файле functions.php . Поэтому вам нужно создать этот файл в директории с дочерней темой.

Первая строка дочернего файла functions.php начинается с открытия тега PHP (

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

add_action("wp_enqueue_scripts", "theme_enqueue_styles"); function theme_enqueue_styles() { wp_enqueue_style("parent-style", get_template_directory_uri() . "/style.css"); }

Как правило, файл стилей дочерней темы загружается автоматически. Если это не так, вам также надо будет его поставить в очередь. Настроив “ parent-style ” как зависимость, убедитесь, что стили дочерней темы загружаются после нее.

add_action("wp_enqueue_scripts", "theme_enqueue_styles"); function 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")); }

add_action ("wp_enqueue_scripts" , "theme_enqueue_styles" ) ;

function 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" )

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

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

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

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

К примеру, если вы хотите изменить код PHP для шапки сайта, вы можете включить файл header.php в вашу директорию с дочерней темой, и этот файл будет использован вместо header.php родительской темы.

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

Использование functions.php

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

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

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

Структура functions.php проста: открывающий тег PHP в начале, а ниже него размещаете свой код PHP. В этот файл вы можете разместить столько кода, сколько необходимо. Пример ниже иллюстрирует элементарный файл functions.php , который делает одну простую вещь: добавляет ссылку на фавиконку в тег HTML странички.

" . "\n"; } add_action("wp_head", "favicon_link");

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

if (! function_exists("theme_special_nav")) { function theme_special_nav() { // Сделать что-то. } }

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

Включение файлов в вашу дочернюю тему

Когда вам нужно включить файл, который должен являться частью структуры дочерней темы, используйте функцию get_stylesheet_directory() . Так как родительский файл стилей style.css заменяется дочерним style.css , и этот дочерний style.css располагается в корневой папке поддиректории дочерней темы, get_stylesheet_directory() будет указывать именно на директорию с дочерней темой, а не родительскую.

Ниже пример использования конструкции require_once , который иллюстрирует, как вы можете использовать get_stylesheet_directory , когда нужно дать ссылку на файл, хранящийся в структуре дочерней темы.

require_once(get_stylesheet_directory() . "/my_included_file.php");

require_once (get_stylesheet_directory () . "/my_included_file.php" ) ;

Дополнительная полезная информация

Использование форматов постов

Дочерняя тема наследует форматы постов, определенные в родительской. Когда создаете дочернюю тему, знайте, что использование add_theme_support("post-formats") перекроет форматы, определенные в родительской теме, а не добавит к ним.

Поддержка RTL (написание справа-налево)

Для поддержки языков RTL, добавьте файл rtl.css к вашей дочерней теме. Он содержит:

/* Theme Name: Twenty Fourteen Child Template: twentyfourteen */

Дочерняя тема WordPress - это тема, которая расширяет функционал другой темы, называемой родительской темой, и позволяет вам изменять или дополнять функционал родительской темы. Эта статья рассказывает как создать простую дочернюю тему, и объясняет что вы можете с ней сделать. Как пример родительской темы используется Twenty Ten, новая тема по умолчанию в .

Внимание! Если информация ниже вам покажется сложной для понимания, то можно воспользоваться более актуальным и быстрым способом создания дочерней темы с помощью плагина Child Theme Configurator

Создать дочернюю тему очень просто. Создайте папку, положите в нее соответствующим образом написанный файл style.css и дочерняя тема готова! С небольшим понятием о HTML и , вы можете изменить эту очень простую дочернюю тему - меняя внешний вид и верстку родительской темы, но не меняя ее файлов. Таким образом, когда родительская тема обновляется, ваши изменения сохраняются.

Похожие статьи