Как Создать И Настроить Дочернюю Тему WordPress
Итак, вы создали свой сайт, выбрали подходящую тему, но не совсем довольны его внешним видом и хотели бы немного тему подкорректировать. При этом большое количество разработчиков начинают вносить правки в свою тему напрямую, что в корне неправильно. Ведь все изменения, которые будут внесены непосредственно в теме, будут потеряны после обновления темы разработчиком.
Гораздо лучше использовать дочернюю тему. Вы сможете вносить бесконечное количество правок и при этом не бояться, что они исчезнут после первого обновления.
Что такое Дочерние Темы?
Дочерняя тема полностью зависит от родительской темы, без которой она нежизнеспособна. С помощью дочерней темы мы дополняем и изменяем функционал родительской темы. Можно менять стили, функции, макет, шаблоны и многое другое. Можно изменить родительскую тему целиком. Однако, без родителя, дочерняя тема не будет функционировать.
Для создания дочерней темы достаточно 3 составляющих: папки, таблицы стилей и файла functions.php.
Когда использовать
Для внесения небольших правок на сайт достаточно пользовательских настроек темы, с помощью которых можно изменить шрифт, цвет, отступы и так далее.
Но если вы планируете более масштабные изменения, то дочерняя тема необходима.
Настройки
Давайте приступим к созданию дочерней темы на основе встроенной в WordPress Twenty Nineteen.
Примечание: шаги ниже можно выполнять непосредственно на вашем сервере через FTP-клиент. Но можно сначала настроить все локально, затем заархивировать папку дочерней темы и установить ее через Внешний вид-темы.
Создание папки
Как и любая тема, дочерние темы расположены в wp-content / themes в вашей установке WordPress. Здесь нужно создать новую папку для своей дочерней темы. Рекомендуется дать папке темы то же имя, что и родительской теме, и добавить -child. Поскольку мы используем тему Twenty Nineteen, мы назовем нашу папку двадцать twentynineteen-child. Хотя имя можно выбрать любое.
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 и найдите там свою дочернюю тему.
Когда вы нажмете «сведения о теме», вы увидите содержимое заголовка таблицы стилей.
Теперь нажмите кнопку «активировать». Если вы посмотрите на свой сайт, он будет выглядеть не очень красиво. Причина в том, что у него еще нет стилей.
Создание functions.php
functions.php позволяет изменять и добавлять функциональность и функции на сайт WordPress. Короче говоря, functions.php содержит код, который принципиально меняет внешний вид и поведение вашего сайта.
Создадим текстовый файл с именем functions.php в папке с созданной дочерней темой, и вставим следующий код:
Совет: Вам не всегда нужен functions.php, если вы не планируете использовать PHP для изменения своей темы, то вы можете полностью обойтись без него. Таблицы стилей и других файлов может быть достаточно для вашей дочерней темы.
Наследовать Родительские Стили
Чтобы подключить стили родительской темы вам нужно будет наследовать информацию таблицы стилей родительской темы. это можно сделать двумя способами:
Первый — через CSS и правило @import. Копируя приведенный ниже код в свой style.css-файл, вы говорите своей дочерней теме использовать информацию, содержащуюся в таблице стилей родительской темы.
Однако имейте в виду, что это старый способ наследования родительских стилей, который не рекомендуется применять. Причина этого-производительность.
Если вам нужно импортировать несколько таблиц стилей, то использование @import приведет к их загрузке последовательно. Это может замедлить время загрузки страницы на несколько секунд.
Второй, рекомендуемый способ загрузки родительской таблицы стилей и причина, по которой мы создали functions.php ранее — использовать wp_enqueue_style (). Эта функция WordPress безопасно добавляет файлы таблицы стилей в тему WordPress.
В нашем случае соответствующий код выглядит примерно так:
Вставьте этот код в начале файла functions.php и сохраните его (не забудьте загрузить файл, если вы используете FTP-соединение). Теперь проверьте главную страницу сайта:
Как видим, стили подключились.
Сейчас сайт он выглядит точно так же, как родительская тема. Далее вы узнаете, как настроить дочернюю тему, чтобы она выглядела именно так, как вы хотите.
Настройка Дочерней Темы
Если вы все сделали правильно, то теперь ваша дочерняя тема должна быть активирована и выглядеть точно так же, как ее родитель. Теперь мы можем начать настраивать нашу тему и изменять все, чтобы получить результат, который мы хотим. Настройки могут быть выполнены различными способами.
Реализация Пользовательских Стилей
Один из самых простых способов внести изменения в вашу тему — через CSS. Это позволяет настраивать цвета, размеры, шрифты и другие основные элементы дизайна. Если вы владеете CSS, можете изменить весь макет вашего сайта.
Вы можете переопределить любые стили в родительской теме, добавив код в таблицу стилей дочерней темы.
Например, давайте для наглядности сделаем шрифт красным.
Для этого в файле style.css дочерней темы пропишем простой код:
Переопределение Файлов Родительской Темы
С помощью таблицы стилей можно переопределить все компоненты родительской темы.
Для каждого файла темы, присутствующего в родительском каталоге, WordPress проверит, присутствует ли соответствующий файл в дочерней теме, и если да, то он будет использовать его вместо родительского. Это означает, что header.php в дочерней теме переопределит его эквивалент в родительской папке. Поэтому, если вам что-то не нравится в макете страницы, просто скопируйте соответствующий файл, внесите изменения и загрузите его в папку дочерней темы. Затем изменения появятся в дочерней теме, а исходный файл останется нетронутым.
Например, если взять content-single.php из папки Twenty Nineteen theme и открыть ее с помощью редактора, среди прочего, мы найдем следующий код:
Вот как выглядит сейчас страница записи
Давайте посмотрим, что произойдет, когда мы создадим такой же файл в дочерней теме и внесем какое-либо изменение:
Видим, что наша строчка ПРИВЕТ, МИР. появилась на странице.
Вы можете использовать этот метод для внесения всевозможных изменений на свой сайт. Просто не забудьте дать дочерней теме ту же структуру дерева папок, что и родительской. Например, если файл, который вы хотите изменить, находится в папке с именем Page-templates в родительской теме, вы должны создать папку с тем же именем в каталоге дочерней темы и поместить файл туда.
Файлы Шаблонов
В WordPress возможно использование файлов, существующих только в дочерней теме. Хорошим примером этого являются файлы шаблонов.
Предположим, мы хотим создать шаблон страницы для нашей дочерней темы. Чтобы создать его, нам нужно:
- создать пользовательский шаблон страницы, пользовательский header и footer, а затем добавить CSS.
Начнем с шаблона страницы.
Для этого мы просто копируем page.php из родительской темы в дочернюю переименуем ее в custom-page.php.
Давайте внесем несколько изменений в код, чтобы он выглядел следующим образом:
Единственное, что мы сделали здесь, это ввели заголовок, который сообщает WordPress, что это шаблон страницы — * Template Name: Custom Full Width, и мы изменили вызовы get_header и get_footer, чтобы они включали два файла с именем header-custom.php и footer-custom.php.
Давайте перейдем на страницу, которую мы хотим видеть в полной ширине, и в разделе «атрибуты страницы» выберем “Custom Full Width».
Теперь пришло время создать наши пользовательские файлы header и footer. Сначала перейдите к родительской теме, скопируйте header.php и footer.php в папку нашей дочерней темы и переименуйте их в header-custom.php и footer-custom.php, соответственно.
Пока наша страница выглядит так же, как и раньше. Давайте поменяем что-нибудь в коде этих файлов. Например, цвет заднего фона (с помощью файла style.cssдочерней темы).
Обратите внимание, что фон поменяется только для страницы с нашим шаблоном Custom Full Width, все остальные будут выглядеть как и прежде, ведь для них используются фалы header и footer родительской темы.
functions.php
functions.php файл загружается в дополнение к файлу с тем же именем в родительской теме. То есть, он выполняется непосредственно перед function.php родительской темы-в отличие от style.css, который заменяет исходный файл. Не нужно копировать полное содержимое function.php в файл в вашей дочерней теме. Используйте дочерний файл для изменения функций в родительской теме.
Вернемся к настройке нашей дочерней темы. Добавим область виджетов в нижней части сайта. Для этого нам сначала нужно зарегистрировать виджет в наши function.php.
'Footer Widget', 'id' => 'footer-widget', 'before_widget' => '', 'after_widget' => '' ) );
Теперь добавим созданный виджет в footer.php
Для этого скопируем нижний footer.php из родительской темы и вставим его в нашу дочернюю тему. На этот раз мы не будем его переименовывать.
Можно добавить немного стилей в stle.css
Теперь страница будет выглядеть так:
Теперь вы знаете, как правильно изменить понравившуюся вам тему так, чтобы ваши старания не исчезли после первого обновления.
Ищете курс по PHP, чтобы расширить свои знания в области веб-разработки? Переходите Read more
Localhost нужен для того, чтобы абсолютно бесплатно и спокойно создать Read more
Не у всех есть технические навыки, чтобы создать рабочий веб-сайт. Read more
Вы можете совершать множество изменений на своем сайте WordPress, не Read more
wp-config.php — это файл конфигурации, который является обязательным для всех Read more
Существует два способа с помощью которых можно установить wordpress тему: Установка Read more