Сайт о телевидении

Сайт о телевидении

» » Как Создать Дочернюю Тему WordPress. Как создать дочернюю тему для WordPress

Как Создать Дочернюю Тему WordPress. Как создать дочернюю тему для WordPress

Друзья, всем привет. Я рад приветствовать вас на моём блоге. И сегодня хочу рассказать о создании дочерней темы 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 родительскую тему?

  • Ольга

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

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

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

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

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

Дочерняя (child theme, тема-потомок) это инструмент, позволяющий вносить любые корректные изменения внешнего вида (редакция файла style.css) и функционала сайта (файлы functions.php и другие файлы шаблона) и не потерять редакции при обновлении шаблона.

Стили и разметка темы родителя подкачиваются в тему потомок, а изменения в child theme наслаиваются на них. Все изменения мы вносим в дочернюю тему, а основная тема остается неизменной.

Создаем дочернюю тему WordPress – практический пример

Напомню, все темы системы «лежат» в каталоге wp-content/themes . Далее по шагам.

  • В каталоге wp-content/themes создаем папку с произвольным названием дочерней темы. Для примера создаю папку: first-child-theme. Название произвольно, скоро понадобится.
  • В любимом текстовом редакторе (я использую Notepad++) создаем текстовой файл с расширением css и названием style . Название не меняем, а содержание файла должно содержать, пока, только заголовок:
/* Theme Name: First child theme Theme URI: http: //domen.ru/ Description: Создаю дочернюю тему Author: Игорь Серов Author URI: http: //сайт Template: zeefocus */

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

  • Файл сохраняем и заливаем в папку дочерней темы, first-theme.
  • В консоли сайта появляется дочерняя тема. Название совпадает с названием указанным в строке: Theme Name. При открытии темы показывается указанное описание темы — строка Description.

Тема еще пустая и нужно ее наполнить и активировать. Можно наоборот: активировать, а потом наполнить.

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

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

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

  • Копируем родительский файл style.css и переносим его в аналогичный файл дочерней темы (пока он всего один).
  • Или в файле style.css дочерней темы вписываем дополнительную строку:
@import url(“../zeefocus/style.css”);<\pre>

Где, zeefocus – основная, родительская тема.

Важно! Этой строкой мы подгружаем стили основной темы. Теперь, не нужно копировать файл стиля, можно вносить изменения в пустой файл дочерней темы и он будет записываться поверх стилей основной темы. Редактировать файл style.css можно из админки сайта, с соблюдением , на вкладке Внешний вид→Редактор .

Не забываем, функцию import вынести из заголовка файла style.css .

Другие файлы темы

Опять два варианта,

  • создаем пустые файлы с аналогичными названиями пустым содержимым: () и пишем их, как нужно;
  • или, проще, переносим файлы основной темы в дочернюю тему и их редактируем, как нужно.

Плагины child theme

О плагинах облегчающий создание дочерней темы сайта в статье.

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

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

Итак, для чего нужны дочерние темы? Я уже частично ответил на этот вопрос. С определенной периодичностью в ядре WordPress, плагинах и темах обнаруживаются дыры (в плане безопасноти). Как правило толковые ребята, занимающиеся разработкой тем, плагинов и самой CMS, выпускают обновления. Все Ваши кастомизации пропадают в тот момент, когда вы устанавливаете эти обновления. Особенно плохо становится в ситуации с глубоко-модифицированной темой. Очень плачевно - при отсутствии резервной копии.

Для того что бы не терять все свои модификации - лучше не делать их в файлах главной темы.

Мне удалось найти в закромах WordPress со старой версией темы Twenty Twelve. Ее и буду использовать для примера.

1. Создаем папку дочерней темы:

mkdir wp-content/themes/twentytwelve-child

2. Для работы темы нужно два файла:

  • style.css
  • functions.php

Создадим их:

touch wp-content/themes/twentytwelve-child/style.css
touch wp-content/themes/twentytwelve-child/fnctions.php

3. Имя темы задается в style.css. Минимальный набор кода для style.css:

/* Theme Name: Twenty Twelve Child Template: twentytwelve Author: the WordPress team Version: 1.0 Text Domain: twentytwelve-child */ @import url("../twentytwelve/style.css")

Последняя строка подгружает стили из материнской темы.

В этот момент тема появляется в списке тем в админке WordPress и выглядит вот так:

