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

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

Навигация по странице:

 

Что такое дочерняя тема wordpress и зачем она нужна

Дочерняя тема wordpress – это тема, которая используется в wordpress для изменения или расширения функций родительской (основной) темы.

к менюИспользование wordpress child theme позволяет полностью изменить CSS стили, Html и javascript код, а также PHP код или отдельные его функции без вмешательства в авторскую тему. Проще говоря, после наших правок мы сможем обновлять скачанную или приобретенную тему не теряя своих правок и функционала.

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

Первое что приходит в голову (и это ошибочно): нужно взять и записать свои стили в файл style.css. Таким образом мы получим требуемый результат, НО:

при обновлении все наши стили слетят. Если мы попросим помощи у поддержки они откажутся нам помочь, а если даже помогут то придется обновить в автоматическом режиме ...

Замкнутый круг? – не совсем, можно не обновлять тему и не обращаться в поддержку 🙂 

Хорошенький совет, не правда ли??

В этой ситуации нам может помочь wordpress child theme. Мы просто забрасываем в wp-content/themes чистую (без правок) приобретенную тему, а также создаем дочернею и забрасываем единственный файл: style.css (он обязательный).

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

Преимущества использования wordpress child theme

к меню(нажимайте на цифры, чтобы посмотреть все преимущества)

  • Wordpress child theme наследует все функции и возможности родительской темы + позволяет дописать свои или заменить существующие.

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

  • Для добавления своих стилей нам достаточно прописать их в дочернею тему, родительская останется без изменений.
  • При добавлении нового пользовательского типа или таксономии мы можем добавить недостающие файлы в тему, при этом они не будут мешать обновлению основной темы.
  • Безупречным преимуществом использования wordpress child theme есть возможность обновлять тему.

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

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

к менюДля создания дочерней темы вордпресс, нам понадобится выполнить всего лишь несколько условий:

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

Предлагаю вашему вниманию краткую инструкцию  по созданию wordpress child theme для темы Twenty Sixteen, которая идет в базе нового WP.

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

к менюНажимая на цифры ниже, вы сможете перейти к следующему шагу.

  • Создаем папку с произвольным именем, например "twentysixteen-child"

    child-theme-1

  • В этой папке, нужно создать файл "style.css" и поместить туда вот такой код:

    /*
    Theme Name:     Twenty Sixteen Child Theme
    Description:    Twenty Sixteen Child Theme
    Author:         Help-WP.ru
    Template:       twentysixteen
    Version:        0.1.0
    */
    @import url('../twentysixteen/style.css');

    Сохраняем файл. Пояснения и рекомендации к этому файлу можно посмотреть на кликабельном изображении ниже:

    wordpress child theme

    или далее в пункте 3 этой инструкции.

  • Theme Name: - любое произвольное имя для нашей дочерней темы вордпресс

    Description: - лобое произвольное описание темы

    Author: - автор дочерней темы

    Template: - регистрозависимое (есть разница между маленькими и большими буквами) название директории в которой находится родительская тема

    Version: - версия нашей wordpress child theme.

    @import url('../twentysixteen/style.css'); - подключаем стили с родительской темы (правильно прописывайте путь к файлу).

    Ниже можно писать свои стили для темы.

  • Заливаем нашу дочернею тему на сайт вордпресс. Я для этого использую фтп соединение, вы можете добавить через "Внешний вид" - "Темы" - "Добавить новую".

    Также нужно залить тему Twenty Sixteen. Вот так это выглядит у меня:

    child-theme-3

  • Активируем wordpress child theme в админке сайта:

    child-theme-4

  • Все, дочерняя тема wordpress подключена, теперь можно смотреть ее работу и проводить дальнейшие правки.

 

Создание дочерней темы для wordpress

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

Вот так сейчас выглядит наш сайт:

child-theme-5

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

.widget h2.widget-title{color:#228E4F;}

Вот так выглядят правки в стилях:

wordpress child theme

А так результат наших правок:дочерняя тема wordpress

Предлагаю также создать другие правки. Например, всем СЕО разработчикам надоедает то, что у виджетах заголовки выводятся в h2. Лечить эту проблему довольно просто через wordpress child theme. Для этого мы должны:

1) Создать файл functions.php.

2) Записать в него вот такой код:

<?php
add_action( 'widgets_init', 'register_new_sidebar',999 );
function register_new_sidebar() {
    unregister_sidebar('sidebar-1'); 
    register_sidebar( array(
        'name'          => __( 'Sidebar', 'twentysixteen' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add widgets here to appear in your sidebar.', 'twentysixteen' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<div class="widget-title">',
        'after_title'   => '</div>',
    ) );
    unregister_sidebar('sidebar-2'); 
    register_sidebar( array(
        'name'          => __( 'Content Bottom 1', 'twentysixteen' ),
        'id'            => 'sidebar-2',
        'description'   => __( 'Appears at the bottom of the content on posts and pages.', 'twentysixteen' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<div class="widget-title">',
        'after_title'   => '</div>',
    ) );
    unregister_sidebar('sidebar-3'); 
    register_sidebar( array(
        'name'          => __( 'Content Bottom 2', 'twentysixteen' ),
        'id'            => 'sidebar-3',
        'description'   => __( 'Appears at the bottom of the content on posts and pages.', 'twentysixteen' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<div class="widget-title">',
        'after_title'   => '</div>',
    ) );
}
?>

Здесь мы делаем очень простую вещ, удаляем все сайдбары зарегистрированные родительской темой unregister_sidebar('sidebar-3'); и закидываем новый код создания сайдбаров, который мы взяли с родительской темы. Вот и все. Смотрим результат: child-theme-8

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

Отличия родительской от дочерней темы wordpress

к менюОтличие этих тем в логике работы:

1)

если файл не подключен в дочерней теме, значит вордпресс пытается найти его в родительской теме

2)

если файл отличный от functions.php есть в дочерней теме, значит он заменяет собой аналогичный файл в родительской

 

Всем спасибо за внимание, на этом у меня пожалуй что все, делимся статьей со своими друзьями

, пишем комментарии 🙂 

Комментарии к записи «Как создать дочернюю тему или wordpress child theme»:
Сделать заказ
Онлайн помощь по WordPress