Стоит ли делать дочернюю тему. Редактирование других файлов шаблонов. Зачем использовать дочернюю тему

Для Андроид 21.05.2019
Для Андроид

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

Зачем это нужно

Зачем нужна дочерняя тема, я пояснил во вступлении. Поясню на практике. Я давно не использую шаблоны в авторском варианте, постоянно что-то меняю в файле, отвечающем за дизайн (style.css), убираю ссылки из футера, меняю местами вступления и анонсы к статьям в архивах. Короче делаю правки в файлах шаблона. Каждый раз, когда автор обновляет шаблон, я бы терял и восстанавливал свои правки, если бы не использовал дочерние темы.

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

Создать дочернюю тему WordPress вручную

  • Предположим, у вас тема «father», создаем к ней дочернюю темы;
  • Создайте каталог дочерней темы, пусть будет «daughter»;
  • В Notepad++ создайте файл.css со следующим содержимым:
/* Theme Name: Daughter Template: father */

Обратите внимание, что директива Template указывает родительскую тему и она обязательна.

Важно! Теперь, когда вы поместите в каталог «дочки» файл, он заменяет аналогичный файл у «родителя». Это правило НЕ работает для файла functions.php.

Но это не всё. Нужно стили «родителя» перенести в стили «дочки». Это делается двумя способами:

Способ 1. Просто перенести содержимое файла стилей (style.css) в аналогичный файл родителя;

Способ 2. Или добавить файл style.css дочки следующую строку:

@import url("../father/style.css");

Обращаем внимание на относительный адрес с указанием родительского шаблона (father).

Тематические плагины для создания дочерней темы

Про плагины для создания дочерней темы, скажу так, если вам нужна дочерняя тема, поставьте плагин, создайте «дочку», удалите плагин и не мучайтесь ручной работой. Работа с любым перечисленным ниже плагином займет 10-15 секунд, если вы не создаете дочернюю тему уже измененного шаблона.

Child Theme Wizard

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

Child Theme Configurator

https://ru.wordpress.org/plugins/child-theme-configurator/

Быстрая и простая в использовании утилита, которая позволяет анализировать любую рабочую тему и создавать дочернюю тему настраивать её. Child Theme Configurator позволяет легко идентифицировать и переопределять точные атрибуты CSS, которые вы хотите настроить. Анализатор сканирует предоставленную тему и автоматически настраивает вашу дочернюю тему.

Childify Me

https://ru.wordpress.org/plugins/childify-me/

Позволит создать дочернюю тему для любой установленной темы, непосредственно с панели Внешний вид>>>Тема.

Создать дочернюю тему измененного шаблона

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

Вариант 1. Поставьте плагин Child Theme Configurator, он сам «просветит» ваш шаблон и перенесет измененные файлы в дочернюю тему;

Вариант 2. Сделайте «дочку» в ручном режиме и далее: Перенесите измененные файлы из родительской темы в дочернюю тему.

Всё! Теперь вы работаете на дочерней, измененной ранее теме.

Выводы

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

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

Что представляет из себя дочерняя тема WordPress?

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

Значение: дочерняя тема (ДТ), главным образом, предназначена для правильного редактирования родительской темы (та, которая активированная в данный момент). Использование такого способа позволит сохранить все внесенные изменения родительской темы (РТ) при ее следующем обновлении.

Польза: Колоссальная. Поскольку это правильное решение в любых изменениях РТ.

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

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

Об этом варианте мы вкратце и поговорим. В репозитории, как всегда, большой выбор плагинов в реализации решений каких-либо задач. Мой выбор пал на плагин «One-Click Child Theme », который создаст дочернюю тему в один клик.

После активации модуля «One-Click Child Theme» перейдите во вкладку «Внешний вид – Child Theme». На этой странице находится три поля для заполнения:

Как работать с дочерней темой

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

Файлы темы. Копируется из РТ файл, в котором требуется что-то сделать свое, и переносится в ДТ (учитывайте, если файл находится в подпапке темы, то в ДТ также создаете такую же папку). Затем уже начинайте с ним работать, меняете, добавляете то, что нужно и проверяете результат.

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

CSS @import

