Введение
Разработчики WordPress добавили возможность создавать дочерние темы, теперь у вас появилась возможность сделать свою подтему на основе родительской. Функция создания дочерней темы позволит вам изменить внешний вид родительской темы, а затем сохранить измененную тему отдельно, не затронув при этом первую. В этом руководстве вы узнаете, что такое дочерняя тема WordPress и как создать дочернюю тему в WordPress.
Для чего использовать дочернюю тему
Дочерняя тема позволяет изменять родительскую тему в соответствии с вашими пожеланиями. Главным преимуществом этой функции является то, что вы можете внести изменения в дочернюю тему без влияния на родительскую или любую другую тему использующую ее в качестве основы.
Как работает дочерняя тема WordPress
Дочерняя тема располагается в отдельной папке и содержит свои собственные файлы style.css и functions.php. При необходимости возможно добавить дополнительные файлы, но основные файлы темы обязательны для ее правильной работы.
Используя соответствующие .css и .php файлы, вы можете изменить практически все, начиная от стиля и параметров макета, до скриптов которые использует дочерняя тема.
Дочернюю тему можно сравнить со слоями в любом редакторе изображений. Когда посетитель заходит на ваш сайт, сначала загружается дочерняя тема, а затем подключаются отсутствующие стили и функции из родительской темы. В результате, большую часть кода пользователь получает из родительской темы, но перед отображением, он изменяется в соответствии с настройками дочерней темы.
Содержание
Что вам понадобится
Перед тем, как вы начнете это руководство, вам понадобится следующее:
- Доступ к панели управления WordPress
- Доступ к Файловому Менеджеру (рекомендуется) или FTP
Шаг 1 — Создание дочерней темы в WordPress
Процесс создания дочерней темы довольно прост и может быть легко выполнен внимательно следуя данному руководству.
Вам необходимо создать папку для дочерней темы в стандартном каталоге тем WordPress wp-content/themes. Для удобства и сохранения порядка в каталоге, лучше создать папку с окончанием -child после названия родительской темы. Если хотите, можете добавить название конкретного проекта. Запомните, название каталога не должно содержать пробелы для избежания возможных ошибок. Для создания новой папки воспользуйтесь FTP-клиентом или Файловым Менеджером. Мы рекомендуем использовать бесплатный FTP-клиент FileZilla
В этом руководстве мы будет использовать Файловый Менеджер, для создания дочерней темы на основе стандартной темы Twenty Seventeen, поэтому полный путь до папки будет выглядеть так wp-content/themes/twentyseventeen-child.
- Войдите в панель управления Hostinger и нажмите на иконку Файловый Менеджер.
- Перейдите в папку где установлен WordPress (обычно это public_html), далее wp-content → themes.
- Нажмите кнопку Новая папка, введите название дочерней темы и нажмите Создать.
- Войдите в созданную папку дочерней темы.
- Нажмите кнопку Новый файл, введите style.css в качестве имени файла и нажмите Создать.
- Вставьте следующий код в файл:
/* Theme Name: Twenty Seventeen Child Theme URL: http://hostinger-tutorials.ru/twentyseventeen-child/ Description: Twenty Seventeen Child Theme Author: John Doe Author URL: http://hostinger-tutorials.ru Template: twentyseventeen Version: 1.1 Text Domain: twentyseventeen-child */ Custom CSS goes after this line
- Смените все значения на соответствующие вашему домену и теме. Самыми важными полями являются Template и Theme name, так как они указывают WordPress на какой родительской теме основана ваша дочерняя тема. Далее, нажмите Сохранить для сохранения изменений.
- Добавьте файл functions.php в тот же каталог, но не вставляйте туда код из родительской темы, так как он должен оставаться отдельным от нее. Вместо этого, создайте пустой файл или добавьте новые .php функции необходимые для вашей дочерней темы.
- Из панели управления WordPress, перейдите в раздел Внешний вид → Темы и нажмите кнопку Активировать на вашей дочерней теме.
- Зайдите на ваш сайт, вы можете увидеть, что тема отображается не совсем правильно (как на картинке снизу). Без паники, это происходит из-за того, что файл functions.php еще не подгружает CSS из родительской темы.
- Из панели управления WordPress перейдите в раздел Внешний вид → Редактор и выберите файл functions.php.
- WordPress имеет функцию загрузки CSS из родительской темы. Скопируйте данный код в файл function.php дочерней темы:
<?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); } ?>
- Нажмите Обновить файл внизу страницы для сохранения изменений.
- Посетите ваш сайт вновь. Теперь CSS загружен и ваша дочерняя тема выглядит также, как и родительская.
Как вы могли заметить, процесс создания дочерней темы довольно прост, если иметь правильный подход и воспользоваться пошаговой инструкцией нашего руководства.
Шаг 2 — Настройка дочерней темы WordPress
Теперь вы скорее всего хотите поскорее начать изменять внешний вид дочерней темы. Вы же создали ее именно для этого, правильно?
Шаг 2.1 — Настройка внешнего вида вашей дочерней темы
Для настройки внешнего вида темы вам необходимо отредактировать файл custom.css в каталоге вашей дочерней темы. Для этого можно использовать текстовый редактор и FTP-клиент, файловый менеджер или редактор WordPress (Внешний вид → Редактор). Вам также необходимы некоторые базовые знания о правилах CSS и умение проверять элементы сайта с помощью браузера.
К примеру, для изменения цвета заднего фона, добавьте следующие CSS правила в файл style.css:
.site-content-contain { background-color: #d5ffa0; position: relative; }
Ниже показано то, каким станет внешний вид вашего сайта после внесения изменений.
Данный процесс применим и для изменения других элементов сайта.
Шаг 2.2 — Добавление и удаление функций
Еще одним преимуществом использования дочерней темы является возможность иметь раздельные файлы functions.php, которые как и плагины, используются для добавления (или удаления) определенных функций. Имея файл functions.php в дочерней теме, вы можете быть уверены в его сохранности, так как он не будет удален или изменен после обновления стандартной темы.
Для добавления новых функций к вашей теме, добавьте нужный PHP код в файл functions.php вашей дочерней темы. К примеру, данный код отключит функцию поиска WordPress:
function disable_search( $query, $error = true ) { if ( is_search() ) { $query->is_search = false; $query->query_vars[s] = false; $query->query[s] = false; // to error if ( $error == true ) $query->is_404 = true; } } add_action( 'parse_query', 'disable_search' ); add_filter( 'get_search_form', create_function( '$a', "return null;" ) );
Заключение
Дочерняя тема WordPress предоставляет возможность создать полностью новый проект на основе родительской темы, без какого-либо вмешательства в ее файлы. С помощью небольшого кода и работы с каталогами, вы можете изменить ваш сайт настолько, насколько вы этого захотите.
Спасибо огромное за статью. Профессионально и доступно.
Благодарю, лучшая рекомендация по данной теме!
Большое спасибо. Очень подробно и без воды.
Скажите, а не замедляет ли работу сайта дочерняя тема? Я проводил тест на своем сайте, так вот моя стандартная тема грузилась за 0,6 сек., а когда поставил дочернюю от нее, сайт стал грузится за 0,9 сек. Может случайность, а может и нет. Как думаете?
Здравствуйте,
На скорость загрузки сайта дочерняя тема оказывать серьёзное влияние не должна. Это стандартный и рекомендованный способ кастомизации тем WordPress Codex. Однако, если вы использовали для подключения стилей родительской темы директиву @import (в некоторых уроках по созданию дочерней темы используется именно она), то это может замедлить скорость загрузки сайта. В этом случае браузеру придёться совершить больше действий (+1 запрос).
В нашем руководстве мы подключали стили через wp_enqueue_style() в файле funtions.php.
С уважением,
Команда Hostinger
Скажите, а там не опечатка в файле стилей? У вас написано */ вначале, не должно быть /*
Не пробовала */, а в остальном все работает, спасибо!
Большое спасибо за Вашу внимательность, Рина. Это действительно была опечатка. Исправили! 🙂
А что с плагинами установленными на родительскую тему? они также подтянуться в дочерней теме?