WP ЭкспрессТемы

Дочерняя тема WordPress

Доброго утра, уважаемым читателям. Рано или поздно, многие задаются вопросами кастомизации WordPress тем. Один из безопасных способов, это создание и использование так называемых дочерних тем WordPress или Child Theme. Что это и как работает? Давайте разбираться.

Подобно тому, как в «Фотошопе» вы изменяете изображение с помощью корректирующих слоев, при этом, не затрагивая его исходный вариант, вы  можете использовать тот же концепт, настраивая под себя WordPress темы. Обратимые изменения хороши тем, что в любой момент вы можете вернуться к исходным файлам, пребывающим в первозданном виде.
Создание дочерней темы это самый простой и доступный способ отредактировать исходную тему с возможностью в один клик вернуться к ее первоначальному виду.

Что такое дочерняя тема?

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

Кастомизация темы WordPress c использованием дочерней темы

Что потребуется для создания дочерней темы?

Прежде чем мы приступим к редактированию файлов темы, вам необходимо будет  произвести некоторые приготовления. Во-первых, вам понадобится FTP-доступ к вашему WordPress сайту или что-то типа MAMP (Wamp Serwer или Денвер) для запуска WordPress на локальной машине. Без «живого» WordPress сайта, вы не сможете увидеть, как изменился сайт. Далее вам понадобится редактор исходного кода (текстовый редактор). И наконец, родительская тема, например, Twenty Twelve — дефолтная тема WordPress, как в нашем  примере.

Кастомизация темы WordPress c использованием дочерней темы

Шаг 1. Создание дочерней темы.

Все, что нужно, чтоб создать дочернюю WordPress тему – это одна папка и один файл. Запускаем FTP-клиент, настраиваем связь с хостингом и открываем — /wp-content/themes/. Как вы могли заметить, здесь лежат папки со всеми установленными вами темами. Создаем новую папку и называем ее «twentytwelve-child» или «parenttheme-child». Открываем только что созданную папку, внутри нее создаем CSS-файл с названием style.css. Открываем этот единственный обязательный для дочерней темы файл и добавляем следующую информацию:

/*

Theme Name: Twenty Twelve Child

Theme URI: http://example.com/

Description: Child theme for the Twenty Twelve theme

Author: Your name here

Author URI: http://example.com/about/

Template: Folder name of the parent theme

Version: 0.1.0

*/

После завершения этого шага, дочерняя тема должна заработать.

Шаг 2. Импорт CSS-файла родительской темы.

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

@import url(“../parenttheme/style.css”);

В нашем случае строка будет выглядеть так:

@import url(«../twentyten/style.css»);

Эта команда «скажет» дочерней теме, что она должна наследовать все свойства и  параметры, записанные в css-файле родительской WordPress темы.

Шаг 3. Активация дочерней темы.

Чтобы активировать созданную тему, нужно войти в административную панель WordPress сайта, перейти Внешний вид->Темы. Если все предыдущие шаги проделаны правильно, то в списке доступных тем, вы увидите вашу дочернюю тему. Чтоб использовать ее, просто нажмите «Активировать». Если вы откроете ваш сайт сейчас, то  не увидите никаких изменений, потому что мы еще не вносили никаких изменений.

Шаг 4. Настройка дочерней темы.

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

Начните вносить изменения в css-файла дочерней темы, и вы увидите, как меняется внешний вид сайта.

Шаг 5. Использование файла  functions.php

Если вы хотите  отредактировать или добавить PHP- функции с помощью дочерней темы, то вам необходимо создать файл  functions.php в папке  дочерней темы. Файл functions.php  дочерней темы загружается позже файла функций родительской темы. Если вы вносите изменения прямо в файл functions.php родительской темы, то после каждого ее обновления, вам придется вносить те же изменения вновь. Эту проблему можно решить с помощью файла  functions.php,  созданного в папке дочерней темы.

Кастомизация темы WordPress c использованием дочерней темы

Шаг 6. редактирование PHP-файлов.

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

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

Шаг 7. Отмена изменений.

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

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


Похожие

