Как сохранить пользовательский CSS при обновлении темы WordPress
Опубликовано: 2022-05-05Темы определяют макет и внешний вид веб-сайтов WordPress. Независимо от того, какую тему вы используете, вам может потребоваться немного настроить ее в соответствии с вашими конкретными потребностями.
Один из способов настроить тему — использовать каскадные таблицы стилей (CSS). Этот популярный язык таблиц стилей позволит вам изменить практически любой элемент вашей темы. Вы можете добавить пользовательский CSS в свою тему, чтобы указать цвета фона, изменить размер шрифта, создать интервал между содержимым, изменить положение меню и многое другое. Однако пользовательский CSS может быть удален при следующем обновлении темы.
Почему обновления темы нарушают пользовательский CSS
Все темы имеют файл style.css. Доступный в папке темы, он содержит CSS. Когда вы обновляете свою тему, вы загружаете новую, другую версию, чтобы заменить существующую версию.
При обновлении темы существующий файл style.css будет удален и заменен новым, новым файлом style.css. Новый файл style.css не будет содержать никаких пользовательских стилей CSS, которые вы могли добавить ранее. Вы всегда можете вернуть удаленный пользовательский CSS, но делать это после каждого обновления темы может быть утомительно.
Добавить в настройщик
Вы можете сохранить пользовательский CSS при обновлении темы, добавив его в настройщик. Настройщик — это инструмент настройки темы на панели инструментов WordPress. В нем есть поле «Дополнительный CSS». Вместо того, чтобы добавлять пользовательский CSS непосредственно в файл style.css вашей темы, вы можете добавить его в это поле.
Поле «Дополнительный CSS» было введено в версии 4.7 WordPress, чтобы предотвратить удаление пользовательского CSS при обновлении темы. Это не влияет ни на файл style.css, ни на другие файлы в папке темы. Когда вы добавляете пользовательский CSS в настройщик через это поле, он будет сохранен в базе данных вашего сайта. Затем вы можете обновить свою тему, сохранив пользовательский CSS.
Чтобы получить доступ к настройщику, нажмите «Внешний вид» на панели инструментов WordPress и выберите «Настроить». Вкладка «Дополнительные CSS» находится внизу. Нажав на эту вкладку, вы увидите поле, в котором вы можете ввести пользовательский CSS. Обновление вашей темы заменит только файлы в папке темы. Он не заменит или иным образом не повлияет на базу данных вашего веб-сайта, поэтому пользовательский CSS будет сохранен.
Добавление пользовательского CSS в настройщик позволяет вам просмотреть его. Настройщик имеет встроенную функцию предварительного просмотра для всех изменений. Независимо от того, настраиваете ли вы новые виджеты или добавляете собственный CSS, настройщик покажет, как будет выглядеть ваш веб-сайт. Затем вы можете продолжить настройку, нажав «Опубликовать». Если ваш веб-сайт выглядит неправильно, вы можете изменить параметры настройки, прежде чем запускать его. Несмотря на это, настройщик покажет предварительный просмотр вашего сайта с пользовательским CSS.
Создать дочернюю тему
Другое решение — создать дочернюю тему. Дочерние темы по сути являются копиями других тем, которые вы можете настраивать, не опасаясь потерять свои изменения. Это не полные копии. Скорее, большинство дочерних тем состоят всего из нескольких основных файлов, включая файл style.css и файл functions.php.
Дочерние темы предназначены для наследования свойств родительской темы. Вы можете использовать свою тему в качестве родительской темы. У дочерней темы будет своя папка, в которой будут свои файлы style.css и functions.php. Однако дочерняя тема не будет содержать файл index.php, файл page.php, файл single.php или другие стандартные файлы темы. Для этих свойств будет использоваться родительская тема.
Поскольку у дочерних тем есть собственный файл style.css, они поддерживают пользовательский CSS. Что еще более важно, дочерние темы сохраняют все свои пользовательские CSS при обновлении родительских тем. Обновление родительской темы не повлияет на файл style.css дочерней темы. Инструкции по созданию дочерней темы см. на странице developer.wordpress.org/themes/advanced-topics/child-theme. Кроме того, некоторые премиальные темы поставляются с дочерней темой.
Всего за несколько строк пользовательского CSS вы можете добавить его в настройщик. Для большего количества пользовательского CSS создание дочерней темы, вероятно, стоит затраченных усилий. Дочерняя тема предоставит вам отдельный файл style.css, который вы можете настроить.
Вы даже можете работать с файлом style.css дочерней темы в автономном режиме, а поскольку это отдельный файл, у вас будет достаточно места для пользовательского CSS. Добавление пользовательского CSS в настройщик ограничит вас небольшим полем, доступным только в Интернете. Настройщик предлагает преимущества режима предварительного просмотра, тогда как дочерняя тема предлагает преимущества отдельного файла style.css.
Используйте пользовательский плагин CSS
Вы можете использовать собственный плагин CSS. Плагин Simple Custom CSS, например, делает именно то, на что он похож: он позволяет вам легко добавлять пользовательский CSS в вашу тему. Пользовательский CSS, добавленный в плагин, переопределит собственный CSS вашей темы.
После того, как вы активировали плагин Simple Custom CSS, вы должны увидеть новую вкладку «Пользовательский CSS» в разделе «Внешний вид» на панели управления WordPress. Здесь вы можете добавить пользовательский CSS. Когда вы обновите свою тему, пользовательский CSS будет сохранен. Обновление вашей темы заменит файл style.css темы, но плагин заменит новый файл style.css вашим собственным CSS.
Существует также плагин Simple Custom CSS и JS, который поддерживает как пользовательский CSS, так и пользовательский JavaScript. Вы можете использовать его для создания собственного CSS, который переопределяет собственный CSS вашей темы. Если вы не хотите возиться с созданием дочерней темы, вы можете использовать собственный плагин CSS. Загрузка пользовательского плагина CSS — это простой способ сохранить пользовательский CSS во время обновления темы.
Вывод
Это расстраивает, когда вы теряете пользовательский CSS после обновления темы. Даже если вы сохранили пользовательский CSS локально на свой компьютер, вам придется вернуться и добавить его. Вы можете сохранить пользовательский CSS своей темы, используя настройщик на панели управления WordPress, создав дочернюю тему или используя пользовательский плагин CSS.
