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

Что такое дочерняя тема и почему она так важна?

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

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

Но что такое дочерняя тема и почему дочерние темы так важны?

В этом посте мы дадим вам ответы на эти вопросы, а также расскажем о дочерних темах и о том, как они подходят вам.

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

Но, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге

А потом вернемся к тому, для чего мы здесь.

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

Дочерняя тема не является отдельной темой. Это «дочерний элемент» существующей родительской темы, отсюда и название.

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

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

Преимущества дочерней темы

На этом этапе вам может быть интересно: почему вы не можете просто внести изменения непосредственно в родительскую тему?

Основная причина, по которой это плохая идея, - это Обновления тем WordPress.

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

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

Это означает, что вы:

Обновите тему WordPress и потеряйте работу. Не очень весело, правда?
Не обновляйте тему WordPress, чтобы не потерять свою работу ... что не подходит для безопасность и работа вашего сайта WordPress.

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

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

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

Некоторые Темы WordPress даже используйте этот родительский/дочерний подход по умолчанию. Например, если вы хотите использовать фреймворк Genesis, вам понадобятся как родительская тема (базовый фреймворк), так и дочерняя тема для управления дизайном.

Когда использовать дочернюю тему

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

Когда вам не нужно использовать дочернюю тему

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

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

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

Вместо этого вы можете добавить свой собственный CSS с помощью функции Дополнительный CSS интегрирован в настройщик WordPress. Или вы можете использовать бесплатный плагин WordPress, такой как Simple CSS.

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

Например, если вы регистрируете специальную таксономию или произвольный тип сообщения, вы, вероятно, не хотите использовать файл functions.php вашей дочерней темы (потому что вы хотите сохранить их, даже если вы измените тему). Вместо этого вы должны просто добавить код вне своей темы с помощью плагина, такого как Фрагменты кода или ваш собственный плагин.

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

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

Во-первых, если вы используете Тема Hello Elementor, мы уже создали для вас дочернюю тему - вам не нужно делать это самостоятельно. Вы можете возьмите дочернюю тему Hello Elementor с WordPress.org, Вы можете установить его, как любую другую тему WordPress (мы также покажем вам, как установить дочернюю тему позже в этом посте).

Если вы используете другую тему WordPress, всегда стоит заглянуть в Google, чтобы узнать, предоставляет ли ваш разработчик темы WordPress дочернюю тему. Например, у Astra, GeneratePress и OceanWP есть инструменты / файлы, которые помогут вам загрузить дочернюю тему.

Если в вашей теме WordPress еще нет дочерней темы, вы можете создать дочернюю тему для любой темы WordPress:

Используйте Плагин Wordpress бесплатный генератор дочерних тем.
Создайте собственную дочернюю тему вручную.

Мы покажем вам, как использовать оба метода.

Как использовать плагин WordPress для дочерней темы

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

Самый популярный вариант здесь - бесплатный плагин конфигуратора дочерних тем, который активен на более чем 300.000 XNUMX веб-сайтов.

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

Он также включает другие полезные функции, если вы пытаетесь создать дочернюю тему на веб-сайте, на который вы уже добавили контент. Например, он может скопировать ваши существующие виджеты и параметры настройки в дочернюю тему.

Однако, если вы планируете использовать плагин на сайтеopérationnel, мы рекомендуем вам сделать полную резервную копию, прежде чем продолжить. Или, в идеале, настроить все это на демонстрационном сайте.

Когда у вас будет готова резервная копия, начните с установки и активации бесплатного плагина Child Theme Configurator с WordPress.org. Затем зайдите в меню Инструменты → Детские темы для создания вашей дочерней темы.

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

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

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

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

И это все ! Затем плагин создаст для вас дочернюю тему. Однако он не активируется Не нужно эта дочерняя тема.

Чтобы активировать его:

Перейти к Внешний вид → Темы.
Просмотрите, как выглядит ваш веб-сайт с помощью этой дочерней темы (чтобы убедиться, что она работает - если ваш веб-сайт выглядит странно, вероятно, из-за проблемы с CSS).
Активируйте свою дочернюю тему, как любую другую тему WordPress. Однако не забудьте оставить родительскую тему установленной.

После того, как вы активировали дочернюю тему, плагин «Конфигуратор дочерней темы» также предлагает другие полезные инструменты, которые помогут вам управлять дочерней темой. Например, если вы перейдете на вкладку Файлы в настройках плагина вы можете просмотреть все связанные файлы в родительской и дочерней темах.

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

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

