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

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

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

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

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

Содержание:

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

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

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

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

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

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

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

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

Обновления

Если вы будете делать изменения в главной теме, то в одном из следующих обновлений ваши изменения будут заменены новой версией файлов. Вы можете:

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

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

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

Порядок

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

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

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

Многие разработчики тем предлагают уже готовую дочернюю тему на своем сайте. Зайдите на сайт своей темы и попробуйте найти дочернюю тему.

Дочерняя тема Astra и GeneratePress.

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

  1. Создайте папку темы в .../wp-content/themes/
  2. Создайте файл style.css с информацией о дочерней теме.
  3. Создайте файл functions.php и добавьте в него код для использования стилей родительской темы.
  4. По желанию — добавьте картинку темы для отображения во Внешний вид — Темы.

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

1. Создайте папку дочерней темы в папке родительской темы

Через ftp или хостинг-панель создайте папку в .../wp-content/themes/ с названием дочерней темы. В этом примере дочерняя тема будет называться twentyseventeen-child, и будет работать на базе родительской темы Twenty Seventeen.

2. Создайте файл style.css в папке дочерней темы

Внутри папки .../wp-content/themes/twentyseventeen-child создайте файл, назовите его style.css и добавьте в него информацию о дочерней теме:

Строки Theme Name и Template являются обязательными, Theme name сообщает Вордпрессу название темы, и это название отображается во Внешний вид — Темы. Template говорит Вордпрессу, какая тема является родительской для этой темы.

Остальные строки понятны сами по себе, кроме Tags и Text Domain. В Tags содержатся теги, которые используются репозитарием Вордпресс для описания темы. Я скопировал теги темы Twenty Seventeen. Text domain используется для перевода темы и должен быть уникален, вы можете использовать название новой дочерней темы.

3. Добавьте файл functions.php в дочернюю тему

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

В этом примере Вордпресс использует файл стилей дочерней темы, поэтому некоторые стили родительской темы не загрузились. Чтобы загружать стили родительской темы, нужно добавить код в файл functions.php. Создайте его в  .../wp-content/themes/twentyseventeen-child, и добавьте этот код:

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

4. Добавьте картинку

Вы можете добавить картинку темы, которая отображается в меню Внешний вид — Темы. Например, сделайте скриншот сайта, сохраните файл с именем screenshot.png и положите в папку дочерней темы.

Как работает дочерняя тема

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

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

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

Как изменять другие файлы

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

Заключение

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

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

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

комментариев 15

  1. Спасибо за статью! У меня были затруднения с functions.php. Благодаря Вам теперь не только стили сохранены, но и улучшения для СЕО категорий не сваливаются. Ещё раз, большое спасибо!

  2. Попробовал создать по инструкции дочернюю тему, но пишет «Следующие темы установлены, однако являются неполными.»

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

  3. Добрый день, Дмитрий!
    Создал рабочую, дочернюю тему. Скопировал в нее stile.css; header.php и footer.php из родительской темы. Обновился — все ок. Но вот один нюанс: Мне в дочерней теме, в functions.php надо вставить кусок кода, который был в родительской. Родительская обновляется и каждый раз в нее вставлять код не комильфо.
    /*определение IP-адреса*/
    function add_ipadress () {
    echo ‘var yaParams = {ip: «‘. $_SERVER[‘REMOTE_ADDR’] .'» };’;
    }
    add_action( ‘wp_head’, ‘add_ipadress’ );
    /*конец определения IP-адреса*/
    Подскажите, куда его можно воткнуть, чтобы сайт не падал?

    • Здравствуйте,
      Оставьте functions.php родительской темы как есть.
      Добавляйте код, который вам нужен, в functions.php дочерней темы.
      При обновлении темы будут изменяться только файлы родительской темы, файлы дочерней темы останутся нетронутыми.
      Добавьте ваш код в конец файла functions.php дочерней темы.

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

  4. Здравствуйте. По вашим урокам сделал изменение ссылки на кнопке «Вернуться в магазин» на странице Корзина в WooCommerce на произвольную страницу. Все работает.
    Также сделал дочернюю тему Астры. Но при попытке вставить в файл functions.php дочерней темы эту же ссылку — сайт выдает фатальную ошибку.

    • Здравствуйте, Талгат,
      Спасибо за отзыв!
      У некоторых тем, как например у Астры, своя дочерняя тема.
      Она работает немного по-другому. Скачайте дочернюю тему Астры с их сайта, и добавьте ваш код в нее.

      • Дмитрий, большое спасибо за ответ. Сделал как Вы советуете. Все работает как надо.
        Но все равно в при вставке кода functions.php дочерней темы выдает ошибку. Скриншоты прилагаю. Помогите пожалуйста. Спасибо.

        • Попробуйте сначала сделать дочернюю тему с «пустым» файлом functions.php. То есть только со своим кодом, который изначально находится в этом файле.
          Переключитесь на дочернюю тему.
          Если все работает нормально, попробуйте вставить код, который меняет ссылку на кнопке Вернуться в Магазин.

          На вашем скриншоте я вижу, что вы объявили функцию wc_empty_cart_redirect_url() 2 раза: в строке 28 и в строке 46.

          • Дмитрий, спасибо большое. Сработало. Затер запись в functions.php файле родительской темы. Вставил ту же запись в functions.php файл дочерней темы. Работает.Ура! Еще раз спасибо. И удачи Вам.

            • Пожалуйста!
              Да, перенесите все что нужно из functions.php родительской темы.
              Удачи вам!

Ответить

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Techbear

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

WordPress   WooCommerce   Membership   Elementor   ACF

Обновления блога

Subsription - Gray Footer
Techbear