WordPress: использование дочерних тем оформления блога

На RTFM с 2016 года используется тема оформления Iconic One (см. RTFM: переезд и смена оформления), но с небольшими изменениями – добавлены отображение даты публикации поста, просмотры, всякие счётчики, правки в CSS темы.

Iconic One постоянно развивается и обновляется, и после каждого апдейта приходится все изменения вносить заново – у меня даже есть пост, где все такие изменения пошагово описаны:

Кстати – на скрине тема как раз после обновления, и хорошо видно в виджетах слева – и цвет ссылок серый, а не синий, и линии подчёркивания, которые я убираю через CSS.

Что бы избежать геморроя с обновлениями – в WP давно существует такая возможность, как использование дочерних тем, когда в дополнение к какой-то теме создаётся её “клон”, в котором можно делать изменения, которые не будут затёрты при апдейте родительской темы.

Собственно, этим и займёмся – создадим дочернюю тему блога, и внесём в неё правки, которые будут применятся в теме оформления блога.

Документация тут>>>.

Содержание

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

Каталог текущей темы:

[simterm]

root@rtfm-do-production:/data/www/rtfm# tree -d rtfm.co.ua/wp-content/themes/iconic-one
rtfm.co.ua/wp-content/themes/iconic-one
├── css
├── img
├── inc
├── js
├── languages
└── page-templates

[/simterm]

Создаём новую директорию, назовём её именем родительской темы + -child:

[simterm]

root@rtfm-do-production:/data/www/rtfm# cd /data/www/rtfm/rtfm.co.ua/wp-content/themes/
root@rtfm-do-production:/data/www/rtfm/rtfm.co.ua/wp-content/themes# mkdir iconic-one-child

[/simterm]

Добавление `style.css`

Перед активацией темы нам надо настроить CSS и наследование стилей из родительской темы.

Создаём файл iconic-one-child/style.css, в котором задаём:

Theme Name – должно быть уникальным среди всех тем (на самом деле конфликта не будет, просто в админке блога будет две одинаковых темы)
Template – имя родительской темы по имени её папки в wp-content/themes

/*
  Theme Name: Iconic One Child
  Theme URI: https://themonic.com/iconic-one/ 
  Author: Themonic 
  Author URI: https://themonic.com 
  Description: Iconic One
  Template: iconic-one
  Tags: blog, one-column, two-columns, right-sidebar, custom-background, custom-menu, custom-logo, full-width-template, rtl-language-support, theme-options, custom-colors, flexible-header, translation-ready, news, e-commerce, sticky-post, featured-images, threaded-comments  
 Text Domain: iconic-one 
*/

Добавление `functions.php`

Далее, нам надо добавить наследование родительских стилей.

Делается через добавление файла functions.php в дочерней:

The recommended way of enqueuing the parent theme stylesheet currently is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php.

Кроме того:

Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. (Specifically, it is loaded right before the parent’s file.)

Создаём файл iconic-one-child/functions.php, добавляем вызов wp_enqueue_scripts хука:

<?php

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

function my_theme_enqueue_styles() {
 
    $parent_style = 'iconic-one'; // родительская темы
 
    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 ),
        wp_get_theme()->get('Version')
    );
}

Активация темы

Находим тему в админке:

Выбираем нашу Iconic One Child, проверяем в превьюшке:

Всё хорошо – активируем её.

Обновление файлов темы

Бекапим текущие файлы – just in case:

[simterm]

root@rtfm-do-production:/data/www/rtfm/rtfm.co.ua/wp-content/themes# mkdir iconic-one-bkp/
root@rtfm-do-production:/data/www/rtfm/rtfm.co.ua/wp-content/themes# cp -r iconic-one/* iconic-one-bkp/

[/simterm]

Подключение CSS

В файле iconic-one-child/functions.php мы уже подключили импорт родительского стиля и загрузку дочернего:

...
    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 ),
        wp_get_theme()->get('Version')
    );
...

В родительском сейчас есть указание цвета текста с гиперссылками:

...
.widget-area .widget a {
    color: #757575;
    text-decoration:none;
    font-size: 98%;
}
...

Который я хочу заменить его на color: #0B91EA – светло-синий.

Открываем оба файла оба файла:

[simterm]

root@rtfm-do-production:/data/www/rtfm/rtfm.co.ua/wp-content/themes# vim -p iconic-one/style.css iconic-one-child/style.css

[/simterm]

В дочернем стиле добавляем нужный блок со своим цветом:

...
.widget-area .widget a {
    color: #0B91EA;
    text-decoration:none;
    font-size: 98%;
}

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

Аналогично добавляем удаление линий подчёркивания:

...
.widget-area .widget li,
.widget-area .widget .textwidget {
    font-size: 13px;
    line-height: 1.646153846;
    border-bottom: 0px solid #000000;
    padding: 5px 0;
}

До изменений блок виджетов выглядит так:

И после:

Наш CSS применился, всё хорошо.

Include HTML

Не совсем “include”, скорее “insert”.

В <head> надо добавить мета-тег для Яндекса:

<meta name="yandex-verification" content="SOMEID" />

Тут используем wp_head hook, который вставит нужную строку перед закрывающим </head>.

Добавляем вызов в iconic-one-child/functions.php:

...
add_action ( 'wp_head', 'custom_head_code' );
function custom_head_code() { ?>

    <meta name="yandex-verification" content="2670f8b03addbe8b" />

<?php
}

Проверяем:

[simterm]

$ curl -s https://rtfm.co.ua | grep yandex
    <meta name="yandex-verification" content="2670f8b03addbe8b" />

[/simterm]

Подключение PHP-файлов

Увы, если какой-то код надо добавить в определённое место страницы – то её придётся копировать полностью.

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

<div class="postmeta"><?php the_tags('Tags: ', ', ', '<br />'); ?><img src="https://rtfm.co.ua/wp-content/pics/ye.jpg" /><?php if(function_exists('the_views')) { the_views(); } ?></div>

И его надо добавить в двух местах – single.php, для отображения при просмотре отдельного поста, и в page.php – для отображения на Страницах.

Копируем файл родительской темы в дочернуюю:

[simterm]

root@rtfm-do-production:/data/www/rtfm/rtfm.co.ua/wp-content/themes# cp iconic-one/single.php iconic-one-child/
root@rtfm-do-production:/data/www/rtfm/rtfm.co.ua/wp-content/themes# cp iconic-one/page.php iconic-one-child/

[/simterm]

Редактируем файлы в дочерней теме, добавляем код: