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

Существуют тысячи (верно, тысячи!) тем WordPress, которые вы можете выбрать при создании сайта. Однако большинство веб-дизайнеров считают, что, хотя темы WordPress являются хорошей отправной точкой, им требуется больше настроек, и создание дочерней темы — отличный способ сделать это.

Дочерние темы основаны на родительских темах и позволяют добавлять или удалять собственный код. Если вы хотите по-настоящему настроить свой сайт WordPress, использование дочерних тем — лучший способ, а Divi — один из лучших вариантов.

Основная причина, по которой креативщики создают дочернюю тему Divi, заключается в том, что при обновлении родительской темы на вашем сайте ничего не ломается. Создание дочерней темы в Divi, по сути, действует как страховочная сеть, всегда готовая поймать ваш сайт, прежде чем он сломается! Но я забегаю вперед, поэтому начнем с основ.

В этой статье я расскажу:

• Что такое Divi и каковы его особенности?
• Как создать дочернюю тему Divi (+ бесплатная дочерняя загрузка!)
• Как проверить, работает ли ваша дочерняя тема Divi

Давайте погрузимся.

Что такое Divi и каковы его особенности?

Divi — это тема WordPress от компании Elegant Themes, которая позволяет вам с нуля создавать свои страницы, используя различные структурные элементы. Это означает, что вы имеете полный контроль над всем на создаваемых вами сайтах благодаря превосходному визуальному редактору.

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

У Divi есть два интерфейса конструктора: визуальный редактор во внешней части WordPress и внутренний конструктор. Визуальный редактор делает создание сайтов для клиентов в 10 раз проще, быстрее и приятнее, поскольку вы можете редактировать на самой странице и видеть свои изменения в реальном времени. На серверной стороне вы редактируете блочное представление внутри публикации. Однако вы по-прежнему можете добавлять новые модули и делать практически все, что делаете в визуальном редакторе. Также легко переключаться между редакторами в зависимости от ваших предпочтений.

Divi также имеет три основных структурных элемента, которые вы можете использовать как есть или настроить в соответствии с вашими требованиями: разделы, строки и модули.

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

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

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

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

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

Прежде чем приступить к настройке, вам необходимо убедиться, что Divi установлен и активирован. Есть два способа сделать это:

Вариант 1: используйте Flywheel + Divi для быстрой и простой установки.

Вариант 2: Ручной метод (выполните эти два шага)

Шаг 1: Зарегистрируйтесь и загрузите Divi здесь. После того, как вы создали учетную запись и вошли в систему, вы будете перенаправлены в личный кабинет, перейдете в левую часть и найдете вкладку «Загрузки». Найдите Divi и нажмите «Загрузить». При этом загрузка Divi будет отправлена ​​в виде zip-файла в папку «Загрузки».

Шаг 2: Пришло время войти на ваш сайт WordPress. Перейдите в «Внешний вид» > «Темы». Нажмите «Добавить новую» или «Добавить новую тему» ​​справа. Нажмите кнопку «Загрузить тему» ​​в левом верхнем углу. Выберите файл и найдите zip-файл Divi. Примечание. Сохраните его в zip-архиве (не разархивируйте). Нажмите «Установить». После завершения установки нажмите «Активировать», и он будет установлен и активирован на вашем сайте! ?

Теперь вы готовы создать дочернюю тему Divi! Существует три основных способа создания дочерней темы Divi: загрузить бесплатную дочернюю тему, использовать плагин или написать ее вручную.

Вариант 1. Загрузите бесплатный файл детской темы Divi.

Один из самых быстрых (и простых!) способов создать дочернюю тему — загрузить бесплатную дочернюю тему Divi. В нем есть все необходимое для начала работы, а также возможность настройки по своему вкусу! Загрузите бесплатную дочернюю тему Divi ниже.

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

Вариант 2. Создайте дочернюю тему Divi с помощью плагина

Существует ряд плагинов, которые помогут вам создать дочернюю тему Divi. Вот несколько моих личных фаворитов:

• Диви Дети
• Конфигуратор дочерней темы
• Создатель дочерней темы от Orbisius

Диви Дети

Divi Children — это бесплатный плагин, специально разработанный для пользователей Divi. Он автоматически выполняет всю тяжелую работу за вас, так что вы можете просто сосредоточиться на творческой стороне! Каждая дочерняя тема, созданная Divi Children, имеет множество функций настройки с помощью WP Customizer. Узнайте, как установить этот плагин здесь.

