Как Создать И Настроить Дочернюю Тему WordPress

Автор: | 25.04.2019

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

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

Что такое Дочерние Темы?

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

Для создания дочерней темы достаточно 3 составляющих: папки, таблицы стилей и файла functions.php.

Когда использовать

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

Но если вы планируете более масштабные изменения, то дочерняя тема необходима.

Настройки

Давайте приступим к созданию дочерней темы на основе встроенной в WordPress Twenty Nineteen.

Примечание: шаги ниже можно выполнять непосредственно на вашем сервере через FTP-клиент. Но можно сначала настроить все локально, затем заархивировать папку дочерней темы и установить ее через Внешний вид-темы.

Создание папки 

Как и любая тема, дочерние темы расположены в wp-content / themes в вашей установке WordPress. Здесь нужно создать новую папку для своей дочерней темы. Рекомендуется дать папке темы то же имя, что и родительской теме, и добавить -child. Поскольку мы используем тему Twenty Nineteen, мы назовем нашу папку двадцать twentynineteen-child. Хотя имя можно выбрать любое.

Как Создать И Настроить Дочернюю Тему WordPress

Style.css

Затем создадим таблицу стилей. Если вы еще не знаете, таблица стилей содержит код, определяющий дизайн веб-сайта. Итак, создаем файл и называем его style.css. Чтобы он работал, нам нужно вставить следующий код, так называемый «заголовок таблицы стилей», прямо в начале этого файла

 

/*

Theme Name: Twenty Nineteen Child

Theme URI: http://example.com/twenty-nineteen-child/

description: >-

Twenty Nineteen Child Theme

Author: Me

Author URI: https://www.lenakso.top

Template: twentynineteen

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: twentynineteen-child

*/

Вот что означает каждая строка:

Theme Name (Название темы).  Имя, которое будет отображаться для вашей темы в WordPress.

Theme URI. Ссылка на демонстрационную страницу темы.

description (Описание): Описание вашей темы.

Author. Имя автора — в данном случае вас.

Author URI. Здесь можно указать адрес вашего сайта здесь, если хотите.

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

Version. Версия дочерней темы.

License.  Лицензия вашей дочерней темы.

License URI. Адрес, по которому открывается лицензия вашей темы.

Tags. Теги по которым можно найти тему в каталоге WordPress.

Но не все эти строки нужно заполнять, достаточно указать название темы и шаблона. Конечно, если вы не планируете опубликовать свою тему.

Итак, в файл style.css достаточно прописать следующий код:/*

Theme Name:   Twenty Nineteen Child Theme

description: A child theme of the Twenty Nineteen default WordPress theme

Author:       Me

Template:     twentynineteen

Version:      1.0.0

*/

Активировация

После создания папки и style.css, перейдите во «Внешний вид» — «Темы» в админ-панели WordPress и найдите там свою дочернюю тему.

Как Создать И Настроить Дочернюю Тему WordPress

Когда вы нажмете «сведения о теме», вы увидите содержимое заголовка таблицы стилей.

Как Создать И Настроить Дочернюю Тему WordPress

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

Создание functions.php

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

Создадим текстовый файл с именем functions.php в папке с созданной дочерней темой, и вставим следующий код:

<?php

//* Code goes here

 

Совет: Вам не всегда нужен functions.php, если вы не планируете использовать PHP для изменения своей темы, то вы можете полностью обойтись без него. Таблицы стилей и других файлов может быть достаточно для вашей дочерней темы.

Наследовать Родительские Стили

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

Первый — через CSS и правило @import. Копируя приведенный ниже код в свой style.css-файл, вы говорите своей дочерней теме использовать информацию, содержащуюся в таблице стилей родительской темы.

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

Однако имейте в виду, что это старый способ наследования родительских стилей, который не рекомендуется применять. Причина этого-производительность.

Если вам нужно импортировать несколько таблиц стилей, то использование @import приведет к их загрузке последовательно. Это может замедлить время загрузки страницы на несколько секунд.

Второй, рекомендуемый способ загрузки родительской таблицы стилей и причина, по которой мы создали functions.php ранее — использовать wp_enqueue_style (). Эта функция WordPress безопасно добавляет файлы таблицы стилей в тему WordPress.

В нашем случае соответствующий код выглядит примерно так:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'//www.lenakso.top/style.css' ); }

Вставьте этот код в начале файла functions.php и сохраните его (не забудьте загрузить файл, если вы используете FTP-соединение). Теперь проверьте главную страницу сайта:

Как Создать И Настроить Дочернюю Тему WordPress

Как видим, стили подключились.

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

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

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

Реализация Пользовательских Стилей

Один из самых простых способов внести изменения в вашу тему — через CSS. Это позволяет настраивать цвета, размеры, шрифты и другие основные элементы дизайна. Если вы владеете CSS, можете изменить весь макет вашего сайта.

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

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

Для этого в файле style.css дочерней темы пропишем простой код:

body{

color: red;

}

Вот что получилось:

Как Создать И Настроить Дочернюю Тему WordPress

 

Переопределение Файлов Родительской Темы

С помощью таблицы стилей можно  переопределить все компоненты родительской темы.

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

