Как сделать дочернюю тему WordPress: пошаговая инструкция. Дочерние темы в WordPress

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подписаться

Функционирование дочерних тем («дочерей») основывается на их взаимоотношениях с родительскими («родителями»). Важно учитывать, что бесплатные и платные themes изначально являются родителями, следовательно, дочь копирует их параметры и свойства, а также получает стандартный комплект своих функций. В будущем, с учетом потребностей конкретного интернет-ресурса, набор этих опций может быть расширен.

Если коснуться терминологии, то речь идет об особой теме, принимающей значения другой, которая выступает в качестве родительской. Для чего они создаются? Чтобы модифицировать уже имеющиеся themes ВордПресса и таким образом увеличить их количество.

Чем отличается «дочь»

Дочерняя тема ВордПресс открывает возможность вносить необходимые изменения и коррективы. Далее мы рассмотрим, как ее создать, но перед этим разберем ее ключевые отличия:

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

Производная функционирует исключительно при условии установки родителя, при этом ее активация происходит позднее.

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

Удобно ли работать

Дочерняя тема WordPress представляет собой прекрасную идею, обладающую широким перечнем преимуществ. Лично мы бы рекомендовали ее в стандартном комплекте с продуктами премиального сегмента. Перечислим лишь некоторые плюсы:

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

Работа с ними - прекрасная подготовка для перехода к написанию основного кода для родительских вариантов.

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

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

Директория (папка/место расположения файловых составляющих).

«style.css», где прописаны основные и дополнительные свойства.

«functions.php», где прописано определение функций.

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

Функционирование

«Дочери» локализуются в самостоятельной папке и могут похвастаться отдельными «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 представляет широкий выбор плагинов, большинство из них можно использовать бесплатно. Использование плагинов в разы облегчает процесс разработки. Рассмотрим наиболее популярные плагины.

Child Themify.

Это максимально простой и легкий в использовании плагин с интуитивно понятным интерфейсом. Многие настройки здесь можно выполнять одним нажатием кнопки.

2. Child Theme Configurato.

Здесь также можно сформировать «дочь», причем на это понадобится всего пара кликов. Редактор CSS здесь достаточно мощный, что позволяет выполнять настройки расширенного функционала. Плагин автоматически производит идентификацию ключевых правил CSS и не затрагивает их при редактировании.

3. _child Theme Boilerplate.

Здесь представлены готовые шаблоны для формирования «дочерей». Шаблон назван просто - «_child» - и разработан специально для упрощения работы. Шаблон предлагает интуитивную тему, от вас требуется только указать ссылку на «родителя». Шаблон данного типа позволяет создавать профессиональные варианты - здесь уже созданы 2 готовых файла, стандартные «functions.php» и «style.css».

Первый из них обладает особенной функцией под названием «aa_enqueue_styles()». Опция позволяет создавать очередь таблиц стилей, где сначала идут родительские, а затем дочерние. В результате стиль последних всегда определяется первыми.

Большинство разработчиков связывают эти таблицы между собой в CSS, но это приносит больше вреда, чем пользы. Браузер начинает долго загружать сайт, потому что нужно осуществлять загрузку стилей сначала из «родителя», а потом уже из производной. Если же поставить таблицы стилей отдельно, задача браузера облегчится, а скорость загрузки увеличится.

Вот код, с помощью которого можно добавить данную опцию:

Второй файл имеет базовый хедер, содержащий особую информацию. Данные сведения позволяют WordPress распознать его как таблицу стилей «дочери». Поэтому особенно важно прописать код для «style.css»:

Подытожим

Не имеет значения уровень владения программированием, а также опыт работы с ВордПресс. Создать дочернюю тему WordPress не составит особого труда, при этом нет риска, что настройки удалятся после выхода. Путем написания небольшого кода или внесения изменений в уже написанный и проведения простых действий с каталогом вы можете изменить свой сайт. Главное - соблюдать инструкцию, постепенно переходя от одного пункта к другому. Не забывайте следующее: если появляются обновления для «родителя», «дочери» не изменяются, это правило касается вносимых изменений в контент, настройки и так далее.

Экспериментируйте, пробуйте различные варианты и ищите оптимальный для себя.

Дочерняя тема - это тема, которая наследует функционал и дизайн другой темы, называемой «родительской». Дочерняя тема - рекомендуемый разработчиками WP способ модифицировать «под себя» существующую тему.

Зачем использовать дочернюю тему?

Есть несколько причин, почему вам бы хотелось использовать дочернюю тему:

• Если вы измените тему напрямую, и она обновится, то ваши изменения просто пропадут. Используя дочернюю тему, вы будете уверены, что ваши изменения сохранятся.
• Использование дочерней темы может ускорить время разработки.
• Использование дочерней темы - хороший способ изучить сам процесс разработки темы для Вордпресс.

Как сделать дочернюю тему WordPress

