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

За годы своего существования WordPress прошел путь от простого инструмента для ведения блогов до удобной системы управления контентом (CMS). В наши дни трудно представить себе интернет без него. Благодаря популярности этого инструмента, многие профессионалы WordPress теперь специализируются на создании тем WordPress в качестве шаблонов для веб-сайтов.

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

Что такое дочерняя тема WordPress?

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

Совет

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

Что содержит дочерняя тема WordPress?

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

  • файл таблицы стилей CSS: style.css
  • function.php
  • screenshot.png (необязательно)

Давайте рассмотрим, зачем дочерней теме WordPress нужны эти три файла.

Компоненты дочерней темы WordPress

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

  • style.css содержит все правила CSS и декларации, которые управляют внешним видом темы. Наиболее важной частью здесь является заголовок, поскольку он дает WordPress основную информацию о теме и сообщает, к какой родительской теме относится дочерняя тема.
  • function.phpdопределяет порядок загрузки таблиц стилей родительской и дочерней тем. Чтобы изменения, внесенные в дочернюю тему, отменяли родительскую тему, браузер должен загрузить таблицу стилей дочерней темы WordPress после таблицы стилей родительской темы.
  • screenshot.png — необязательный файл, но его стоит создать, чтобы вы могли сразу узнать свою дочернюю тему WordPress в бэкенде. WordPress автоматически отображает файлы screenshot.png в меню темы соответствующего шаблона.
Примечание

Если вы хотите внести лишь незначительные изменения в тему, вам может подойти более простое решение, например, плагин Simple Custom CSS или встроенный инструмент Customizer (WordPress версии 4.7 и выше).

Преимущества и недостатки дочерних тем WordPress

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

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

Как создать дочернюю тему WordPress: Пошаговое руководство

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

Шаг 1: Создайте папку дочерней темы

Используя FTP-клиент, например FileZilla, войдите на свой сервер и найдите следующую папку в вашей установке WordPress:

your-wordpress-installation-path/wp-content/themes/

В папке themes создайте подпапку для дочерней темы WordPress. Лучше всего дать папке то же имя, что и родительской теме, но с добавлением «-child» в конце.

Шаг 2: Создайте таблицу стилей для дочерней темы

Создайте файл style.css и с помощью текстового редактора добавьте в заголовок следующую информацию:

/*
 Theme Name:  [Name of parent theme] Child
 Theme URI:  [http://example.com/parent-theme-child/]
 Description:  [Name of parent theme] Child Theme
 Author:  [Your name]
 Author URI:  [URL of your website]
 Template:  [Name of the parent theme folder] 
 Version:  1.0.0
Text Domain:  [Name of the parent theme]-child
*/

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

  • Название темы: Каждая тема — родительская или дочерняя — должна иметь имя. Имя должно быть уникальным и не должно использоваться ни одной другой темой в вашей установке WordPress.
  • Шаблон: Эта информация сообщает WordPress, с какой родительской темой связана ваша дочерняя тема.

После создания файла и ввода необходимой информации загрузите его в папку дочерней темы WordPress через FTP.

Шаг 3: Убедитесь, что таблица стилей правильно загружается в файле function.php

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

  1. Родительская тема настроена на загрузку обеих таблиц стилей. В этом случае дочерней теме WordPress больше ничего не нужно делать.
  2. Родительская тема загружает свою собственную таблицу стилей через get_template_directory() или get_template_directory_uri(). В этом случае дочерней теме WordPress достаточно загрузить свою собственную таблицу стилей, используя в качестве параметра в файле function.php хэндл таблицы стилей родительской темы.
  3. Родительская тема загружает собственную таблицу стилей через get_stylesheet_directory() или get_stylesheet_directory_uri(). В этом случае дочерняя тема WordPress должна загрузить обе таблицы стилей в function.php. Убедитесь, что вы используете для родительских стилей то же имя, что и для родительских.

Вот как будет выглядеть код во втором из перечисленных выше сценариев:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'Name of parent theme style sheets'),
wp_get_theme()->get('Version') // This will only work if your header contains the
Version line
);
}
?>

Если дочерней теме WordPress необходимо загрузить обе таблицы стилей через файл function.php, код будет выглядеть следующим образом:

<?php
function child_theme_styles() {
wp_enqueue_style( 'Name of parent theme style sheets', get_template_directory_uri() . '/style.css');
wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() .'/style.css' , array('Handle
name of parent theme style sheets'));
}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );
?>

Поместите файл function.php вместе с файлом style.css в папку дочерней темы WordPress.

Примечание

Вы также можете добавить третий файл под названием screenshot.png в папку дочерней темы WordPress. WordPress покажет это изображение в разделе тем в бэкенде, чтобы вам было легче идентифицировать вашу тему.

Шаг 4: Включите дочернюю тему WordPress

После того как вы создали дочернюю тему WordPress, вам нужно активировать ее в бэкенде так же, как и любую другую тему. Для этого войдите в систему и найдите свою дочернюю тему в разделе «Внешний вид» > «Темы».

Примечание

Если вы уже внесли изменения в родительскую тему с помощью WordPress Customizer, они будут потеряны при активации дочерней темы WordPress. Однако, используя плагин Customizer Export/Import, вы можете экспортировать настройки Customizer, а затем импортировать их снова, когда будете готовы.

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

Совет

Почему бы не попробовать WordPress хостинг с IONOS? Вы получите хостинг-платформу, специально оптимизированную для WordPress, что сделает создание вашего собственного сайта WordPress очень простым.

Оцените статью
cdelat.ru
Добавить комментарий