»  Производительность  »  Как создать дочернюю тему Вордпресс

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

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

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

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

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

Содержание:

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

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

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

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

Обновления

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

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

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

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

Порядок

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

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

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

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

Заключение

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

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

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

Оставьте комментарий

Do NOT follow this link or you will be banned from the site!