Вы также найдете множество других инструментов, которые помогут вам работать с CSS.

Мы объясним, почему эти инструменты полезны позже.

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

В этом разделе мы предполагаем, что вы знаете немного больше о PHP и CSS. Если вас не устраивают приведенные здесь инструкции, мы рекомендуем использовать бесплатный плагин из предыдущего раздела.

Чтобы вручную создать дочернюю тему, вы должны создать два файла (это строгие минимумы для дочерней темы):

style.css - сначала все, что вам нужно добавить, это код для варки.

functions.php - это позволяет вам загрузить таблицу стилей родительской темы. Без него ваша дочерняя тема не смогла бы применить CSS из родительской темы, что сделало бы ваш сайт супер уродливым!

style.css

Сначала создайте файл с именем style.css и добавьте следующий код:

/*

Название темы: Hello Elementor Child

URI темы: https://github.com/elementor/hello-theme/

Описание: Hello Elementor Child - дочерняя тема Hello Elementor, созданная командой Elementor.

Автор: Elementor Team

URI автора: https://elementor.com/

Шаблон: hello-elementor

Версия: 1.0.1

Текстовый домен: hello-elementor-child

Лицензия: Стандартная общественная лицензия GNU v3 или новее.

URI лицензии: https://www.gnu.org/licenses/gpl-3.0.html

*/

Обязательно замените все, что идет после двоеточия, своей фактической информацией:

Название темы - название вашей дочерней темы.

Тема URI - сайт вашей темы и ее документация.

Описание - краткое описание темы.

Автор - имя автора темы.

URI автора: - сайт автора темы.

шаблон - имя родительской папки темы (как указано в папке wp-content / themes). Это самая важная линия; ваша дочерняя тема не будет работать без него.

Версия - номер версии вашей дочерней темы.

Текстовое поле - это используется для интернационализации. Вы можете просто добавить «дочерний» в конец имени шаблона.

Лицензия - оставьте это значение по умолчанию.

Лицензия URI - оставьте это значение по умолчанию.

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

Если вы хотите добавить свои собственные стили в будущем, вы можете добавить их в эту таблицу стилей под кодом Boilplate.

functions.php

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

В файле функции.php, добавьте следующий код:



/ * Функция для постановки таблицы стилей в очередь из родительской темы * /

function child_enqueue__parent_scripts () {
wp_enqueue_style ('родитель', get_template_directory_uri (). '/ style.css');
}
add_action ('wp_enqueue_scripts', 'child_enqueue__parent_scripts');

Загрузите файлы на сайт WordPress

Когда у вас есть файлы style.css et functions.php, вам необходимо загрузить их на свой веб-сайт WordPress в качестве новой темы.

Для этого подключитесь к своему сайту WordPress с помощью FTP.

Затем перейдите в каталог тем вашего сайта. (wp-content / themes)и создайте новую папку для своей дочерней темы.

Например, если папка вашей родительской темы привет-Факир, вы можете назвать папку дочерней темы привет-eletor-ребенок чтобы помочь вам это запомнить.

Затем загрузите свой файл style.css et functions.php внутри этой папки:

После того, как вы загрузили оба файла, вы можете перейти к Внешний вид → Темы и активируйте свою дочернюю тему, как любую другую тему WordPress.

Как установить дочернюю тему WordPress

Мы рассмотрели некоторые из этих аспектов выше в разделе «Особые методы», но мы еще раз рассмотрим, как установить дочернюю тему WordPress.

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

Вы можете установить дочернюю тему WordPress так же, как и любую другую тему WordPress:

Доступ к Внешний вид → Темы в панели управления WordPress.
Cliquez-сюр- Добавить новый.
Загрузите ZIP-файл дочерней темы.

В процессе установки WordPress определяет, что вы загружаете дочернюю тему, и проверяет, существует ли родительская тема:

После того, как вы скачали файл, обязательно активировать его.

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

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

Вот как это должно выглядеть:

Дочерняя тема - это активная тема
Родительская тема все еще установлена, но не активна

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

Как и в случае с настройкой обычной темы WordPress, у вас есть несколько вариантов «настройки» дочерней темы.

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

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

Настройте дочернюю тему с помощью кода

Если вы хотите настроить свою дочернюю тему с помощью кода, вам необходимо хорошо знать CSS, HTML и PHP.

Вот что вы можете сделать:

Добавить собственный CSS

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

Добавьте CSS под существующим кодом в верхней части файла.

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

