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

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

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

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

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

Звучит неплохо? Давайте начнем!

Дочерние темы WordPress: основы

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

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

Большинство тем WordPress в настоящее время поставляются со своими дочерними темами (или вариациями дочерних тем) прямо из коробки.

Почему вам следует использовать детские темы?

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

Устранение риска потери модификаций

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

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

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

Поддерживать организацию кода

Тема WordPress обычно состоит из нескольких тысяч строк кода и нескольких разных файлов - HTML, CSS, PHP, JavaScript и других. И из-за этого любые незначительные изменения, вносимые кое-где, становится трудно отследить. Когда придет время вернуться и отредактировать тему или исправить непредвиденные ошибки, это окажется довольно дорогостоящим (как по времени, так и с точки зрения бюджета).

Как мы обсуждали выше, дочерние темы активно наследуются от родительских тем. Любые изменения, которые вы вносите в дочернюю тему, остаются там (то, что происходит в дочерних темах, остается в дочерних темах!), И их легче отслеживать, потому что в них будет всего несколько сотен строк кода (в самых агрессивных обстоятельствах), в отличие от несколько тысяч.

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

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

Большинство тем поставляются с дочерними темами, но если вы найдете одну из них, которая вам не понравится, то создать дочернюю тему самостоятельно не составит труда. Я продемонстрирую урок, создав дочернюю тему для нашей темы Sparkling.

Шаг 1. Создайте каталог для дочерней темы в вашей установке WordPress.

1. Перейдите в каталог тем вашего сайта WordPress ( /wp-content/themes ).
2. Создайте новую папку и назовите ее sparkling-child . Лучше всего дать вашей дочерней теме то же имя, что и родительская, с добавлением -child в конце.

Мы добавим в эту папку все файлы дочерней темы. Тем не менее, единственный файл, который требуется дочерней теме для правильной работы, - это файл style.css .

Шаг 2: Создайте файл style.css для своей новой дочерней темы.

1. Перейдите в каталог дочерней темы, созданный на шаге 1, т.е. /wp-content/themes/sparkling-child .
2. Создайте в каталоге новый файл .css и назовите его style.css .
3. Скопируйте и вставьте следующий код в новый файл style.css :

https://gist.github.com/rafaysansari/59ab402cffc540d050ed

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

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

Шаг 3: Создайте файл functions.php (необязательно).

Файл functions.php позволяет веб-разработчикам добавлять функциональные возможности на свои веб-сайты WordPress с помощью собственных функций WordPress и кода PHP.

1. Перейдите в папку вашей дочерней темы, то есть в sparkling-child .
2. Создайте файл .php и назовите его functions.php .
3. Добавьте следующий код в файл functions.php:

https://gist.github.com/rafaysansari/6c3cc1606823d56388f4

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

Шаг 4: Импортируйте несколько таблиц стилей (необязательно).

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

1. Перейдите в каталог своей дочерней темы и откройте файл functions.php в текстовом редакторе.
2. Добавьте следующие строки кода в файл functions.php под открывающим <?php :

https://gist.github.com/rafaysansari/9535343506d670226f4e

Функция wp_enqueue_style() используемая в приведенном выше коде, импортирует несколько таблиц стилей в вашу дочернюю тему, не замедляя работу вашего сайта.

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

Шаг 5: Загрузите дочернюю тему.

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

1. Сожмите каталог дочерней темы в файл .zip .
2. Войдите в свою админ-панель WordPress и перейдите в « Внешний вид» > « Темы» .
3. Нажмите кнопку « Добавить» на следующем экране.

   

4. Нажмите кнопку « Загрузить тему» , чтобы продолжить.

   

5. Найдите .zip файл дочерней темы и загрузите его.
6. После загрузки дочерней темы нажмите Активировать .

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

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

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

Предполагая, что все прошло по плану, при активации дочерней темы ваш веб-сайт должен выглядеть точно так же, как и при активации родительской темы. Но подождите! Разве не весь смысл в создании дочерней темы сделать ваш сайт другим?

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

Применение пользовательских стилей

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

С помощью CSS вы можете изменить практически каждый аспект дизайна и стиля активированной темы - от цветов и кнопок до размеров и стилей шрифтов. Веб-разработчики, обладающие реальным опытом работы с CSS, изменяют весь макет дочерней темы, чтобы сделать ее единственной в своем роде.

Все, что вам нужно сделать, это добавить собственный код CSS в style.css файла style.css вашей дочерней темы, и все style.css . Те из вас, кто не хочет получать доступ к FTP-клиенту своего сайта каждый раз, когда необходимо внести простое изменение, могут перейти в редактор WordPress по умолчанию ( Внешний вид > Редактор ) и добавить код CSS прямо оттуда.

Альтернативные методы модификации темы

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

• Добавьте новые функции в файл functions.php . Мы уже создали файл functions.php для вашей дочерней темы, поэтому все, что вам нужно сделать сейчас, это добавить к нему несколько пользовательских функций в зависимости от функциональности, которую вы хотите достичь. Вы можете писать код на PHP или использовать собственные функции WordPress.
• Отредактируйте файлы шаблонов. Если style.css и functions.php просто не сокращают его, и вам все равно нужно изменить тему, вы можете скопировать и вставить файлы шаблона из родительской темы и отредактировать их соответствующим образом.
• Добавьте новые файлы шаблонов. Если вы нашли шаблоны, которые вам нравятся в другом месте (не в каталоге родительской темы), или если вы хотите создать свои собственные шаблоны, вы можете добавить их непосредственно в дочернюю тему и продолжить работу оттуда.

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

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

Завершение

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

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

Согласны ли вы, что все модификации дизайна и функциональности должны производиться через дочерние темы? Удалось ли вам создать дочернюю тему и успешно активировать ее на своем сайте WordPress? Мы хотели бы услышать о вашем опыте, поэтому дайте нам знать, комментируя ниже!