Если вы частый пользователь WordPress, вы, вероятно, знакомы с дочерними темами. Если вы новичок в WordPress или раньше не использовали дочерние темы, этот пост для вас!
В этой статье мы объясним назначение дочерних тем и то, как быстро создавать свои собственные.
Что такое детские темы?
Дочерняя тема позволяет вам вносить изменения в вашу тему WordPress и хранить их отдельно от вашей обычной («родительской») темы. Они полезны по ряду причин, но прежде всего потому, что они позволяют поддерживать вашу тему в актуальном состоянии, не стирая ваши изменения в процессе.
Проще говоря:
- Родительская тема ваша регулярная тема WordPress. Например, Астра.
- Ребенок тема является копией той родительской темы , которая помогает модификации сохранить и обновления отдельно от него.
Почему вы должны использовать дочернюю тему?
Есть ряд веских причин использовать дочернюю тему:
- Он защищает вашу основную тему от ошибок. Если вы измените свою тему и сломаете свой сайт в процессе, это легко исправить. Просто удалите файл дочерней темы и скопируйте новый из родительской темы. Если вы изменили родительскую тему напрямую, на ее исправление уйдет гораздо больше времени и усилий.
- Он хранит ваши настройки отдельно. Всегда рекомендуется хранить любые дополнения или изменения отдельно от исходного файла, так как это упрощает просмотр и корректировку изменений. Именно по этой причине в большинстве тем WordPress есть специальный раздел «настраиваемый CSS».
- Ваши изменения не будут уничтожены при обновлении темы. Поддержание актуальности вашей темы важно в целях безопасности. Но если вы внесете изменения в свою родительскую тему, они могут быть удалены после любых обновлений. Решение? Используйте дочернюю тему. Дочерние темы останутся прежними, даже если вы обновите родительскую тему.
Пошаговое руководство по созданию дочерней темы
В этом пошаговом руководстве мы будем использовать нашу тему Astra. Независимо от того, какую тему вы используете, процесс должен быть в основном одинаковым.
Создать дочернюю тему можно тремя способами:
- Используя генератор дочерних тем Astra
- Установив плагин дочерней темы
- Создав вручную файлы и папки в каталоге WordPress.
Генератор дочерних тем Astra
Здесь, в Astra, есть мощный инструмент, который позволяет вам создать дочернюю тему для темы Astra. Генератор дочерних тем Astra позволяет создавать дочерние темы простым нажатием кнопки.
Если вы нажмете «Дополнительные параметры», вы можете добавить дополнительные сведения, такие как Автор, Описание и Имя папки. Вы также можете добавить скриншот, если хотите.
Затем нажмите « Создать». Дочерняя тема будет загружена на ваш компьютер.
Вы можете добавить его на свой сайт, как и любую другую тему: перейдите в « Внешний вид» > « Темы», затем нажмите « Добавить» .
Вот и все! Теперь у вас есть новая дочерняя тема, которую вы можете редактировать прямо в редакторе тем.
Плагин который позволяет создавать дочернюю тему
Доступен ряд бесплатных плагинов, которые позволяют создавать дочернюю тему. Все они работают более или менее одинаково, хотя некоторые из них имеют уникальные особенности.
Child Theme Configurator
С более чем 300 000 установок этот плагин является самым популярным из доступных плагинов дочерних тем. Он имеет более десятка опций, которые позволяют настроить дочернюю тему.
Давайте рассмотрим использование этого плагина для создания дочерней темы.
1. Загрузите плагин на свой сайт WordPress.
2. После активации плагина перейдите в Инструменты> Дочерние темы, чтобы использовать плагин.
3. На первой вкладке вы увидите мастер создания дочерней темы. Выберите родительскую тему, затем нажмите кнопку «Анализировать», чтобы плагин оценил ее.
Если ваша тема подходит, вы получите подтверждающее сообщение.
Под подтверждающим сообщением находится ряд настроек. Сначала назовите каталог темы. Обратите внимание, что это имя папки , а не название самой темы.
Затем выберите, где сохранить стили. Вы можете использовать файл style.css по умолчанию или сохранить его в отдельной таблице стилей.
На следующем шаге выберите способ доступа к таблице стилей родительской темы. Прочтите раздел « Поставить таблицу стилей в очередь » ниже для получения дополнительной информации об этом процессе.
Откройте панель атрибутов темы, нажав кнопку. Здесь вы можете добавить название дочерней темы, веб-сайт, автора и веб-сайт автора.
На последнем шаге вы можете скопировать меню, виджеты и другие настройки из родительской темы в дочернюю тему.
Наконец, нажмите кнопку, чтобы создать новую дочернюю тему. Вуаля!
Другие плагины которые позволяют создавать дочернюю тему
Эти другие плагины работают аналогичным образом.
Child Theme Wizard : у этого плагина есть «мастер», который проведет вас через процесс, шаг за шагом.
Generate Child Theme : это стандартный плагин для создания дочерней темы. Он проще и имеет меньше функций, чем другие варианты, что позволяет быстрее создавать дочернюю тему.
Childify Me : еще один надежный плагин с несколькими вариантами настройки.
Child Theme Creator by Orbisius : еще один популярный плагин, который установили более 30 000 раз.
Child Theme Generator : простой, но высоко оцененный плагин.
Создание дочерней темы вручную
Если вы предпочитаете создать дочернюю тему самостоятельно, вы тоже можете это сделать!
Доступ к вашему сайту через FTP / SFTP, SSH или файловый браузер в cPanel
Во-первых, вам нужно подключиться к своему сайту, чтобы вы могли загрузить несколько файлов. Самый простой способ сделать это — через FileZilla (FTP / SFTP), Putty (SSH) или файловый браузер на панели управления вашего хоста (cPanel или Plesk).
После входа на сайт перейдите в папку / wp-content . Затем перейдите в / themes .
Там создайте папку для дочерней темы и назовите ее. Первой частью имени должно быть имя родительской темы, за которым следует тире и слово дочерний.
Создайте файл Style.css
Теперь нам нужно создать файл style.css, содержащий ваш CSS-код. CSS, что означает каскадные таблицы стилей, — это язык таблиц стилей, используемый для разработки элементов на веб-сайтах.
Если вы совершенно не знакомы с CSS, ознакомьтесь с некоторыми из этих руководств для начинающих:
Уже комфортно пользоваться CSS? Откройте ваш любимый текстовый редактор, создайте новый файл и сохраните его как style.css.
Затем скопируйте и вставьте текст ниже. Обязательно измените контент, чтобы он соответствовал вашему собственному веб-сайту или названию компании.
/*
Theme Name: New Child
Theme URI: http://example.com/astra-child
Description: Astra Child Theme is an awesome theme.
Author: Brainstorm Force
Author URI: https://www.wpastra.com
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: astra
Text Domain: astrachild
*/
Затем добавьте файл в папку new-child вашего сайта через FTP / SFTP, SSH или файловый менеджер cPanel / Plesk.
Поставьте таблицу стилей в очередь
Теперь нам нужно добавить короткую строку кода, которая соединяет родительскую тему с дочерней темой.
Есть два способа сделать это; первый простой, но неэффективный, второй занимает больше времени, но рекомендуется WordPress.
Способ 1
Этот первый метод считается устаревшим, поскольку он увеличивает время, необходимое для загрузки таблицы стилей. Однако это сделать намного проще, и если ваш сайт не очень большой, практических недостатков будет очень мало.
Это особенно верно, если вы вносите небольшое количество изменений в дочернюю тему.
Просто добавьте следующий код в конец файла style.css:
@import url(“../astra/style.css");Способ 2
Второй метод рекомендуется WordPress.org, но требует немного больше технических знаний. Это предпочтительный метод, особенно если у вас большой сайт и вы пытаетесь оптимизировать время загрузки страницы.
На боковой панели администратора WordPress перейдите в Внешний вид > Редактор тем .
Выберите свою дочернюю тему и найдите файл functions.php . Если у вас его нет, создайте его.
Первая строка этого файла должна быть открывающим тегом PHP (
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( ' astra-child', get_stylesheet_uri(),
array( astra ),
wp_get_theme()->get('Version') // this only works if you have Version in the style header
);
}
Обязательно замените astra-child именем своей дочерней темы, а массив ( astra ) — ярлыком родительской темы.
Обратите внимание, что в отличие от файла style.css (или любого другого файла) версия дочерней темы functions.php не перезаписывает файл родительской темы. Скорее, он просто добавляет код дочернего файла к родительскому файлу. Таким образом, вам не нужно копировать весь файл из родительской темы.
Активируйте тему
После того, как вы загрузили тему, откройте панель администратора WordPress и перейдите в « Внешний вид» > « Темы» . Ваша тема должна появиться в списке. Активируйте это .
Поскольку мы еще не добавили новый код, дочерняя тема будет точно такой же, как и ее родительская тема.
Добавьте настройки
Теперь давайте добавим некоторые настройки. Для этого вам нужно знать HTML и CSS. Если нет, воспользуйтесь нашими ссылками выше .
Самый простой способ внести определенные изменения в тему вашего веб-сайта — использовать инструмент инспектора в вашем браузере. В большинстве браузеров, включая Google Chrome, Mozilla Firefox и Apple Safari, вы можете сделать это, щелкнув элемент правой кнопкой мыши. Когда вы это сделаете, сбоку от окна браузера появится панель разработчика.
Например, щелкните правой кнопкой мыши верхний заголовок и выберите « Проверить» . Откроется боковая панель разработчика.
Поскольку мы специально проверили заголовок, вы можете увидеть
Отображается HTML-тег. Поскольку мы хотим изменить этот заголовок (и все заголовки), мы хотим настроить таргетинг на элемент H1.
Для этого перейдите в Внешний вид > Редактировать темы . Справа выберите свою дочернюю тему. Затем добавьте следующий код в файл style.css .
h1 { color: blue; }Сохраните файл и вернитесь на страницу своего сайта. Заголовок теперь должен быть синим.
Хорошая работа! Вы создали дочернюю тему. Каждый раз, когда вы хотите внести изменения в свою тему, добавляйте их в этот файл style.css, а не в файл style.css вашей родительской темы.
Вы также можете загрузить измененный файл напрямую через FTP / SFTP, SSH или через файловый менеджер.
Другие советы по тематике WordPress
Как изменить другие файлы в вашей теме
Каждая тема WordPress (включая нашу тему Astra ) состоит из нескольких. php файлы. К ним относятся comments.php, header.php, body.php, footer.php и так далее.
Эти файлы называются файлами «шаблонов» и не должны изменяться напрямую, по той же причине, по которой не следует изменять style.css. Если вы хотите изменить какой-либо из них, вы можете выполнить аналогичный процесс, который мы проделали выше.
В этом примере мы будем использовать файл header.php .
Откройте файл и скопируйте все содержимое. Затем вставьте это содержимое в новый текстовый файл на своем компьютере. Внесите в него какие-либо изменения, следя за тем, чтобы больше ничего не менять.
Когда вы закончите, сохраните его как header.php и загрузите в папку дочерней темы через FTP / SFTP, SSH или диспетчер файлов.
Чтобы внести изменения в будущем, либо отредактируйте его прямо в редакторе WordPress (перейдя в Редактор тем), либо повторно загрузите обновленный файл.
Functions.php
Мы также можем сделать нечто подобное для functions.php , файла, который контролирует многие процессы на вашем сайте. В отличие от файла style.css (или любого другого файла), версия functions.php дочерней темы не перезаписывает файл родительской темы.
Скорее, он просто добавляет код дочернего файла к родительскому файлу.
- Сначала откройте файл functions.ph p в своей теме.
- Скопируйте весь текст, затем вставьте его в новый текстовый документ.
- Внесите любые изменения, затем сохраните его как functions.php.
- Наконец, загрузите файл в ту же папку дочерней темы.
Вывод
Это подводит итог! Напоминаем, что вы всегда должны пытаться использовать дочернюю тему при внесении изменений в тему WordPress. Хотя может показаться, что просто быстро изменить родительскую тему проще, в конечном итоге у вас будет больше проблем.
Если вы подписались на один из наших платных планов Astra, наша служба поддержки может помочь вам настроить дочернюю тему на вашем веб-сайте WordPress. Просто свяжитесь с нами!
Вы используете дочернюю тему? Какой метод вы используете для внесения изменений? Дайте нам знать об этом в комментариях!
