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

Введение

Разработчики 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.

1. Войдите в панель управления Hostinger и нажмите на иконку Файловый Менеджер.
2. Перейдите в папку где установлен WordPress (обычно это public_html), далее wp-content →  themes.
3. Нажмите кнопку Новая папка, введите название дочерней темы и нажмите Создать.

4. Войдите в созданную папку дочерней темы.
5. Нажмите кнопку Новый файл, введите style.css в качестве имени файла и нажмите Создать.

6. Вставьте следующий код в файл:

/*
 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

7. Смените все значения на соответствующие вашему домену и теме. Самыми важными полями являются Template и Theme name, так как они указывают WordPress на какой родительской теме основана ваша дочерняя тема. Далее, нажмите Сохранить для сохранения изменений.

8. Добавьте файл functions.php в тот же каталог, но не вставляйте туда код из родительской темы, так как он должен оставаться отдельным от нее. Вместо этого, создайте пустой файл или добавьте новые .php функции необходимые для вашей дочерней темы.
9. Из панели управления WordPress, перейдите в раздел Внешний вид → Темы и нажмите кнопку Активировать на вашей дочерней теме.

10. Зайдите на ваш сайт, вы можете увидеть, что тема отображается не совсем правильно (как на картинке снизу). Без паники, это происходит из-за того, что файл functions.php еще не подгружает CSS из родительской темы.

11. Из панели управления WordPress перейдите в раздел Внешний вид → Редактор и выберите файл functions.php.
12. 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' );
}
?>

13. Нажмите Обновить файл внизу страницы для сохранения изменений.
14. Посетите ваш сайт вновь. Теперь 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 предоставляет возможность создать полностью новый проект на основе родительской темы, без какого-либо вмешательства в ее файлы. С помощью небольшого кода и работы с каталогами, вы можете изменить ваш сайт настолько, насколько вы этого захотите.