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

После настройки сайта важно сделать дочернюю тему WordPress. Дочерняя тема WordPress — это дополнительная тема, которая позволяет изменять или дополнять функции и внешний вид основной темы. При этом основная тема остается не тронутой, поэтому её можно обновлять, не опасаясь, что внесенные изменения потеряются.

Содержание закрыть

1 Введение
1. 1.1 Для чего использовать дочернюю тему
2. 1.2 Как работает дочерняя тема WordPress
2 Что нужно для того чтоб сделать дочернюю тему wordpress
3 Шаг первый — Создание дочерней темы в WordPress
4 Шаг второй печальный — Настройка дочерней темы WordPress
1. 4.1 Шаг второй с половиной — Настройка внешнего вида вашей дочерней темы
2. 4.2 Шаг второй без малого третий — Добавление и удаление функций
5 Заключение

Введение

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

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

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

Как работает дочерняя тема WordPress

Дочерняя тема располагается в отдельной папке и содержит свои собственные файлы style.css и functions.php. При необходимости возможно добавить дополнительные файлы, но основные файлы темы обязательны для ее правильной работы.

Используя соответствующие .css и .php файлы, вы можете изменить практически все, начиная от стиля и параметров макета, до скриптов которые использует дочерняя тема.

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

Что нужно для того чтоб сделать дочернюю тему wordpress

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

Доступ к панели управления WordPress
Доступ к Файловому Менеджеру (рекомендуется) или FTP

Шаг первый — Создание дочерней темы в WordPress

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

Вам необходимо создать папку сделать дочернюю тему WordPress в стандартном каталоге тем WordPress wp-content/themes. Для удобства и сохранения порядка в каталоге, лучше создать папку с окончанием -child после названия родительской темы. Если хотите, можете добавить название конкретного проекта. Запомните, название каталога не должно содержать пробелы во избежание возможных ошибок. Для создания новой папки воспользуйтесь FTP-клиентом или Файловым Менеджером. Мы рекомендуем использовать бесплатный FTP-клиент FileZilla

В этом руководстве мы будет использовать Файловый Менеджер, для создания дочерней темы на основе стандартной темы Twenty Seventeen, поэтому полный путь до папки будет выглядеть так wp-content/themes/twentyseventeen-child.

Войдите в панель управления хостинг VPS и нажмите на иконку Файловый Менеджер.
Перейдите в папку где установлен 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 на какой родительской теме основана ваша дочерняя тема. Далее, нажмите Сохранить для сохранения изменений чтоб сделать дочернюю тему 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 загружен и ваша дочерняя тема выглядит также, как и родительская. Как вы могли заметить, процесс создания дочерней темы довольно прост, если иметь правильный подход и воспользоваться пошаговой инструкцией нашего руководства.

В результате у нас должна получиться такая структура

wp-content
   └── themes
         ├── twentyfifteen (родительская тема)
         └── twentyfifteen-child (подтема; может иметь любое название)
                 └── style.css

twentyfifteen-child может содержать и другие файлы, среди них:

style.css — (обязательный) полностью заменяет такой же файл родительской темы.
functions.php — дополняет functions.php родительской темы (загружается перед ним).
файлы шаблона — index.php, home.php и т.д., которые есть/нет в родительской теме. Если файл есть в дочерней теме, то этот файл полностью заменит родительский файл. Например: создав footer.php и скопировав в него содержимое footer.php из родительской темы, мы можем изменять вывод, не меняя файл родительской темы.
другие файлы — любые другие файлы/папки/что угодно. Например, подтема может использовать новые изображения, которые подключаются в дополнительных CSS правилах.

Шаг второй печальный — Настройка дочерней темы WordPress

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

Шаг второй с половиной — Настройка внешнего вида вашей дочерней темы

Для настройки внешнего вида темы вам необходимо отредактировать файл custom.css в каталоге вашей дочерней темы. Для этого можно использовать текстовый редактор и FTP-клиент, файловый менеджер или редактор WordPress (Внешний вид → Редактор). Вам также необходимы некоторые базовые знания о правилах CSS и умение проверять элементы сайта с помощью браузера.

К примеру, для изменения цвета заднего фона, добавьте следующие CSS правила в файл style.css:

.site-content-contain {
    background-color: #d5ffa0;
    position: relative;
}

Пример style.css дочерней темы.

/*
Theme Name: Моя дочерняя тема
Template: twentyfifteen
Theme URI: http://example.com/
Description: Дочерняя тема для темы twentyfifteen
Author: Kama
Author URI: http://example.com/about/
Version: 1.0
*/

// стили родительской темы
@import url("../twentyfifteen/style.css");

// дополнительные стили
.foo{ color:red; }

Theme Name — (обязательно) название дочерней темы.
Template — (обязательно) зависимое от регистра название папки родительской темы.

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

Theme URI — адрес сайта дочерней темы.
Description — описание дочерней темы.
Author URI — адрес сайта автора дочерней темы.
Author — имя автора дочерней темы.
Version — версия дочерней темы.

Данный процесс применим и для изменения других элементов сайта.

Шаг второй без малого третий — Добавление и удаление функций

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

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