Пользовательский CSS: следует ли использовать дочернюю тему WordPress или настройщик?

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

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

Когда вы используете дочернюю тему, а не просто добавляете CSS в настройщик? Есть ли случаи, когда плагин фрагмента кода имеет больше смысла?

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

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

Дочерняя тема — это тема WordPress, которая наследует все качества другой темы WordPress. Основная тема, родительская тема, может быть коммерческой темой, разработанной вами самостоятельно или любой из бесплатных тем в каталоге тем WordPress.org. И да, вы можете создать дочернюю тему Kadence. Позже в этом посте мы поговорим о том, может ли вам это не понадобиться, или о случаях, когда вам может понадобиться.

Чтобы создать дочернюю тему, вы создадите отдельный каталог в wp-content/themes/ на том же уровне, что и родительская тема. Обычно он начинается с двух файлов, style.css и functions.php, но вы также можете добавить множество других настроек в дочернюю тему, которые вы хотели бы. У нас есть руководство, в котором рассказывается о создании дочерних тем, если они вам понадобятся. Существует ряд плагинов, которые создадут для вас дочернюю тему, и вы можете удалить эти плагины конфигурации дочерней темы после создания дочерней темы.

Почему люди используют дочерние темы?

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

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

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

Вам нужна дочерняя тема?

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

1. Чтобы добавить дополнительный CSS.
2. Для добавления дополнительных функций.

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

Что такое настройщик?

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

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

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

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

Взгляд Kadence на дочерние темы, настройщики и плагины

Kadence придерживается мнения, что вы должны иметь возможность максимально настроить свой сайт WordPress с помощью Customizer. В параметрах настройки Kadence вам доступны различные настройки, и вы даже можете добавить свой код Google Analytics через настройщик на свой тематический сайт Kadence, используя версию Kadence Pro.

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

Таким образом, для большинства пользователей WordPress Kadence упростил способ добавления дополнительных стилей и функций в WordPress, что значительно упростило управление сайтом WordPress в будущем.

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

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

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

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

Для большинства владельцев сайтов настройщик — это все, что им нужно.

Для пользователей Kadence Pro в настройщике есть места событий для добавления сценариев тегов заголовка, нижнего колонтитула и основного текста, поэтому, даже если вы используете Диспетчер тегов Google, Google Analytics или любую другую службу, требующую добавления пользовательских сценариев, Настройщик может легко вместить ваши настройки.

Когда следует использовать плагин Code Snippets

Если вы просто добавляете несколько строк PHP-кода, плагин Code Snippets — отличный способ добавить код. Вы можете легко активировать и деактивировать код с помощью плагина, чтобы проверить и убедиться, что код работает правильно.

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

Конечно, для минималистов плагинов, которые хотят запускать свои сайты с как можно меньшим количеством плагинов, плагин Code Snippets может стать большим скачком. Балансировка меньшего количества плагинов с необходимой функциональностью — это то, что нужно делать в каждом конкретном случае.

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

Если вы добавляете несколько строк кода CSS или расширяете функциональность сайта с помощью дополнительного кода PHP, лучше всего использовать дочернюю тему. Область CSS настройщика довольно мала, поэтому добавление большого количества CSS может быть сложным или запутанным для управления. В таком случае дочерняя тема будет проще. Кроме того, если вы добавляете пользовательские функции, которые выходят за рамки того, чем может легко управлять плагин Code Snippets, дочерняя тема может легко это сделать.

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

Проблемы с производительностью

При использовании дополнительной функции CSS настройщика добавленные стили будут добавлять ваш код в тег <style> в начале каждой страницы. Это означает, что если у вас много CSS, вы увеличите размер всех своих страниц по отдельности. Браузер посетителя вашего сайта будет несколько раз загружать ваши пользовательские стили.

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

Проблемы с обслуживанием

Добавление CSS в дополнительный CSS означает, что вам нужно использовать редактор в Настройщике, который довольно узок и не подходит для большого количества CSS. Однако, если вы добавите их в таблицу стилей, вы сможете использовать любой текстовый редактор с более удобным размером. Вы даже можете использовать редактор тем в wp-admin для редактирования файла CSS прямо в браузере. Вы можете найти редактор темы в разделе « Внешний вид» > «Редактор файла темы» . Убедитесь, что вы переключились на правильную тему при редактировании, и мы настоятельно рекомендуем вам сделать резервную копию вашего сайта, прежде чем вносить изменения в файлы дочерней темы.

Редактирование файлов темы

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

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

Вывод

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