/* Theme Name: child-my-theme Description: Дочерняя тема

Функция

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

functions.php. в отличие от предыдущих не меняется и не импортируется, а загружается как дополнение к родительскому файлу. Его не нужно копировать с РТ просто создать файл в ДТ с названием functions.php. И тогда обычным нам способом добавлять в него нужные вам функции. Таким образом, будет правильный подход к модификации и расширений возможностей родительской темы.

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

Друзья, всем привет. Я рад приветствовать вас на моём блоге. И сегодня хочу рассказать о создании дочерней темы WordPress. На сегодняшний день – это самый оптимальный подход при создании сайта на платформе WP.

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

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

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

Так вот, дочерняя тема – это 100% копия родительской темы (основной темы). Все изменения, сделанные в дочерней теме, будут отражаться и в родительской. Но при этом файлы родительской темы не будут меняться. И обновление темы будет проходить с учётом ваших изменений.

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

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

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

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

Поочерёдно открываем папки:

папка с вашим сайтом

папка родительской темы

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

В папке дочерней темы создаёте файл style.css . Это обязательный файл. Именно он будет отвечать за взаимодействие родительской и дочерней тем.

Настройка файла style.css дочерней темы WordPress

Файл style.css в дочерней теме должен содержать информацию о родительской теме. По ней WordPress поймет, между какими темами организовано взаимодействие.

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

Итак, приступим.

Откройте файл style.css (я обычно создаю этот файл на своём компьютере в редакторе Notepad++, а потом копирую его в папку дочерней темы на хостинг).

Вставьте в файл style.css вот этот код:

/* Theme Name: Название темы (английскими символами) Theme URI: url адрес темы Description: Описание темы Author URI: url вашего сайта или страницы об авторе Template: название родительской темы (с соблюдением регистра) Version: 1.0.0 */

Вот пример, как выглядит этот код в моей новой теме.

Учтите, обязательными полями к заполнению являются Theme Name и Template . Остальные поля вы заполняете на своё усмотрение.

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

Для подключения стилей из родительской темы нужно прописать всего лишь одну строчку кода:

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

Как вы понимаете – это условный путь к файлу стилей в родительской теме. Вы также можете прописать полный путь (абсолютный) к файлу стилей родительской темы.

А вот уже после подключения стилей вы можете добавлять свои стили оформления. Обратите внимание, что именно после, все ваши дополнительные стили должны идти после строчки импорта.

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

Какие файлы можно хранить в папке дочерней темы

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

Файл функции темы functions.php

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

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

Вот скажем, у меня в текущей теме постоянно была проблема с тем, что путались заголовки H1 и H2. Решение этой проблемы я раскрыл в . А в своей новой теме, я могу реализовать это через файл functions.php. Добавив лишь вот такой код:

Add_filter("tc_site_title_tag", "change_tag"); function change_tag() { if (!is_single () && !is_page ()) return "h1"; if (is_single () || is_page ()) return "p"; }

А всё потому, что моя новая тема, полностью построена на API ключах WordPress.

Основные файлы темы (шаблона)

После активации дочерней темы в административной панели вы не сможете редактировать основные файлы темы (single.php, page.php, index.php …). Потому, что их просто там не будет.

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

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

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

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

А теперь смотрим видеоурок и можно приступать к созданию дочерних тем.

Вот и всё, дорогие друзья, простой алгоритм создания дочерних тем в WordPress закончен. Пробуйте, внедряйте, и создавайте свои темы. Только хочу обратить ваше внимание на то, что лучше всего создавать дочернюю тему сразу после установки родительской. Иначе, если вы уже ковыряли родительскую тему, то ваша дочерняя тема не будет реализована на 100%, да встать может криво.

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

На сегодня всё, до встречи в новых видеоуроках и статьях. И конечно же, если будут вопросы, пишите в комментариях, буду рад помочь. Желаю вам удачи и хорошего настроения!

