Пользовательский CSS редактор позволяет настроить внешний вид вашей темы без необходимости создания дочерней темы или перезаписи файлов на сервере. Данный способ способен значительно упростить изменения стилистики сайта.

На данный момент существует огромное количество плагинов для работы с CSS файлами в WordPress, но традиционно мы остановимся на самом популярном плагине — Jetpack.

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

Активация модуля “Пользовательские таблицы CSS”.

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

В сообщение, в зависимости от версии  Jetpack, говориться примерно следующее:

Добро пожаловать в пользовательский редактор CSS!

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

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

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

Редактирование параметров в редакторе CSS.

У вас есть несколько вариантов при редактировании стилей, и они могут быть найдены непосредственно справа от окна редактирования:

  • Средство предварительной обработки: редактор CSS имеет поддержку CSS препроцессоров LESS и Sass (SCSS синтаксис). Это расширенный вариант для пользователей, которые желают воспользоваться расширениями CSS. Данные возможности мы не будем обсуждать в рамках этой статьи. Подробнее о них можно почитать LESS и Sass.
  • Подключаемый модуль. При внесении изменений в дизайн вашего сайта, вы можете выбрать, каким образом подключать ваш CSS файл: добавить к существующей теме стилей, или заменить таблицу стилей в существующую тему с вашим собственным CSS. Это второй вариант следует использовать, если вы хотите, написать стили “с нуля”, используя только HTML-структуру темы. Обратитесь к производителям вашей темы за справкой, и убедитесь, что у вас есть все правила на использование темы в таком варианте. Если вам не хватает некоторых элементов, в внешнем виде сайта могут появиться неожиданные форматирования. Только код CSS в окне редактирования будет применен к вашему сайту с этой опцией.
  • Совместимость с мобильными устройствами: если вы используете мобильную тему Jetpack, вы, возможно, хотите, чтобы ваши изменения CSS, были применимы к ней, для это и существует эта функция в редакторе.
  • Ширина картинки (содержания): эта опция должна использоваться, если вы изменяете ширину центральной части страницы с помощью пользовательского CSS. Установка “Ширина картинки” используется в качестве формата по умолчанию для широкоформатных изображений, если они установлены на вашем сайте. Обратите внимание, что это не повлияет на размер некоторых изображений, добавленных перед изменением настроек. В зависимости от того, как они были вставлены, вам, возможно, придется повторно вставить некоторые из них после изменения настроек.

Предварительный просмотр и сохранение правил CSS.

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

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

Предварительный просмотр пользовательского CSS в WordPress

Если вас устраивают внесенные вами изменения то, вы можете вернуться в окно редактора CSS и сохранить свои настройки, нажав кнопку “Сохранить стили”.

Изменения редакций пользовательских CSS.

Опция “Редакции CSS” показывает предыдущие версии пользовательского CSS. Каждый раз, когда вы нажимаете “Сохранить стили” список сохраняется и обновляется. Jetpack хранит последние 25 CSS изменений, внесенных в любой теме на вашем блоге. Редакции пользовательского CSS позволяют посмотреть и оценить последние изменения и вернуться к более ранним версиям, если вам это будет нужно.

Редакции пользовательских CSS

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

Сравнение редакций пользовательского CSS

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