Дочерняя тема состоит, как минимум, из одной папки (директории дочерней темы) и двух файлов (style.css и functions.php), которые вам нужно будет создать. Итак, вам потребуется:

• Директория дочерней темы
• style.css
• functions.php

Первый шаг - это создание директории для дочерней темы, которая будет размещаться в папке wp-content/themes . Рекомендуется, чтобы название директории дочерней темы оканчивалось суффиксом “ -child ” (хотя и не обязательно, особенно, если вы создаете тему для публичного использования).

Вам также нужно удостовериться, чтобы в названии директории для дочерней темы не было пробелов, в против случае это вызовет ошибку. На скриншоте выше название нашей дочерней темы “ twentyfifteen-child ”, означающее, что родительской темой является Twenty Fifteen .

Следующий шаг - создание файла стилей для дочерней темы (style.css). Файл стилей должен начинаться со следующей мета-информации:

/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen 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: twenty-fifteen-child */

Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author URI: http://example.com Template: twentyfifteen 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: twenty-fifteen-child

Важная информация, о которой вы должны знать:

• Вам надо будет заменить текст этого примера, исходя из вашей ситуации.
• Строка “ Template ” соответствует названию директории родительской темы. В нашем примере родительской темой является Twenty Fifteen, поэтому строка “ Template ” содержит “ twentyfifteen ”. В вашем случае может быть другая тема, поэтому скорректируйте ее соответствующим образом.
• В принципе, файла стилей (style.css) уже достаточно для создания дочерней темы. Однако для грамотной постановки в очередь на загрузку файлов стилей потребуется файл functions.php (см. ниже).

Третий и последний шаг - постановка в очередь родительских и дочерних файлов стилей.

Заметьте, что предыдущий метод предполагал импорт родительских стилей, используя директиву @import . Сейчас это уже устаревшая практика.

Как правильно и корректно загружать стили

Корректный метод постановки в очередь родительского файла стилей заключается в добавлении хука (или, по-английски, action ) в виде функции wp_enqueue_scripts .

Данный метод также предполагает использование функции wp_enqueue_style() в дочернем файле functions.php . Поэтому вам нужно создать этот файл в директории с дочерней темой.

Первая строка дочернего файла functions.php начинается с открытия тега PHP (

Давайте посмотрим, что происходит, когда мы изменим порядок кода:

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

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

Работа с файлами шаблоном

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

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

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

Для нашего пользовательского шаблона страницы, мы просто скопируем файл page.php из родительской темы, переименуем его в custom-full-width.php и поместим его в папку с именем page-templates в нашей дочерней теме.

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

Единственное, что мы сделали здесь, это ввели заголовок, который говорит WordPress, что это шаблон страницы, где мы изменили get_header и get_footer , так что они будут включать в себя два файла с именами header-custom.php и footer-custom.php .

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

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

До сих пор наша страница выглядела так же, как и раньше. Это время для настройки. Давайте начнем с нашего пользовательского заголовка.

Еще раз, мы скопируем файл footer.php из темы двадцать пятнадцать родительской темы и вставим его в нашу дочернюю тему. На этот раз, однако, мы оставим его имя, как есть.

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

© Copyright All rights reserved.

& lt ; ? php * The template for displaying the footer * Contains footer content and the closing of the #main and #page div elements. * @package WordPress * @subpackage Twenty_Thirteen * @since Twenty Thirteen 1.0 ? & gt ; & lt ; / div & gt ; & lt ; ! -- #main --> & lt ; footer id = "colophon" class = "site-footer" role = "contentinfo" & gt ; & lt ; ? php get_sidebar ("main" ) ; ? & gt ; & lt ; div class = "site-info" & gt ; & lt ; p & gt ; & amp ; copy ; Copyright & lt ; ? php echo date (Y ) ; ? & gt ; & lt ; ? php bloginfo ("name" ) ; ? & gt ; All rights reserved . & lt ; / p & gt ; & lt ; / div & gt ; & lt ; ! -- . site - info -- & gt ; & lt ; / footer & gt ; & lt ; ! -- #colophon --> & lt ; / div & gt ; & lt ; ! -- #page --> & lt ; ? php wp_footer () ; ? & gt ; & lt ; / body & gt ; & lt ; / html & gt ;

Кстати, поиск и устранение неисправностей намного проще проводить в дочерних темах. Например, если вы случайно удалили что-то, что необходимо родительской теме, то можно просто удалить файл из дочерней темы и начать все заново.Например, в этом коде я заменил надпись о теме Twenty Thirteen на уведомление об авторском праве.

Добавление нового функционала в дочернюю тему

В интернете можно найти много руководств по копированию и вставке кусков кода в файл темы functions.php.

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

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

Я уже создал изображение хедера и миниатюру, редактируя стандартное изображение в хедере темы Twenty Thirteen. Следующий шаг – загрузить их в дочернюю тему по адресу inside / images / headers / folder .