Как сделать дочернюю тему wordpress
Дочерние темы WordPress
Дочерняя тема WordPress (подтема) — это дополнительная тема, которая позволяет изменять/дополнять функции и внешний вид основной темы. При этом основная тема остается не тронутой, а значит её можно обновлять, не опасаясь, что внесенные изменения потеряются.
Дочерняя тема — это тема созданная на основе родительской. «На основе» значит, что если запрашиваемого файла темы нет, он будет взят из родительской темы: родительская тема как бы страхует дочернюю тему. С технической стороны, при создании дочерней темы, она становится основной, а родительская дополняющей темой.
Зачем нужна дочерняя тема?
Дочерние темы нужны для того, чтобы разработчики тем могли обновлять/улучшать свои темы, а пользователи могли обновлять темы и не терять при этом внесенные изменения.
Поэтому, если вы используете готовую тему WordPress, автор которой не бросил разработку, то не редактируйте файлы темы напрямую, а создайте дочернюю тему и изменяйте основную тему через дочернюю.
Что можно изменить в дочерней теме?
В ней можно изменить практически все, но нужно понимать что и как работает (см. ниже). Однако, чтобы изменять некоторые вещи, родительская тема должна быть создана с учетом возможных изменений. Если разработчик родительской темы, не продумывает возможные изменения, то изменить некоторые моменты будет или сложно, или невозможно.
От сюда можно сделать вывод, что родительские темы бывают хорошие и плохие. Часто, подправить нужно не много: стили, изменить подвал и другие мелочи, а это можно сделать для любой родительской темы без особых проблем.
Создание дочерней темы
Создать подтему легко! Ниже создается дочерняя к twentyfifteen тема.
Директива @import сильно замедляет загрузку страницы, поэтому стили родительской темы лучше подключать иначе.
В результате у нас должна получиться такая структура:
twentyfifteen-child может содержать и другие файлы, среди них:
style.css — (обязательный) полностью заменяет такой же файл родительской темы.
functions.php — дополняет functions.php родительской темы (загружается перед ним).
style.css — единственный обязательный файл в подтеме. Дает информацию WordPress, чтобы опознать дочернюю тему.
style.css дочерней темы полностью заменяет style.css родительской темы, т.е. файл стилей родительской темы вообще не загружается.
Пример style.css дочерней темы.
Template — (обязательно) регистрозависимое название папки родительской темы.
Заметка: при изменении нужно сбросить настройку, для этого нужно переключится на другую тему и вернуться обратно.
В отличие от других файлов подтемы, functions.php не заменяет родительский файл, а дополняет его: он загружается прямо перед родительским и другими файлами подтемы.
Это значит, что для изменения родительской темы, в functions.php можно использовать хуки и можно «переопределять» функции, если они на это рассчитаны.
Использование хуков
Переопределение функции
Например, добавив такой код в functions.php дочерней темы, мы отключим подключение шрифтов:
Заметка для разработчиков тем: давайте возможность переопределять функции в дочерних темах, для этого при создании темы оборачивайте функции в условие:
В дочерней теме можно использовать все те же файлы темы, что и в любой теме WP. Полный список читайте в статье «Иерархия шаблонов темы».
Несколько примеров создания файла шаблона в дочерней теме:
#1 Добавление шаблона, отсутствующего в родительской теме
#2 Изменение шаблона, имеющегося в родительской теме
Допустим, у нас есть home.php в родительской теме и нам нужно его изменить.
Создаем home.php в подтеме.
Скопируем в него код файла из родительской темы.
Как это работает: шаг за шагом
Процесс работы дочерней темы со стороны WordPress:
WP открывает style.css темы установленной в настройках системы и считывает заголовки.
Директива Template: объявляет что у темы есть родительская тема и указывает её название. Теперь WP работает с темой как с дочерней.
Такая связь устанавливается при активации темы.
Для локализации WP будет использовать файлы перевода родительской темы. И разумеется, нужных строк перевода там может не быть. Поэтому для подтемы нужно создать файл перевода и подключить его в коде подтемы.
Для подключения есть спец. функция: load_child_theme_textdomain(). Используем её в functions.php подтемы:
Теперь можно использовать функции локализации WordPress в подтеме:
Так, для дочерней темы у нас будут отдельные файлы перевода, а для родительской будет использоваться родные файлы.
Функции WordPress связанные с дочерними темами
get_stylesheet_directory_uri() — получает URL текущей темы (дочерней, не родительской).
get_template_directory_uri() — получает URL текущей темы (родительской, не дочерней).
get_stylesheet_directory() — получает путь до текущей темы (дочерней, не родительской).
get_template_directory() — получает путь до текущей темы (родительской, не дочерней).
get_stylesheet() — получает название каталога текущей темы (дочерней, не родительской).
get_template() — получает название каталога текущей темы (родительской, не дочерней).
Т.е. если нужно получить ссылку на файл темы, но при этом используется дочерняя тема, то УРЛы от: get_stylesheet_directory_uri() и get_template_directory_uri() буду отличаться: первый будет на дочернюю тему, а второй на родительскую.
Плагин для быстрого создания дочерних тем
Чтобы не возиться с созданием папок и файлов, можно воспользоваться плагином One-Click Child Theme.
Он позволяет создать дочернюю тему из текущей в один клик. После создания темы плагин можно удалить. У плагина много хороших отзывов.
Форматы записей
Функция add_theme_support(‘post-formats’) переопределит форматы, заданные родительской темой, а не дополнит их.
@import в style.css дочерней темы
Несмотря на то что везде пишут использовать @import в style.css подтемы. Делать это я не рекомендую. Потому что в этом случае браузер не может параллельно загрузить оба файла стилей: от родительской темы и от дочерней. Ему придется загрузить их последовательно: сначала стили дочерней темы, там он увидит @import и только потом начнет загружать стили родительской темы. В итоге получается, что мы теряем в скорости загрузки страницы порядка 200мс. Столько уходит на загрузку файла стилей. Под загрузкой подразумевается отправка запроса на сервер, ожидание ответа, загрузка файла.
Лучше подключить файлы стилей по-отдельности в HTML: сначала стили родительской темы, а затем дочерней, чтобы они были ниже в HTML коде и перебивали родительские стили. Делается это так:
В результате в HEAD части HTML документа мы получим две ссылки на два файла стилей, которые при загрузке будут загружаться параллельно, а не последовательно. Это сэкономит нам время на один запрос к серверу от бразуера.
Подробнее про такой тип загрузки читайте в отдельной статье: Альтернатива @import в дочерних темах
Как Создать И Настроить Дочернюю Тему WordPress
Итак, вы создали свой сайт, выбрали подходящую тему, но не совсем довольны его внешним видом и хотели бы немного тему подкорректировать. При этом большое количество разработчиков начинают вносить правки в свою тему напрямую, что в корне неправильно. Ведь все изменения, которые будут внесены непосредственно в теме, будут потеряны после обновления темы разработчиком.
Гораздо лучше использовать дочернюю тему. Вы сможете вносить бесконечное количество правок и при этом не бояться, что они исчезнут после первого обновления.
Что такое Дочерние Темы?
Дочерняя тема полностью зависит от родительской темы, без которой она нежизнеспособна. С помощью дочерней темы мы дополняем и изменяем функционал родительской темы. Можно менять стили, функции, макет, шаблоны и многое другое. Можно изменить родительскую тему целиком. Однако, без родителя, дочерняя тема не будет функционировать.
Для создания дочерней темы достаточно 3 составляющих: папки, таблицы стилей и файла functions.php.
Когда использовать
Для внесения небольших правок на сайт достаточно пользовательских настроек темы, с помощью которых можно изменить шрифт, цвет, отступы и так далее.
Но если вы планируете более масштабные изменения, то дочерняя тема необходима.
Настройки
Давайте приступим к созданию дочерней темы на основе встроенной в WordPress Twenty Nineteen.
Примечание: шаги ниже можно выполнять непосредственно на вашем сервере через FTP-клиент. Но можно сначала настроить все локально, затем заархивировать папку дочерней темы и установить ее через Внешний вид-темы.
Создание папки
Style.css
Затем создадим таблицу стилей. Если вы еще не знаете, таблица стилей содержит код, определяющий дизайн веб-сайта. Итак, создаем файл и называем его style.css. Чтобы он работал, нам нужно вставить следующий код, так называемый «заголовок таблицы стилей», прямо в начале этого файла
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Twenty Nineteen Child Theme
Author URI: https://www.lenakso.top
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
Активировация
После создания папки и style.css, перейдите во «Внешний вид» — «Темы» в админ-панели WordPress и найдите там свою дочернюю тему.
Когда вы нажмете «сведения о теме», вы увидите содержимое заголовка таблицы стилей.
Теперь нажмите кнопку «активировать». Если вы посмотрите на свой сайт, он будет выглядеть не очень красиво. Причина в том, что у него еще нет стилей.
Настройка темы для WordPress с помощью дочерних тем
Итак, у вас на сайте есть тема для WordPress, неважно бесплатная или коммерческая, и вы хотите её настроить. Везде даются рекомендации делать это, создав дочернюю тему. Но что это значит и как это сделать?
Что такое дочерняя тема?
WordPress Codex определяет дочернюю тему (child theme) следующим образом:
Дочерняя тема WordPress (child theme) это тема, которая наследует функциональность другой темы, называющейся родительской (parent theme), и позволяет изменять или добавлять функции к родительской теме.
Использование дочерней темы для модификации существующей, это более безопасный и простой способ внести свои изменения. Вместо модификации файлов темы в исходной директории, вы можете создать дочернюю тему.
По сути, дочерняя тема в WordPress работает вместе с оригинальной, но замещает указанные вами её части, не внося реальных изменений в саму оригинальную тему.
Зачем вообще использовать дочернюю тему?
Если на вашем WordPress-сайте уже установлена бесплатная или коммерческая тема, то это отличная возможность адаптировать её под свои нужды. Возможно, вы хотите настроить некоторые цвета, добавить сайдбар, изменить отображение некоторых записей или что угодно еще.
Представьте, что в один прекрасный день вы зашли в панель администрирования своего сайта и увидели, что доступно обновление для установленной темы. Возможно, это исправление каких-то ошибок в CSS или безопасности темы.
Если вы нажмете кнопку « Обновить », то измененные вами в оригинальной теме файлы будут замещены обновленными! Все изменения будут потеряны, и вам придется начинать все сначала.
Используя механизм дочерних тем, вы можете обновлять родительскую тему сколько угодно без потери внесенных изменений. Возможно, что после очередного обновления родительской темы вам нужно будет внести некоторые корректировки в дочернюю, но это однозначно легче, нежели делать все заново.
Теперь понятно зачем, но что делать дальше?
Для примера, мы создадим дочернюю тему для WordPress, основанную на стандартной теме « Twenty Twelve ».
В данном случае, чтобы создать дочернюю тему, новую папку рядом с папкой темы « Twenty Twelve » и назовем её twentytwelve-child:
В этом коде есть две важнейшие строки:
Теперь, вы можете войти в панель управления WordPress, увидеть там тему « Twenty Twelve Child » и активировать её.
Строка с оператором @import не является строго обязательной для того, чтобы дочерняя тема была валидной. Я включил её для того, чтобы проще было производить модификации.
Я создал свою дочернюю тему! Что теперь?
Теперь, всякий раз, когда вы захотите внести изменения в свою тему, все манипуляции надо производить с вашей дочерней темой.
Файлы из директории вашей дочерней темы замещают одноименные файлы в папке родительской темы. Поэтому любой файл, который вы хотите изменить, следует вначале скопировать из папки с родительской темой в папку с дочерей, после чего можно вносить правки.
То же самое можно сказать и о других файлах, которые находятся вне папки вашей родительской темы. Вы можете добавить их в папку с дочерней темой, и WordPress будет их использовать.
Исключение составляет лишь файл functions.php. Вначале загружается файл functions.php из дочерней темы, а за ним functions.php из директории родительской темы. Поэтому нет необходимости копировать functions.php из родительской папки в дочернюю, просто измените его в папке с дочерней темой.
Вышеописанный механизм позволяет взять всю функциональность из родительской темы. К родительским темам также можно подключать дополнительные функции ( pluggable function ) и переопределять их из дочерних без возникновения конфликтов.
Что значит pluggable function?
Если коротко, что pluggable function это механизм проверки на то, объявлена ли была функция ранее или нет. Это предотвращает конфликты в случае, когда в дочерней теме объявляется функция с уже существующим в родительской теме именем.
Заключение
Вашему вниманию были представлены основы настройки тем в WordPress с использованием дочерних тем. Это не сложнее, чем вносить изменения в оригинальную тему, и в то же время, это избавляет от головной боли при обновлении. Это также дает больше наглядности при просмотре внесенных в оригинальную тему изменений, потому что все правки находятся в отдельном файле.
Как сделать дочернюю тему WordPress: пошаговая инструкция
10 марта 2018 Опубликовано в разделах: Внеклассное чтение. 2512
Функционирование дочерних тем («дочерей») основывается на их взаимоотношениях с родительскими («родителями»). Важно учитывать, что бесплатные и платные themes изначально являются родителями, следовательно, дочь копирует их параметры и свойства, а также получает стандартный комплект своих функций. В будущем, с учетом потребностей конкретного интернет-ресурса, набор этих опций может быть расширен.
Если коснуться терминологии, то речь идет об особой теме, принимающей значения другой, которая выступает в качестве родительской. Для чего они создаются? Чтобы модифицировать уже имеющиеся themes ВордПресса и таким образом увеличить их количество.
Чем отличается «дочь»
Дочерняя тема ВордПресс открывает возможность вносить необходимые изменения и коррективы. Далее мы рассмотрим, как ее создать, но перед этим разберем ее ключевые отличия:
Удобно ли работать
Дочерняя тема WordPress представляет собой прекрасную идею, обладающую широким перечнем преимуществ. Лично мы бы рекомендовали ее в стандартном комплекте с продуктами премиального сегмента. Перечислим лишь некоторые плюсы:
Содержание
Так как это продолжение родительской, набор особенностей и функций здесь идентичен. Главные составляющие:
На добавление шаблонов нет ограничений, но перечисленные составляющие в обязательном порядке присутствуют в любой.
Функционирование
«Дочери» локализуются в самостоятельной папке и могут похвастаться отдельными «functions.php» и «style.css». Всегда можно написать вспомогательные файлы, но эта пара отвечает за правильное функционирование — без сбоев и проблем.
При правильном использовании указанных форматов можно отредактировать практически любые исходные параметры, включая стиль, отдельные пункты макетов, скрипты и прочее.
Устройство theme аналогично редакторским слоям фоторедакторов. Если пользователь посещает ваш интернет-ресурс, перед ним открывается «дочь», а потом уже отсутствующие опции и стили загружаются из родительской. В конечном итоге большая часть кода передается от родителя, но перед использованием его нужно модифицировать с учетом настроек «дочери».
Как создать
Сначала проверьте, есть ли у вас в распоряжении все необходимое. А именно доступ к FTP или файловому менеджеру, открытый доступ к самой панели управления ВордПресс. Итак, приступим.
Шаг No1. Создание дочерней темы WordPress
Это достаточно простой процесс. Если будет детально следовать инструкции, его освоит любой пользователь.
Прежде всего создаем папку для дочери в стандартном каталоге. Чтобы в каталоге был порядок и содержимое было систематизировано, лучше назвать папку по образцу «Наименование родителя + окончание child». Для удобства можно добавить наименование того или иного проекта, для которого мы создаем theme. Главное, чтобы название каталога не имело пробелов, в противном случае это может привести к появлению ошибок. Файловый менеджер или FTP-клиент поможет создать новую папку. На сегодняшний день хорошо зарекомендовал себя такой FTP-клиент как FileZilla.
Для примера возьмем за основу «Twenty Seventeen», которая многим знакома. Работать я предпочитаю с Файловым менеджером, поэтому у меня путь до созданной папки выглядит таким образом:
Наверняка, вы убедились, что создание представляет собой легкий процесс. Необходимо только четко следовать инструкции и работать с правильным подходом.
Шаг No2. Настройка
Чтобы приступить к работе, видоизменять, дополнять, адаптировать под запросы и требования вашего сайта «дочь», необходимо правильно выполнить настройки. Будем разбираться по порядку.
Для этого мы внесем коррективы в «custom.css», который расположен в каталоге. Сделать это можно через FTP-клиента, обычный текстовый редактор, файловый менеджер или специальный редактор ВордПресс (найти его можно, открыв «Внешний вид», после этого «Редактор»). Здесь понадобятся хотя бы минимальные знания правил использования CSS, а также навык проверки через браузер элементов сайта. Например, чтобы изменить цвет фона в «style.css», мы прописываем следующее правило CSS:
На следующей картинке представлено, как изменится дизайн сайта после внесенных корректировок. Фон стал салатовым:
Таким образом можно отредактировать любые имеющиеся элементы на сайте.
2.Работа с функциями.
Применение и работа с «дочерьми» дает и такое преимущество, как возможность ведения двух независимых «functions.php». Напомним, что данные файлы применяются для удаления старых и добавления новых функций. Если они имеются, можно не беспокоиться о сохранности или проблемах в работе документа. Даже если основа обновится, он сохранится в неизменном состоянии.
Для добавления новой опции в файл вписывается и новый PHP-код. Например, код, представленный ниже, удалит опцию поиска WordPress.
Специальные сервисы для облегчения труда разработчика
Облегчить процесс создания можно путем использования ряда специальных плагинов. Библиотека WordPress представляет широкий выбор плагинов, большинство из них можно использовать бесплатно. Использование плагинов в разы облегчает процесс разработки. Рассмотрим наиболее популярные плагины.
Это максимально простой и легкий в использовании плагин с интуитивно понятным интерфейсом. Многие настройки здесь можно выполнять одним нажатием кнопки.
2. Child Theme Configurato.
Здесь также можно сформировать «дочь», причем на это понадобится всего пара кликов. Редактор CSS здесь достаточно мощный, что позволяет выполнять настройки расширенного функционала. Плагин автоматически производит идентификацию ключевых правил CSS и не затрагивает их при редактировании.
3. _child Theme Boilerplate.
Здесь представлены готовые шаблоны для формирования «дочерей». Шаблон назван просто — «_child» — и разработан специально для упрощения работы. Шаблон предлагает интуитивную тему, от вас требуется только указать ссылку на «родителя». Шаблон данного типа позволяет создавать профессиональные варианты — здесь уже созданы 2 готовых файла, стандартные «functions.php» и «style.css».
Первый из них обладает особенной функцией под названием «aa_enqueue_styles()». Опция позволяет создавать очередь таблиц стилей, где сначала идут родительские, а затем дочерние. В результате стиль последних всегда определяется первыми.
Большинство разработчиков связывают эти таблицы между собой в CSS, но это приносит больше вреда, чем пользы. Браузер начинает долго загружать сайт, потому что нужно осуществлять загрузку стилей сначала из «родителя», а потом уже из производной. Если же поставить таблицы стилей отдельно, задача браузера облегчится, а скорость загрузки увеличится.
Вот код, с помощью которого можно добавить данную опцию:
Второй файл имеет базовый хедер, содержащий особую информацию. Данные сведения позволяют WordPress распознать его как таблицу стилей «дочери». Поэтому особенно важно прописать код для «style.css»:
Подытожим
Не имеет значения уровень владения программированием, а также опыт работы с ВордПресс. Создать дочернюю тему WordPress не составит особого труда, при этом нет риска, что настройки удалятся после выхода. Путем написания небольшого кода или внесения изменений в уже написанный и проведения простых действий с каталогом вы можете изменить свой сайт. Главное — соблюдать инструкцию, постепенно переходя от одного пункта к другому. Не забывайте следующее: если появляются обновления для «родителя», «дочери» не изменяются, это правило касается вносимых изменений в контент, настройки и так далее.
Экспериментируйте, пробуйте различные варианты и ищите оптимальный для себя.