Подписывайтесь на новые статьи!

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

  • Василий

    Очень интересная тема. Сразу появилось несколько вопросов.

    1. Максим, а использование дочерней темы как-то влияет на скорость загрузки сайта?

    2. Я использую специальный плагин Function.php для вставки кода в файлы темы. Если дополнительно использовать еще дочернюю тему, например, для микроразметки. Возможно ли такое?

    3. Если копировать полностью файлы с родительской темы, то после обновления темы ничего не изменится. А ведь автор может что-то оттуда удалить. Нам нужно сохранить только определенные строки кода, а остальные изменения пусть происходят. Такое возможно?

    • Вася, привет. Дочерняя тема в действительности расширяет границы в доработках темы под свои нужды.
      1. На скорость загрузки дочерняя тема не влияет. Всё зависит от самой родительской темы и от кода, который мы вставляем в дочернюю тему. Если все доработки валидные, то и скорость загрузки будет на высоте. Я тестировал на GTmetrix и Pingdom. Главное чтобы родительская тема была шустрая.
      2. Функции темы в дочерней теме это по сути дела все наши доработки собранный в плагин Function.php. Так, что свободно можно использовать плагин и не лезть в файл функции темы. Ну и соответственно всю микроразметку нужно создать в дочерней теме.
      3. Все файлы копировать не нужно. Лишь те, в которых делаем изменения. Так файлы родительской темы остаются в оригинале. Файлы обновляются с учётом наших доработок. Я уже проверил.

  • Сергей Стеклов

    У меня почему-то при обновлении темы Customizr слетает дочерняя тема. И все из-за отредактированных файлов, которые лежат в папке inc —> parts. А именно:
    class-content-featured_pages
    class-content-post_navigation
    class-content-slider
    class-footer-footer_main
    class-header-header_main
    Когда эти файлы удаляю, то дочерняя тема с обновленной родительской работаете нормально. Но сейчас у меня Customizr 3.3.26 работает с дочерней нормально. На как только начинаю обновлять родительскую, то дочерняя слетает. Получается, что приведенные выше файлы вообще, нельзя редактировать, так как с новой версией темы старые копии файлов могут не работать. Уже точно не помню, что именно в них менял. Но вроде точно убирал ссылку на разработчика в подвале, редактировал слайдер и еще что-то. Тема не Pro, то есть используется бесплатный вариант.

  • Наталья

    На WP делаю второй сайт, использую готовые шаблоны. Второй сайт пока на Денвере, WordPress с темой оформления Storefront. Сама тема разработана под интернет-магазин, интегрируется с плагином магазина WooCommerce. Проблема в том, что Storefront уже является дочерней темой Twenty Ten. Вопрос: как быть в таком случае — создавать дочернюю тему от дочерней? Или оставить всё как есть? И что будет, если в процессе работы сайта просто НЕ ОБНОВЛЯТЬ ТЕМУ? Какие могут быть последствия (без обновлений)? И второй вопрос: если не обновлять тему, но регулярно обновлять движок магазина (WooCommerce) — возникнут ли в дальнейшем какие-нибудь фатальные конфликты? Заранее благодарю за ответ!

  • Тата

    Спасибо за подробную и понятную информацию по дочерним темам. Сделала все, как написано. Обновила и движок, и тему — работает все, кроме плагина wppage. Теперь страницы, сделанные с его помощью отображаются как обычные страницы с сайдбаром установленной темы. Предполагаю, надо где-то прописать template_include для страниц wppage. Но моих познаний явно не хватает. Можете подсказать, Максим?

  • Лариса

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

    • Лариса, такое бывает, когда в дочерней теме прописан путь к папке или файлу, которого нет в родительской. Нужно попробовать в дочерней теме создать только файл стилей без папок и других файлов. Когда тема подключится, то уже можно постепенно переносить нужные файл и в конечном итоге будет понятно что нарушает работу сайта.
      Я в таких случаях работаю через ftp соединение, копирую файл и проверяю работу. Если сайт перестал работать, значит причина в этом файле. Удаляю его — сайт начинает работать. А я выясняю причину, что в нём не так.

      • Лариса

        Спасибо за идею! Сделала так: создала папку с дочерней темой и файлом style.css. Активировала дочернюю тему из админки и получила сайт, лишенный стилей. Иногда такая картина бывает при медленном соединении интернета. У меня такие сайты на локалке получались во время осваивания html)))))))))) В теме много настроек, виджетов. Есть спец. поле для создания своих стилей. Попробовала в это поле скопировать полностью CSS родительской темы, получила какую-то кашу из виджетов (подвальные «налезли» на виджеты хедера)… Не понимаю, почему стили не подключаются по человечески… Кстати, в этой теме два файла functions… Один из них лежит в дополнительной папкеп со своим названием.

  • Лариса

    Максим, в кодексе ВП написано, что можно создать в дочерней теме файл functions.php, который будет подгружатся в дополнение к родительскому. В нем можно написать директивы, которые будут переопределять директивы из родительской темы. Плюс написать свои директивы. Стили родительской темы так и не подключились у меня через импорт в файле css. Пришлось это сделать через дочерний файл functions.php. Через этот же файл сделала транслитерацию. Сайт в рабочем состоянии. Но! У меня не получилось переопределить функцию копирайта в подвале сайта (там ссылка на разработчика и на вордпресс).

    • Лариса

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

    • Лариса, да именно через файл functions.php дочерней темы вносятся все изменения и они не слетают при обновлении родительской темы. Но, это хорошо работает на современных тема, где всё завязано на API.
      С копирайтом, если не получается изменить его в отдельности, то менять нужно весь выше стоящий блок. Или файл подвала можно скопировать в дочернюю тему и изменить копирайт. Так гораздо проще. 😉

  • Наталья

    Да, жаль, что я время упустила. Поздно нашла вашу статью.
    я сделала блог для своего мужа, а у него при каждом обновлении темы пропадает картинка в шапке и информация в футере. Каждый раз после обновления приходится всё это корректировать. Благо у меня всё это сохранено в еверноте и много времени на это тратить не приходится. Но напрягает.
    Теперь, если придётся создавать новые сайты, буду сразу делать дочернюю тему.
    Спасибо за подробный урок. Александр

    Здравствуйте, Максим!
    При вставке доработанных файлов с микроразметкой, возникают проблемки. Я уже говорил Вам, что не особо владею языком програмирования. Вот, например при вставке файлов sidebar-left и sidebar-right с доработкой, вы не указали, как правильно их в теги заключить, и на сайте остается только хейдер. Опять же при вставке class-content-page с микроразметкой по Вашим урокам, правый сайд-бар в страницах слетает под левый. А про functions я вообще ничего понятного не нашел ни где — при его вставке в любом виде (оригинал или с доработкой из уроков микроразметки), сайт становится недоступен. А ведь именно он, я так понимаю, является одним из основных элементов для правильного функционирования дочерней темы. Остальные файлы становятся нормально, только Яшка ругается на подвал (гугл нет): ПРЕДУПРЕЖДЕНИЕ: значение «© 2016» в поле copyrightYear не является корректным значением числа. Вывод статей у меня не с главной настроен, по этому, сами понимаете, при редактировании приходилось искать другие номера строк. Показ анонсов, тоже по другому. Не показываю теги рубрик, даты и автора — в Search Console куча урлов с ошибками появляется. В общем, гуглю, гуглю, а в итоге снова к Вам попадаю. Если сможете, что-нибудь подсказать — буду благодарен!

    И это вызывает некоторые неудобства. Например, тема не переведена на русский язык. В папке languages есть только один файл nepalbuzz.pot. Допустим, в окне поиска высвечивается слово «Search…» Я хочу поменять его на «Поиск… » В файле nepalbuzz.pot нахожу такую строку, она ссылается на файл inc/default-options.php. Там тоже нахожу такую строку.
    Но менять в родительской теме файлы не рекомендуется.
    У меня уже создана дочерняя тема nepalbuzz-child. В style.css все указал, как положено.
    И вот я хочу изменить файл default-options.php, скопированную в папку nepalbuzz-child/inc. Но чтобы изменение вступило в силу, мне придется скопировать туда и core.php и указать ссылку на него в function.php.
    Но ведь в этом core.php содержатся ссылки и на другие файлы в родительской теме и в nepalbuzz-child их нет. Придется их все перенаправлять в родительскую тему?
    Короче, возникает путаница со ссылками.
    А если просто, не мудрствуя, скопировать ВСЕ содержимое родительской темы в дочернюю? Не возникнет ли проблем? Будут ли файлы меняться при обновлении темы? И обязательно ли при этом указывать в style.css родительскую тему?

  • Ольга

    Здравствуйте! Подскажите, пожалуйста, если я уже вносила изменения в Родительскую тему и хочу обновить её, то при создании Дочерней темы какие файлы мне нужно из Рт переместить в Дт, чтобы мои, ранее сделанные, изменения в Родительской теме не потерялись при обновлении?
    И ещё вопрос:
    — после установки Дочерней темы сайт будет отображаться с новым дочерним урлом?

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

Подписаться

Функционирование дочерних тем («дочерей») основывается на их взаимоотношениях с родительскими («родителями»). Важно учитывать, что бесплатные и платные 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 не составит особого труда, при этом нет риска, что настройки удалятся после выхода. Путем написания небольшого кода или внесения изменений в уже написанный и проведения простых действий с каталогом вы можете изменить свой сайт. Главное - соблюдать инструкцию, постепенно переходя от одного пункта к другому. Не забывайте следующее: если появляются обновления для «родителя», «дочери» не изменяются, это правило касается вносимых изменений в контент, настройки и так далее.

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

По средним статистическим данным, около 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. Другим недостатком часто является то, что разработчики родительской темы могут полностью переписать функцию, которую вы использовали в вашей дочерней теме, или могут внести изменения, которые полностью разрушат вашу дочернюю тему. Поскольку обновление темы является ключевым моментом для безопасности сайта, совместимости с другими функциями и плагинами, вам придется отслеживать существенные изменения, которые могут прийти с обновлением.


Рекомендуем почитать

Наверх