Пропустить

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

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

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

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

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

Но, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать 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:

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

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

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

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

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

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

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

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

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

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

style.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 родительской темы.

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

<? 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родительская тема и дочерняя тема.

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

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

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

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

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

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

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

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

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

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

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

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

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

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

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

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

Например, если вы хотите изменить single.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 Pricing Table - это премиальный плагин WordPress, который позволяет легко создавать ценовые сетки, богатые функциями и интуитивно понятными интерфейсами. Он предлагает 35 предопределенных моделей и неограниченное количество опций.

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

Читайте также Как настроить кнопку «Добавить в корзину» в WooCommerce

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

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

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

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

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

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

3. Rankie

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

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

Читайте также наш Регулярные вопросы 6, связанные с SEO и перенаправлениями

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

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

Рекомендуемые ресурсы

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

Заключение

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

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

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

...

Эта статья содержит комментарии 0

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

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

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

Вверх
0 акции
доля
чирикать
Регистрация