Как сделать настройки с дочерней темой

Это руководство не для всех.

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

Если вы не боитесь работать с небольшим количеством кода и запачкать руки некоторыми файлами темы, тогда добро пожаловать на борт!

В этом руководстве вы узнаете, как настроить свой сайт WordPress по своему вкусу, используя дочернюю тему, но сначала …

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

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

Повторяй за мной:

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

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

Почему?

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

Так почему это важно?

Представьте, что вы используете версию 1.04 темы Challenger. Вы переместили меню в файл header.php и добавили новый CSS в style.css. Затем выходит версия 1.05, и вы видите уведомление на панели инструментов.

При обновлении до версии 1.05 файлы header.php и style.css будут заменены файлами из Challenger версии 1.05. Они не будут содержать те же изменения, что и вы, поэтому ваша работа будет потеряна, и ее невозможно будет вернуть. Это может сильно расстроить, если вы потратите часы на свои настройки.

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

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

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

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

Базовая настройка

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

Например, дочерняя тема для темы Challenger будет иметь имя папки «челленджер-ребенок». Эта папка будет содержать все файлы дочерней темы.

Вам нужен только один файл, чтобы создать технически допустимую дочернюю тему, style.css.

Создайте файл style.css

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

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

/*
 Theme Name:   Challenger Child
 Template:     challenger
 Author:       Compete Themes
 Version:      1.0
 Author URI:   https://www.competethemes.com
 Description:  This is a child theme used to customize the Challenger WordPress theme.
 License: GNU  General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

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

Самая важная часть – это значение «Шаблон», которое должно быть установлено равным имени родительской темы. В частности, имя, используемое для папки, содержащей родительскую тему.

После этого вы уже можете активировать дочернюю тему через меню «Внешний вид» и использовать ее. Однако ваш сайт будет полностью потерян!

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

Вот как можно загрузить обе таблицы стилей…

Создайте файл functions.php

В редакторе кода создайте второй файл в дочерней теме и назовите его functions.php.

Затем добавьте в файл следующий код:

<?php 
function my_theme_enqueue_styles() { 
  $parent_style = 'parent-style'; 
  wp_enqueue_style( $parent_style, get_template_directory_uri(). '/style.css' ); 
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(). '/style.css', array( $parent_style ), wp_get_theme()->get('Version')
  );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Эта функция указывает WordPress загрузить файл style.css родительской темы, а затем загрузить файл style.css дочерней темы. Загрузка таблицы стилей дочерней темы после упрощает переопределение селекторов CSS родительской темы.

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

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

Это все, что вам нужно сделать, чтобы создать работающую дочернюю тему!

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

Добавить и переопределить стили

Вы можете добавить столько нового CSS в файл style.css дочерней темы, сколько захотите.

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

Функции переопределения

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

Например, каждая функция в Mission News обернута [function_exists()](https://php.net/manual/en/function.function-exists.php)чеком. Это означает, что вы можете скопировать функцию в файл functions.php вашей дочерней темы. Затем вы можете внести любые изменения в эту функцию.

Заменить шаблоны

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

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

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

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

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

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

Если вы новичок во всем этом, вот пара бесплатных инструментов, которые помогут вам.

Во-первых, если у вас нет редактора кода, ознакомьтесь с Visual Studio Code. Это просто, но гибко. Это также совершенно бесплатно, и на нем создано множество профессионального программного обеспечения. Это то, что я использую для создания тем в Compete Themes.

Во-вторых, создание локального сайта WordPress (офлайн) – отличный способ опробовать код, не влияя на ваш настоящий действующий сайт. Хотя в прошлом я использовал и рекомендовал MAMP, Local by Flywheel чертовски прост и прост в использовании, мне он очень нравится. Это то, что я использую для разработки тем, и это тоже бесплатно.

Ваши обновления в безопасности

Возвращаясь к предыдущему примеру…

При обновлении темы Challenger (или любой темы) весь каталог «претендент» заменяется, что не повлияет на дочернюю тему, потому что теперь у нее есть собственный каталог в папке «претендент-ребенок».

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

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