Например, если взять content-single.php из папки Twenty Nineteen theme и открыть ее с помощью редактора, среди прочего, мы найдем следующий код:

 

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<?php if ( ! twentynineteen_can_show_post_thumbnail() ) : ?>

<header class="entry-header">

<?php get_template_part( 'template-parts/header/entry', 'header' ); ?>

</header>

<?php endif; ?>

 

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

Как Создать И Настроить Дочернюю Тему WordPress

Давайте посмотрим, что произойдет, когда мы создадим такой же файл в дочерней теме и внесем какое-либо изменение:

 

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<?php if ( ! twentynineteen_can_show_post_thumbnail() ) : ?>

<header class="entry-header">

<?php get_template_part( 'template-parts/header/entry', 'header' ); ?>

</header>

ПРИВЕТ, МИР!!!

<?php endif; ?>

Видим, что наша строчка ПРИВЕТ, МИР!!! появилась на странице.

Как Создать И Настроить Дочернюю Тему WordPress

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

Файлы Шаблонов

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

Предположим, мы хотим создать шаблон страницы для нашей дочерней темы. Чтобы создать его, нам нужно:

  • создать пользовательский шаблон страницы, пользовательский header и footer, а затем добавить CSS.

Начнем с шаблона страницы.

Для этого мы просто копируем page.php из родительской темы в дочернюю переименуем ее в custom-page.php.

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

<?php

/*

* Template Name: Custom Full Width

* description:   Page template without sidebar

*/

get_header('custom');?>

<div id="primary" class="content-area">

<main id="main" class="site-main" role="main">

<?php

// Start the loop.

while ( have_posts() ) : the_post();

// Include the page content template.

get_template_part( 'content', 'page' );

// If comments are open or we have at least one comment, load up the comment template.

if ( comments_open() || get_comments_number() ) :

comments_template();

endif;

// End the loop.

endwhile;

?>

</main><!-- .site-main -->

</div><!-- .content-area -->

<?php get_footer('custom'); ?>

Единственное, что мы сделали здесь, это ввели заголовок, который сообщает WordPress, что это шаблон страницы —  * Template Name: Custom Full Width, и мы изменили вызовы get_header и get_footer, чтобы они включали два файла с именем header-custom.php и footer-custom.php.

Давайте перейдем на страницу, которую мы хотим видеть в полной ширине, и в разделе «атрибуты страницы» выберем “Custom Full Width».

Как Создать И Настроить Дочернюю Тему WordPress

Теперь пришло время создать наши пользовательские файлы header и footer. Сначала перейдите к родительской теме, скопируйте header.php и footer.php в папку нашей дочерней темы и переименуйте их в header-custom.php и footer-custom.php, соответственно.

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

Как Создать И Настроить Дочернюю Тему WordPress

Обратите внимание, что фон поменяется только для страницы с нашим шаблоном Custom Full Width, все остальные будут выглядеть как и прежде, ведь для них используются фалы header и footer родительской темы.

functions.php

functions.php файл загружается в дополнение к файлу с тем же именем в родительской теме. То есть, он выполняется непосредственно перед function.php родительской темы-в отличие от style.css, который заменяет исходный файл. Не нужно копировать полное содержимое function.php в файл в вашей дочерней теме. Используйте дочерний файл для изменения функций в родительской теме.

Вернемся к настройке нашей дочерней темы. Добавим область виджетов в нижней части сайта. Для этого нам сначала нужно зарегистрировать виджет в наши function.php.

<?php

register_sidebar( array(

'name'          => 'Footer Widget',

'id'            => 'footer-widget',

'before_widget' => '<div class="footer-widget">',

'after_widget'  => '</div>'

) );

Обратите внимание: открывающий <?PHP-тег в начале файла. Не включайте его, если он уже есть!

Теперь добавим созданный виджет в footer.php

 

<?php if ( is_active_sidebar( 'footer-widget' ) ) : dynamic_sidebar( 'footer-widget' ); endif; ?>

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

Можно добавить немного стилей в stle.css

Теперь страница будет выглядеть так:

Как Создать И Настроить Дочернюю Тему WordPress

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

Курсы по разработке на PHP
Курсы по разработке на PHP

Ищете курс по PHP, чтобы расширить свои знания в области веб-разработки?  Переходите Read more

Как перенести сайт WordPress с локального Хоста на живой сервер
transfer WP site from localhost

Localhost нужен для того, чтобы абсолютно бесплатно и спокойно создать Read more

Как сделать сайт с WordPress и Elementor
Как сделать сайт с WordPress и Elementor

Не у всех есть технические навыки, чтобы создать рабочий веб-сайт. Read more

Что такое .htaccess в WordPress и как его использовать
Что такое .htaccess в WordPress и как его использовать

Вы можете совершать множество изменений на своем сайте WordPress, не Read more

Как редактировать wp-config.php файл в WordPress
Как редактировать wp-config.php файл в WordPress

wp-config.php - это файл конфигурации, который является обязательным для всех Read more

Как установить wordpress тему
установка темы на WordPress

Существует два способа с помощью которых можно установить wordpress тему: Установка Read more

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

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

2 + 1 =