Заменить существующие шаблоны

Если вы хотите заменить шаблоны родительской темы, вы можете:

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

Например, если вы хотите изменить сингл.php, вы сначала копируете файл single.php из родительской темы в дочернюю тему (сохраняя ту же структуру).

Затем вы можете отредактировать код в версии дочерней темы single.php.

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

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

Добавить новые шаблоны

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

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

Настройте дочернюю тему с помощью генератора тем Elementor

Если вы не знакомы, Конструктор тем Elementorпозволяет настроить часть или всю тему WordPress с помощью визуального интерфейса.

С помощью Elementor Pro и Theme Builder вы можете создавать собственные шаблоны для шаблонов своего веб-сайта:

заголовок
нижний колонтитул
Один (например, одно сообщение в блоге или страница)
Архивы (например, страница, на которой перечислены все ваши сообщения в блоге)

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

С Elementor Theme Builder вам не нужно напрямую работать с кодом. Здесь не нужно добавлять собственный CSS или копировать файлы шаблонов PHP - вы делаете все это с помощью перетаскивания.

Например, предположим, что вы хотите настроить заголовок для своей дочерней темы. Вместо того, чтобы копировать файл header.php в своей дочерней теме, а затем измените PHP, вы можете просто создать новый заголовок, используя визуальный интерфейс Elementor и интерфейс перетаскивания. Затем вы можете применить этот заголовок в любом месте вашего сайта или только в определенных частях вашего сайта.

Если вы новичок в CSS, HTML и PHP, этот подход без кода позволяет настроить дочернюю тему. И даже если вы это сделаете, этот визуальный подход все равно может сэкономить вам много времени, чем использование PHP в файлах шаблонов.

Когда вы создаете новый шаблон с помощью Elementor Theme Builder, вы сможете выбрать тип шаблона. Например, заголовок.

Затем вы можете начать с чистого листа или выбрать одну из моделей Elementor Pro:

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

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

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

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

Это :

Перейти к Внешний вид → Темы.
Активировать другую тему. Либо родительская тема, либо новая тема WordPress.

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

Вместо этого вы вернетесь к разработке своей родительской темы.

Начните использовать дочернюю тему WordPress

Дочерняя тема помогает безопасно вносить изменения в тему WordPress.

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

Чтобы начать работу с дочерней темой WordPress, вы можете:

Убедитесь, что разработчик вашей темы уже предлагает дочернюю тему. Если вы используете Hello Elementor, вы можете загрузите для него дочернюю тему с GitHub.
Используйте бесплатный плагин конфигуратора дочерних тем.
Создайте дочернюю тему вручную.

Оттуда вы можете настроить свою дочернюю тему с помощью CSS, HTML и PHP. Вы также можете пропустить код и использовать Elementor Theme Builder для настройки своей темы с помощью визуального интерфейса перетаскивания.

Откройте для себя также некоторые темы и премиальные плагины WordPress

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

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. Таблицы ценообразования AP

Таблица цен на AP представляет собой Плагин Wordpress premium, который позволяет легко создавать многофункциональные прайс-листы с интуитивно понятным интерфейсом. Он предлагает 35 предопределенных шаблонов и неограниченное количество опций.

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

Этот плагин также позволяет вам добавить аудиоконтент, видео и Google Map.

скачать| Демонстрация | веб-хостинг

2.wp Конструктор страниц

WordPress Page Builder - это идеальный конструктор для вашего веб-сайта WordPress, который поставляется с отличными инструментами для создания любой настраиваемой публикации, настраиваемой таксономии или настраиваемого метабокса.

Как особенности это имеет среди других: пользовательский тип сообщенияКПП, персонализированная таксономия, расширенные настраиваемые поля, функция перетаскивания, поддержка местоположения на карте Google, поддержка повторяемых полей и многое другое.

скачать | Демонстрация | веб-хостинг

3. Rankie

Rankie - это очень практичный модуль WordPress, предназначенный для регулярной проверки рейтинга WordPress в Google и пристального контроля за положением каждого ключевого слова.

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

Он также включает мощный инструмент исследования, который генерирует ценные списки ключевых слов. Google уже использует его для исследований.

скачать | Демонстрация | веб-хостинг

Заключение

Вот ! Это все для этого урока. У вас все еще есть вопросы о полезности дочерней темы в WordPress? Дайте нам знать в раздел комментариев и мы постараемся помочь!

Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.

Не стесняйся поделиться с друзьями в ваших любимых социальных сетях.

...