Скопируйте screenshot.png из материнской темы для того что бы появилось изображение. По желанию его можно подредактировать:

cp wp-content/themes/twentytwelve/screenshot.png wp-content/themes/twentytwelve-child/

Теперь список тем выглядит вот так:

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

Осталось сложить все модифицированые файлы в папку дочерней темы. Дело в том, что WordPress приоритизирует скрипты/файлы из папки дочерней темы над файлами/скриптами материнской темы. Если же какой-то из файлов не найден в папке дочерней темы - он берется из материнской.

Стандартная тема выглядит вот так:

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

Как мы видим сработал header.php из папки дочерней темы.

Засада только со стилями. Если Вы объявите новый стиль отображения, на пример, ширину зоны текста в файле style.css дочерней темы - он не сработает.

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

touch wp-content/themes/twentytwelve-child/custom.css

Внесите в него код из спойлера.site:

Site { margin: 0 auto; max-width: 90%; overflow: hidden; }

К сожалению директива @import url работает только один раз в файле style.css, поэтому второй файл стилей подключить не удасться.

В WordPress стили подключаются функией wp_enqueue_style() в файле functions.php.

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

Function get_child_template_directory_uri() { return dirname(get_bloginfo("stylesheet_url")); }

После этого мы можем смело использовать get_child_template_directory_uri() в других кастомных функциях.

Теперь подключаем custom.css:

Function child_styles() { wp_enqueue_style("twentytwelve-child-style", get_child_template_directory_uri() . "/custom.css"); } add_action("wp_enqueue_scripts", "child_styles",12);

При необходимости можно копировать строчку и добавлять другие css файлы. Все будет работать.

Думаю не нужно объяснять, почему файл functions.php должен начинаться с

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

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

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

(Visited 1 223 times, 1 visits today)

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


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

Определились? Отлично, теперь рассмотрим как же создать тему-дополнение .

Дочерняя тема wordpress, что нужно что бы создать

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

  1. Первым делом нам нужно создать папку для нашей будущей уникальной темы.
  2. Затем создать обычный текстовый документ и сменить его название на style.css, открыть который мы сможем при помощи специального редактора notepad++ или же другого того же типа.
  3. В созданном нами файле нужно будет написать правильное заглавие, так называемую шапку файла.

Давайте проделаем все вышеперечисленные операции вместе и по порядку. Начнем с того, что папку нашей дочерней темы WordPress темы нужно создать внутри wp-content/themes. Название можете придумать какое угодно, это никак не скажется на вашем сайте и нигде не будет видно, для наглядности давайте посмотрим на картинку как это можно сделать:

Создали? Ок, идем в нашу папку и создаем файл каскадной таблицы стилей style.css. После создания файла открываем его для редактирования.

Шапка style.css дочерней темы WordPress

Что бы правильно настроить нашу дочернею тему мы должны написать нашу шапку которая будет вмещать в себя следующие параметры:

  • Название дочерней темы , то которое мы придумали для нашей папки, параметр является обязательным для заполнения по этому придумайте адекватное название - «Name».
  • Можно указать адрес вашего сайта на котором будет использована тема - «Theme URI».
  • Описание темы, хоть и биографию свою напишите, не имеет значения - «Description».
  • Имя создателя темы, ваше, вашего соседа или же вымышленное, все зависит от вашего настроения - «Author».
  • Обязательным и точным параметром является название папки родительской темы - «Template».
  • Возможно указать версию вашей дочерней темы например 1.1.5 или что-то в этом роде - «Version».

Разобравшись с нужными нам атрибутами заголовка посмотрим какой пример нам дают на официальном сайте :

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

Разница между дочерней темой WordPress и созданной уникальной темой.

Следует понимать разницу между дочерней темой и полностью написанной с нуля темой WordPress. лишь вносит изменения и дополнения в использованную нами за основу тему для WordPress. Как же прикрутить наш стиль к стилю родителя? Для этого существует команда. которая стоит выше всех остальных, иначе подключение не получится. Выглядит она так: @import url(«www/mysite.ru/twentyten/style.css»). Выходит что мы берем исходный стиль и пишем дополнения и изменения. Дочерняя тема стоит ниже родительской, по этому сначала грузится родительская, а уж потом поверх мы проводим изменения нашей дочерней, которая и воспроизводится.

Что такое дочерняя тема (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, его можно удалить.

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