Как правильно создать дочернюю тему WordPress?

Примечание: Этот текст может содержать некоторые партнерские ссылки, а это значит, что я зарабатываю небольшую комиссию без каких-либо дополнительных затрат с вашей стороны, если вы воспользуетесь этими ссылками. Спасибо за понимание и поддержку.

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

Давайте рассмотрим вариант:

A. У вас тема WordPress регулярно обновляется автором и, соответственно, вы ее также регулярно обновляете.

B. Вы знаете, что если вы самостоятельно что-то измените в файлах вашей темы — после обновления темы все изменения будут утеряны.

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

Как быть? Ответ очень простой — сделать дочернюю тему WordPress

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

Это дополнительно созданные буквально 2 файла, с небольшим набором правил и функций, с помощью которых вы можете изменить свою основную тему, НЕ прикасаясь к файлам основной темы.

И если ваша основная тема будет регулярно обновляться — сделанные вами изменения к ней не будут утеряны.

Какие именно 2 файла?

Отдельная папка, с которой лежит как минимум 2 файла: style.css и functions.php

Первый файл нужен для хранения новых CSS-свойств, которые вы решили изменить «под себя», а файл functions.php хранит функции, которые подсказывают вашему сайту всегда начинать читать код темы именно с этого файла. То есть, внеся в него необходимые функции PHP, вы заставите ваш сайт сначала прочитать их и следовать именно тем правилам, прописанным в этом файле.

Дочерние темы получили распространение не так давно, примерно пару лет назад. Среди платных тем WordPress их очень много. Дочерняя тема позволяет дополнительно кастоимизировать (уникализировать) отдельный код или свойство вашей основной темы, и при этом — вы спокойно обновляете основную тему, не боясь потерять свою персональную кастомизацию.

Ко мне часто обращаются именно с такими задачами: купили тему в магазине themeforest.net и просят внести в нее некоторые изменения в виде другого шрифта для заголовков и основного текста, размеры шрифта, размеры и цвет заголовков H1-H6, изменить или добавить другие фоновые картинки и/или рисунки, изменить форму комментариев и сами комментарии и т.д.

Советую прочитать еще:  Плагин WordPress Last Viewed Posts | Показать посетителю, что он смотрел в последнее посещение вашего сайта

Почему еще иногда удобней дочерняя тема? Она позволяет вам «играться с свойствами» вашей активной темы, не ломая основные файлы. Довольно частое явление: не делая бэк-апа темы сразу вносят в нее какие-то изменения, где-то допускают ошибку (простую потерю символа или забыли поставить двоеточие в конце измененного свойства, забыли какую строку кода исправляли и все — можно сказать, похоронили свою тему). Я с такими горе-кодерами общаюсь довольно часто)).

Создание дочерней темы по времени занимает примерно 15 минут для не посвященного, для меня — три минуты.

Хотите, научу?

Я расскажу вам по-шагово все ваши действия и сопровожу их скриншотами.

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

Что вам понадобится для работы?

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

  1. Скачайте папку вашей активной темы на компьютер.
  2. Установите на компьютере редактор Notepad++ (бесплатный, на русском, через поиск легко ищется). Он работает с подсветкой кода PHP+CSS+HTML, что очень удобно для работы, а также у него есть поддержка отключения сигнатуры BOM, которая корректно работает с кириллическими символами, что тоже важно при создании и редактировании кода.
  3. Свой рассказ я буду основывать на дефолтной теме 2015, которая есть у каждого из вас. Вам советую первый раз поработать именно над ней, чтобы понимать как создавать дочернюю тему. А потом уже переходить к вашей основной теме.

Первый шаг — скачать папку темы 2015

Второй шаг — создайте на компьютере новую папку и назовите ее — «twentyfifteen-child»

Третий шаг — с помощью редактора Notepad++ создайте в папке 2 файла:

Четвертый шаг — откройте файл style.css и добавьте в него такой заголовок — комментарий:

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/

Короткое пояснение:

В этом коде главные — несколько строк, которые дают вашему сайту команду понимать, что перед ним — дочерняя тема и указано название основной темы / template

Пятый шаг — откройте файл functions.php и вставьте в него такой код:

<!--?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } ?-->

Короткое пояснение:

Этот код надо вставить только в том случае, если в вашей теме — только 1 файл CSS! Если таких файлов больше — используйте код ниже.

<!--?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') ); } ?-->

Шестой шаг — папку twentyfifteen-child нужно загрузить в папку с темами вашего сайта.

Важно!

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

twentyfifteen-child-theme

Седьмой шаг — активируйте дочернюю тему.

У вас все должно получится.

Если не получилось и что-то пошло не так — проверяйте, начиная с шага 1.

Мы сделали дочернюю  тему, но еще не вносили в нее свои, уникальные свойства, которые отличаются от свой в основной теме 2015.

Давайте попробуем что-нибудь изменить. Например, цвет ссылок.

Если вы знакомы с тегами HTML, вы должны знать, что тег <A> — один из основных тегов HTML и его задача — создать ссылку, которая чаще всего имеет цветовое отличие от основного текста, а также иногда имеет и другое, отличное оформление (например, подчеркивание, изменение цвета при наведении и т.д.).

Советую прочитать еще:  Плагин WordPress Posts In Page - добавляем Записи на любую статичную Страницу

Откройте файл style.css в основной дефолтной теме 2015, найдите через редактор Notepad++ строку 640 и вы увидите основные свойства для ссылки в этой теме:

a {
color: #333;
text-decoration: none;
}

Color — это цвет, в 16-ричном формате (с решеткой от 3-х до 6 цифр)
Text-decoration — оформление текста (подчеркивание, мигания и т.д.) — здесь его нет (none)

Скопируйте весь приведенный код в ваш новый файл style.css в дочерней теме, и измените цвет на оранжевый:

a {
color: #ff6500;
}

Сохраните. Перегрузите главную страницу. Получилось? У меня — да.

twentyfifteen-child-theme2

Если не получилось — вернитесь в начало и попробуйте еще раз.

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

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

Советую положить мой сайт в закладки вашего браузера и регулярно возвращаться — у меня много интересного уже есть и еще будет)

Да, и не забывайте «лайкать». Каждый ваш лайк моего блога — плюс 1 в вашу карму)) Поверьте...

Если материал вам понравился, нажмите или расскажите о нем друзьям!

Важно! Эта запись может содержать ссылки на плагины, которые к моменту вашего чтения и скачивания могут работать не корректно. Будьте внимательны.

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

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