17 Комментов

  1. Добрый день. Спасибо Дмитрий за быстрый ответ. В Вашей статье получила исчерпывающий ответ на все свои вопросы по этой теме, но все равно создание интернет-магазина для меня пока темный лес. На Вашем сайте нашла много полезного для себя поэтому , если Вы не против, буду обращаться к Вам с вопросами, если что-то не пойму в Ваших статьях

  2. А не проще ли элементарно скопировать содержимое папки родительской темы в в папку дочерней и там в файл style.css вначале добавить строки:

    /*

    Theme Name: Twenty Twelve Child

    Theme URI: http://example.com/

    Description: Child theme for the Twenty Twelve theme

    Author: Your name here

    Author URI: http://example.com/about/

    Template: Folder name of the parent theme

    Version: 0.1.0

    */
    @import url(“../twentyten/style.css”);

    А после активации дочерней темы спокойно с ней экспериментировать, как с обычной, меняя стили CSS и файлы PHP?

    1. можно, только зачем копировать все? Копируете то, что вам нужно в дочку и правите. Все чего в дочке будет не хватать она возьмет у родителя.

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

  4. Здравствуйте. Подскажите пожалуйста, в дочерней теме файл style.css должен перезаписываться (изменяться) после изменения настроек темы?
    Как лучше делать, сначала настроить родительскую тему, потом подключить дочернюю? Насколько я понимаю, дочерняя все равно возьмет стили родительской. Или сразу настраивать дочку? Для меня важно, чтобы в родительской файлы style-static.css перезаписывались, а у меня ничего не меняется, ни style.css в дочке ни в style-static.css в мамке.

    1. Марина, ну конечно нужно править только дочернюю тему. Для этого она и делается.

  5. Здравствуйте! В моем шаблоне присутствую одноименные файлы, такие как footer.php, header.php, post.php и т.д., ещё и в папке theme/inc/structure/. Не пойму как их править? Даже если я переношу их в дочернюю тему, соблюдая структуру (theme-child/inc/structure/) и изменяю — ничего не получается. Как быть в этом случае?

  6. Здравствуйте!

    у меня есть готовая дочерняя тема, но не могу установить ее. Нужно ли создавать style.css для готовой дочерней темы?

  7. Здравствуйте Dmitry! В начале этой Вашей статьи написано, что это создание дочерней темы является одним из безопасных способов, из чего следует, что есть ещё и другие безопасные способы кастомизации тем WordPres. Не могли бы Вы рассказать о других таких способах?

    1. Здравствуйте. Есть например, плагины которые позволяют безопасно кастомизировать стили. Некоторые из них я описывал в подборках бесплатных плагинов по месяцам.

  8. Дмитрий, добрый день!

    У меня пара вопросов))

    Я сразу создал через плагин дочернюю тему и активировал Ее, как мне показалось. Потом внёс кучу изменений. И вдруг обнаружил, что активная тема, к сожалению, так и не изменилась, то есть, родительская.
    Подскажите, пжл, правильно ли я понимаю, я могу из папки род темы просто скопировать все и перенести в папку дочерней?

    Второй вопрос, вот разработчик обновит родительскую тему, что я делаю или не делаю, чтобы их обновления отразились и в дочерней теме? Нигде не нашёл этого объяснения, а это одно из важнейших для чинно мы создаём дочерние темы

    1. Антон, насколько я понимаю, родительская тема не должна изменяться, потому что все изменения должны происходить в созданной дочерней теме, для чего именно она и создаётся!

      1. Я этого не сделал. Какие у меня варианты? Могу сделать так, как описал?

  9. Дмитрий, подскажите пожалуйста, шрифты, которые я загрузил в папку fonts в теме затираются при ее обновлении или нет? Если я для правки кода использую сниппеты типа Code Snippets и Simple CSS, то нужно ли мне еще дополнительно устанавливать дочернюю тему специально для шрифтов?

  10. Здравствуйте, почему, если мы меняем тему «Twenty Twelve», а путь в css дочерней темы прописываем @import url(«../twentyten/style.css»); Такой папки в вордпрессе вообще нет.

    «Эта команда «скажет» дочерней теме, что она должна наследовать все свойства и параметры, записанные в css-файле родительской WordPress темы» — родительская тема вроде » родительская тема, например, Twenty Twelve»

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

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

Back to top button