Настройка дочерней темы

Чтобы персонализировать дочернюю тему, необходимо базовое понимание правил CSS и знания о том, как проверять элементы, чтобы точно определить их CSS-код и класс, к которому они относятся.

Итак, давайте рассмотрим основы настройки одной из них. Для этого в активной дочерней теме нажмите Customize -> Additional CSS (Настроить -> Дополнительные CSS).

Изменение цвета фона

Вставьте следующее правило CSS, если вы хотите изменить цвет фона вашей дочерней темы WordPress:

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

Значение рядом с background-color: соответствует шестнадцатеричному коду выбранного цвета, который называется HEX-код. В данном примере, поскольку мы меняем белый цвет на светло-голубой, результат выглядит следующим образом:

Настройка дочерней темы

Изменение цвета боковой панели

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

.widget {
background: #B9EBFA;
padding: 25px;
}

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

Настройка дочерней темы

Изменение типа, размера и цвета шрифта

Чтобы изменить тип, размер и цвет шрифта в дочерней теме WordPress, вставьте приведенный ниже код в файл стилей дочерней темы:

p {
color: teal;
}
p {
font-family: Georgia;
font-size: 18px;
}

Тег p означает абзац. Как вы можете видеть ниже, приведенное выше правило изменило вид шрифтов абзаца в соответствии с указанными значениями.

Настройка дочерней темы

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

1. Сначала щелкните правой кнопкой мыши по тексту и выберите пункт Inspect. Найдите ссылку на стиль CSS и откройте ее в новой вкладке.

Настройка дочерней темы

2. Найдите нужную часть с помощью CTRL+F и скопируйте код на вкладку Additional CSS. Измените значения соответствующим образом.

Настройка дочерней темы

То же самое можно сделать с любыми другими элементами, которые вы хотите изменить в основной теме.

Изменение макета записей и страниц

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

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

Основные файлы шаблонов находятся в главной папке темы. Например, шаблон для просмотра одной записи — single.php, а шаблон для страниц — page.php.

Twenty Seventeen также разделяет свои шаблоны на части шаблона, на которые ссылаются в основном шаблоне с помощью функции WordPress get_template_part(). Например, если вы хотите отредактировать файл page.php, вы можете начать с поиска частей шаблона, чтобы понять, есть ли в нем те части, которые вам нужно отредактировать. В нашем файле примера строка 28 выглядит:

get_template_part( 'template-parts/page/content', 'page' );

Как мы это понимаем? template-parts/page/ — это путь к папке. При этом «content» относится к символу в имени файла перед дефисом, а «page» — после дефиса.

Вместе они образуют полный путь:

wp-content/themes/twentyseventeen/template-parts/page/content-page.php

Следуя структуре, если вы хотите изменить макет content-page.php, вам нужно скопировать его в папку дочерней темы и поместить в это место:

wp-content/themes/twentyseventeen-child/template-parts/page/content-page.php

Добавление и удаление функций

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

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

function your_function() {
   ?>
<script>
jQuery(document).ready(function(){
    jQuery(document).bind("contextmenu",function(e){
        return false;
    });
});
</script>
<?php
}
add_action('wp_footer', 'your_function');

Была ли эта страница полезной?