Конфигуратор дочерней темы

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

Создатель дочерней темы от Orbisius

Этот плагин позволяет вам быстро создавать дочерние темы из любой темы, которая в данный момент установлена ​​на вашем сайте. С помощью этого плагина вы можете создавать неограниченное количество дочерних тем на основе родительской темы, поэтому возможности безграничны. Он имеет два редактора, и вы можете выбирать фрагменты из одной темы и вставлять в другую. Поговорим о настройке! Узнайте больше об установке этого плагина здесь.

Наконец, если плагин вам не подходит, всегда есть возможность создать дочернюю тему Divi вручную!

Вариант 3. Создайте дочернюю тему Divi вручную

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

Шаг 1. Создайте файл style.CSS.

Как вы, наверное, знаете, файл style.css предназначен для сообщения WordPress деталей вашей дочерней темы и может использоваться для добавления собственного CSS! Для этого создайте папку на своем компьютере и дайте ей имя (что-то, что позволит вам понять, что это дочерняя тема Divi). Далее создайте файл в этой папке и назовите его style.css.

Примечание. Убедитесь, что у вас есть редактор текста или кода, иначе будет сложно назвать этот файл!

Шаг 2. Добавьте это в файл style.css:

 /*
 Название темы: Детская тема Divi
 URI темы: https://www.elegantthemes.com/gallery/divi/
 Описание: Детская тема для Divi.
 Автор: Ваше имя
 URI автора: https://getflywheel.com/
 Шаблон: Диви
 Версия: 1.0.0
*/

Имя темы, URI темы, описание, автор, URI автора и версия доступны для редактирования. Оставьте имя шаблона как есть! Для большей настройки (и чтобы убедиться, что ваша дочерняя тема Divi работает), добавьте сюда любой собственный CSS.

Шаг 3. Создайте файл function.php.

Создайте еще один файл в уже созданной папке и назовите его function.php.

Затем добавьте этот код в новый файл и добавьте любые пользовательские функции, которые могут вам понадобиться, под последней строкой:

 <?php
функция divi__child_theme_enqueue_styles() {
    wp_enqueue_style('родительский стиль', get_template_directory_uri(). '/style.css');
}
add_action('wp_enqueue_scripts', 'divi__child_theme_enqueue_styles');

Шаг 4. Создайте скриншот

Это важный шаг, чтобы на вашем сайте не было пустого места там, где должно быть изображение на странице тем WordPress, поэтому быстрый снимок экрана является ключевым шагом здесь! После того, как вы сделали снимок экрана, убедитесь, что его размеры составляют 880x660 пикселей, что это .png или .jpeg (любой вариант!), а имя — [screenshot.png] или [screenshot.jpeg]. Затем вы добавите снимок экрана в основную папку.

Шаг 5. Сожмите папку и загрузите.

Наконец, сожмите папку в файл zip и загрузите в WordPress! Вы перейдете в «Внешний вид» > «Темы» > «Загрузить» и нажмите «Активировать».

Вуаля! Вы успешно создали дочернюю тему Divi и готовы настроить ее по своему желанию.

Как проверить, работает ли ваша дочерняя тема Divi

Чтобы проверить, правильно ли работает ваша дочерняя тема, добавьте немного CSS в файл style.css дочерней темы и сохраните изменения. Вы должны увидеть эти изменения на действующем сайте и узнать, что он работает!

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

Помните: никогда не следует вносить изменения в свой действующий сайт, если вы что-то сломаете! Используйте Local, бесплатное приложение для локальной разработки, чтобы прекратить отладку локальной среды и тратить больше времени на запуск красивых сайтов WordPress. Узнайте больше о Local здесь.

Заключение

Настройка — одна из лучших частей создания сайтов с использованием WordPress, и хотя темы — отличная отправная точка, приятно иметь в своем распоряжении дочерние темы, такие как Divi.

Скачать бесплатно детскую тему Divi

Один из самых быстрых (и простых!) способов создать дочернюю тему — загрузить бесплатную дочернюю тему Divi. В нем есть все необходимое для начала работы, а также возможность настройки по своему вкусу! Загрузите бесплатную дочернюю тему Divi ниже.