Создание дочерней темы Divi — отличный способ добавить расширенную настройку вашей темы, не беспокоясь об удалении этих изменений каждый раз, когда вы обновляете тему Divi. На самом деле, тема Divi Child имеет много преимуществ. Это позволяет вам лучше организовать весь ваш собственный CSS / код в одном месте, что упрощает совместную работу с другими. Это также поможет защитить ваш код от клиентов, у которых есть доступ к пользовательскому коду в настройщике и настройках темы.
В этом посте я покажу вам, как создать дочернюю тему Divi. Я надеюсь, что этот процесс будет полезен для тех, кто только начинает работать с Divi, а также для разработчиков, стремящихся опубликовать полные темы Divi Child для своих клиентов.
Давайте начнем.
Зачем вам нужна детская тема Divi
Divi — это тема WordPress. Всякий раз, когда вам нужно внести изменения в любую тему WordPress, рекомендуется создать дочернюю тему, которая наследует дизайн и функциональность этой родительской темы. Одна из важных причин для создания дочерней темы — сохранить изменения, сделанные при обновлении родительской темы. Каждый раз, когда вы обновляете Divi, все файлы темы обновляются, поэтому, если вы внесли какие-либо изменения в эти файлы, эти изменения будут стерты. Таким образом, вместо непосредственного изменения файлов темы Divi вы можете создать дополнительные файлы темы в дочерней теме, чтобы при обновлении Divi эти файлы дочерней темы оставались неизменными. Поэтому, если вы планируете расширенные настройки своей темы, такие как изменение шаблонов страниц и / или добавление большого количества CSS / JavaScript и / или добавление новых функций,
Можно ли использовать Divi без дочерней темы?
Можно использовать Divi без создания дочерней темы Divi, если вы понимаете почему.
Divi позволяет добавлять собственный CSS и код в такие места, как Divi Builder, Theme Customizer и Theme Settings. На самом деле Divi даже улучшила редактирование кода для этой цели. И этот код сохраняется при обновлении темы Divi. Итак, есть аргумент, что дочерняя тема не нужна, если пользователь собирается вносить только незначительные изменения. Кроме того, Divi автоматически минимизирует и кэширует статический файл CSS, поэтому не будет проблем со скоростью загрузки страницы.
Чтобы упростить вам задачу, позвольте мне рассказать об обстоятельствах, при которых вам, вероятно, следует и не следует использовать тему Divi Child.
Вероятно, вам СЛЕДУЕТ использовать дочернюю тему Divi, если …
- Вы планируете вносить изменения в код определенных файлов темы (включая такие вещи, как шаблоны страниц и functions.php).
- Вы планируете добавить сотни строк кода (CSS, JavaScript и т. Д.). Несмотря на то, что это можно добавить в такие места, как настройки вашей темы, становится сложнее управлять большим количеством CSS.
- Вы хотите сотрудничать с другими и сократить время разработки, храня все в одном организованном пространстве.
- Вы же не хотите, чтобы клиенты возились с настройщиком темы / настройками и ломали ваш код. Спрятав его в дочернюю тему, вы определенно убережете его от других.
Вероятно, вам НЕ СЛЕДУЕТ использовать дочернюю тему Divi, если …
- Вы планируете внести незначительные изменения в тему. Добавление небольшого количества CSS (например, менее 100 строк) или нескольких скриптов в настройках темы / настройщике не оправдает необходимость создания дочерней темы, если это ВСЕ, которую вы планируете создать.
- Вы не планируете сотрудничать с командой. Допустим, вы нанимаете разработчика для работы над своим сайтом, этот человек может быть знаком или не знаком с Divi и, несомненно, прибегнет к созданию дочерней темы для внесения изменений.
- Вы не против того, чтобы клиенты увидели изменения вашего кода в настройках / настройщике темы.
Что вам понадобится для создания детской темы Divi
Чтобы создать свою тему Divi Child, вам понадобится следующее:
- Тема Divi установлена и активирована
- Текстовый редактор для редактирования файлов темы. Вы можете использовать текстовый редактор, который поставляется с Windows или Mac, но если вы планируете сделать привычку редактировать эти файлы, я предлагаю приобрести более мощный текстовый редактор, такой как Atom, Sublime, Notepad ++ и т. Д.
- FTP-клиент — в этом нет необходимости, если вы планируете загружать дочернюю тему в WordPress в виде zip-файла. Но если вы пытаетесь получить доступ к файлам темы для действующего сайта, вам понадобится FTP-клиент, такой как FileZilla, чтобы иметь возможность получать доступ, редактировать, добавлять или удалять файлы темы. Если вы работаете над локальной установкой, у вас должен быть доступ к файлам темы прямо на жестком диске.
- Чашка кофе или чая (по желанию)
Строительные блоки дочерней темы
На самом базовом уровне дочерняя тема должна состоять из трех частей:
- Каталог (или папка) дочерней темы. Как и все темы, папка вашей дочерней темы будет существовать внутри папки тем WordPress, в которой хранятся файлы вашей дочерней темы.
- Файл style.css (который будет использоваться для хранения CSS вашей дочерней темы)
- Файл functions.php — на базовом уровне этот файл будет содержать действие wp_enqueue_scripts, которое ставит в очередь таблицу стилей родительской темы (подробнее об этом позже).
Создайте каталог дочерних тем (папку)
Есть два способа добавить файлы дочерней темы в WordPress. Вы можете добавить папку дочерней темы в файлы темы WordPress напрямую (через FTP или локально). Или вы можете создать папку вне WordPress для последующего архивирования и загрузки в WordPress в качестве новой темы.
Чтобы создать новую папку для вашей дочерней темы прямо в WordPress, вам потребуется доступ к файлам вашей темы, расположенным в папке WordPress Themes (wp-content / themes /). Затем создайте новую папку внутри папки тем и назовите ее «divi-child». Таким образом, новый каталог дочерних тем будет wp-content / themes / divi-child.
Но если вы создаете папку дочерней темы для последующего сжатия и загрузки в WordPress, вы можете просто создать новую папку на своем компьютере и дать ей имя «divi-child».
Создайте файл Style.css для дочерней темы, чтобы добавить собственный CSS
В папке новой темы с помощью текстового редактора создайте файл с именем style.css (имя должно быть именно таким, иначе WordPress не распознает его) и введите информацию, как показано ниже.
/*
Theme Name: Divi Child
Theme URI: https://www.elegantthemes.com/gallery/divi/
Description: Divi Child Theme
Author: Elegant Themes
Author URI: https://www.elegantthemes.com
Template: Divi
Version: 1.0.0
*/
/* =Theme customization starts here
------------------------------------------------------- */
Если вы не планируете публиковать свою дочернюю тему, вам действительно нужно ввести только имя темы и шаблон. Так что, если вы изо всех сил пытаетесь узнать, как заполнить всю эту информацию, не беспокойтесь об этом.
Вы должны убедиться, что параметр «Шаблон:» правильно определяет имя каталога вашей родительской темы — «Divi». Название темы, URI, описание и автор полностью зависят от вас. Вы можете настроить эту информацию заголовка в соответствии с потребностями вашего клиента. Например, вы можете добавить название компании вашего клиента для названия вашей темы, так как это имя отображается при посещении вашей темы на панели инструментов WordPress.
Создайте свой Functions.php, чтобы поставить таблицу стилей родительской темы в очередь
Теперь, когда у нас есть файл style.css для нашей дочерней темы, нам нужно убедиться, что мы полностью не пропустили стили, уже существующие внутри Divi (родительской темы). Это означает, что нам нужно сначала убедиться, что мы используем родительскую таблицу стилей Divi, а затем представим нашу новую таблицу стилей. Этот порядок важен, потому что, если вы знакомы с CSS, код, который вы вводите внизу, всегда будет иметь приоритет над кодом вверху. Итак, в нашем случае мы хотим, чтобы код родительской таблицы стилей загружался первым, а затем код нашей дочерней таблицы стилей.
Для этого нам нужно поставить в очередь таблицу стилей родительской темы (Divi). Enqueue — это необычное слово, буквально означающее «добавить в очередь», поэтому в этом случае мы добавляем родительскую таблицу стилей в очередь перед таблицей стилей дочерней темы. Другими словами, все, что мы добавляем в нашу таблицу стилей дочерней темы, будет добавлять к родительской теме и заменять ее.
С тех пор, как Divi был впервые запущен, он был настроен так, чтобы придерживаться оригинального рекомендованного WordPress способа настройки дочерней темы. Этот оригинальный метод создания дочерних тем включал выполнение CSS @import таблицы стилей родительской темы из файла style.css дочерней темы. Многие темы по-прежнему настроены таким образом, оставляя дочерней теме простую задачу определения собственного style.css и @import -ing Divi style.css, и Divi загрузит этот файл автоматически. Это работает Divi, используя функцию get_stylesheet_directory_uri (), когда она ставит в очередь основную таблицу стилей. Это означает, что Divi настроен для вызова либо своей собственной таблицы стилей, либо таблицы стилей дочерней темы (в зависимости от того, какая из них активна). По сути, с get_stylesheet_directory_uri (), если вы активировали дочернюю тему,
Теперь, когда WordPress обновил рекомендуемый подход к этому, вы все еще можете легко настроить стили для своей дочерней темы Divi. Все, что вам нужно сделать, это явно поставить в очередь основной style.css Divi, поскольку Divi уже настроен для постановки в очередь style.css дочерней темы.
Для этого нам нужно будет использовать наш текстовый редактор, чтобы создать еще один файл в папке дочерней темы. Сохраните файл с именем functions.php (имя должно быть именно таким), а затем добавьте в файл следующий код:
<?php
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
Затем сохраните файл.
Этот код специфичен для Divi и представляет собой модифицированную версию метода, предложенного кодексом WordPress .
Совет: вам не нужен закрывающий тег PHP. Подобные документы PHP всегда должны начинаться с открытого тега php (без него код работать не будет). Однако рекомендуется НЕ включать закрывающий тег php. Это гарантирует, что ни один из ваших php-кодов не будет отключен из-за неуместного закрывающего тега или создаст ненужные нежелательные пробелы, которые могут сломать ваш код при попытке его включения.
Кстати, вам не нужно понимать внутреннюю работу этого php-кода, чтобы это работало (очевидно). Так что, если вы полностью запутались, не волнуйтесь. Вы можете просто скопировать и вставить приведенный выше код в файл functions.php своей дочерней темы и покончить с этим.
Создайте эскиз для своей дочерней темы Divi (необязательно)
WordPress позволяет предоставить миниатюру, которая будет использоваться в качестве снимка экрана темы или фирменного изображения для вашей темы при просмотре ее на панели инструментов WordPress.
Чтобы создать миниатюру для вашей дочерней темы, сначала создайте изображение (WP рекомендует размер 1200 пикселей в ширину и 900 пикселей в высоту) и сохраните его с именем файла screenshot.png (имя файла должно быть именно таким, чтобы WP распознал его). Затем добавьте его в папку дочерней темы рядом с двумя уже существующими файлами.
Вот эскиз Divi Child, который я создал:
Вот три файла, которые должна иметь папка вашей дочерней темы:
Загрузите и активируйте свою дочернюю тему
После того, как вы создали папку дочерней темы, файл style.css и файл functions.php, ваша дочерняя тема готова для загрузки и активации.
На этом этапе убедитесь, что ваша тема Divi была загружена, чтобы ваша дочерняя тема работала после активации.
Если вы добавили папку и файлы дочерней темы непосредственно в каталог WordPress Themes, нет необходимости загружать тему в WordPress. Это уже есть. Все, что вам нужно сделать, это перейти на панель управления WordPress и выбрать « Внешний вид»> «Тема» , навести курсор на дочернюю тему и нажать кнопку «Активировать».
Если вы просто создали папку дочерней темы и файлы на своем компьютере, вам сначала нужно сжать (ZIP) ее, чтобы она имела правильный формат для загрузки в WordPress. Mac и Windows имеют встроенную функцию ZIP. После архивирования загрузка и активация дочерней темы ничем не отличается от обычной темы, просто загрузите ее через страницу « Внешний вид»> «Темы» на панели инструментов WordPress и активируйте ее.
А потом активируйте тему как обычно.
Чтобы проверить, правильно ли работает ваша дочерняя тема, добавьте CSS в файл style.css дочерней темы и сохраните изменения. Вы должны увидеть эти изменения на действующем сайте. Возможно, вам придется открыть свою страницу в частном браузере, если она кэширована.
Редактирование файла Divi Functions.php
В файле Functions.php хранятся основные функции Divi. Чтобы добавить пользовательские функции для нашей дочерней темы, мы создали файл functions.php в папке нашей дочерней темы. Однако этот файл не будет полностью отменять функции родительской темы. Он добавит в него новые функции, как и файл style.css для родительской таблицы стилей.
Поскольку это файл php, важно, чтобы весь ваш код php был заключен в соответствующие теги php. Но поскольку вы уже добавили и отредактировали файл functions.php при создании дочерней темы, вы можете добавлять любые новые функции непосредственно после кода, который уже существует.
<?php
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
//add new code hereРедактирование файлов шаблонов Divi
Вы не ограничены редактированием только файлов style.css и functions.php. Вы можете добавлять и редактировать любые файлы родительской темы, включая файлы шаблонов или файлы PHP. Здесь вы можете полностью реструктурировать и настроить любую часть своей темы (делайте это с большой осторожностью). В отличие от редактирования functions.php, файлы шаблонов должны быть полностью заменены новым. Это связано с тем, что исходный файл родительской темы (Divi) игнорируется, а вместо него используется новый. Чтобы отредактировать файл шаблона, вы должны сначала реплицировать старый файл, прежде чем мы начнем его изменять. Для этого просто скопируйте (не вырезайте!) И вставьте исходный файл темы в папку дочерней темы, убедившись, что имя файла и расположение точно такие же. Например, если мы хотим изменить файл Divi / includes / navigation.php, затем мы скопируем и вставим этот файл в divi-child / includes / navigation.php .
Пока имя и расположение точно такие же, как в родительской теме, WordPress будет использовать файл дочерней темы вместо старого.
Перенос текущего пользовательского CSS / кода в новую дочернюю тему
После того, как вы создадите свою тему Divi Child, вам нужно будет убедиться, что все в одном месте. Итак, если у вас уже есть собственный CSS или код, добавленный в Divi, вы перенесете его в свою дочернюю тему. Например, если у вас есть собственный CSS в Divi> Theme Customizer> Additional CSS , все, что вам нужно сделать, это переместить (вырезать и вставить) CSS в файл style.css вашей дочерней темы.
Обновление вашей дочерней темы
Divi и WordPress постоянно улучшаются и адаптируются. Таким образом, может наступить время (после многих обновлений Divi), что некоторые файлы тем Divi изменятся. И, если у вас есть дочерняя тема, переопределяющая файл, который был изменен, ваша дочерняя тема может каким-то образом сломаться. Это связано с тем, что вы используете устаревший код в своей дочерней теме, и его необходимо обновить, чтобы он соответствовал новому коду, используемому Divi. Поэтому, если вы какое-то время использовали дочернюю тему, и что-то начинает ломаться, вам может потребоваться обновить код.
Последние мысли
Я уверен, что есть несколько успешных способов создать дочернюю тему. Но поскольку многие темы WordPress настроены по-разному, я подумал, что было бы наиболее полезно сосредоточиться на создании дочерней темы специально для темы Divi. Разработчикам может быть полезно знать передовые методы постановки родительских и дочерних таблиц стилей в очередь для повышения производительности. Новичкам не обязательно понимать, как все работает, чтобы создать дочернюю тему с помощью этого руководства или с помощью плагина, и это тоже нормально. И вы можете понять, что дочерняя тема не нужна, потому что встроенные настройки стиля Divi — это все, что вам нужно. Несмотря на это, я надеюсь, что этот пост будет вам полезен.
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!
Автор руководства Джейсон Шампань для Divi