WordPress

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

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

Введение

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

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

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

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

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

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

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

Что вам понадобится

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

Шаг 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. Нажмите кнопку Новая папка, введите название дочерней темы и нажмите Создать.

hostinger файловый менеджер создание дочерней темы

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

hostinger дочерняя тема wordpress style.css

  1. Вставьте следующий код в файл:
/*
 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
  1. Смените все значения на соответствующие вашему домену и теме. Самыми важными полями являются Template и Theme name, так как они указывают WordPress на какой родительской теме основана ваша дочерняя тема. Далее, нажмите Сохранить для сохранения изменений.

hostinger дочерняя тема wordpress style.css 2

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

hostinger дочерняя тема wordpress активировать

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

hostinger дочерняя тема wordpress без css

  1. Из панели управления WordPress перейдите в раздел Внешний вид → Редактор и выберите файл functions.php.
  2. 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' );
}
?>
  1. Нажмите Обновить файл внизу страницы для сохранения изменений.
  2. Посетите ваш сайт вновь. Теперь CSS загружен и ваша дочерняя тема выглядит также, как и родительская.

hostinger дочерняя тема wordpress с css

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

Шаг 2 — Настройка дочерней темы WordPress

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

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

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

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

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

Ниже показано то, каким станет внешний вид вашего сайта после внесения изменений.

hostinger дочерняя тема wordpress изменение внешнего вида

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

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

8 комментариев

Нажмите здесь, чтобы оставить комментарий

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

  • Скажите, а не замедляет ли работу сайта дочерняя тема? Я проводил тест на своем сайте, так вот моя стандартная тема грузилась за 0,6 сек., а когда поставил дочернюю от нее, сайт стал грузится за 0,9 сек. Может случайность, а может и нет. Как думаете?

    • Здравствуйте,
      На скорость загрузки сайта дочерняя тема оказывать серьёзное влияние не должна. Это стандартный и рекомендованный способ кастомизации тем WordPress Codex. Однако, если вы использовали для подключения стилей родительской темы директиву @import (в некоторых уроках по созданию дочерней темы используется именно она), то это может замедлить скорость загрузки сайта. В этом случае браузеру придёться совершить больше действий (+1 запрос).
      В нашем руководстве мы подключали стили через wp_enqueue_style() в файле funtions.php.
      С уважением,
      Команда Hostinger

  • Скажите, а там не опечатка в файле стилей? У вас написано */ вначале, не должно быть /*
    Не пробовала */, а в остальном все работает, спасибо!

Присоединяйтесь к тысячам других подписчиков по всему миру

и получайте самые свежие руководства на вашу электронную почту

Пожалуйста, подождите...

Спасибо за подписку!

Начните экономить сейчас!

Хостинг и доменное имя от

руб.95
00