Как безопасно добавлять кастомные CSS стили для плагинов и тем на WordPress

С вами когда-то такое случалось? Вы установили плагин, у него были все нужные вам функции. Но… он некрасиво выглядел. Даже после того, как вы поменяли все настройки, он всё равно не вписывается в стиль вашей темы. И даже если он идеально работает, вы немного огорчились или начали искать другой плагин.

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

Смотрите также:

• Как создать дочернюю тему WordPress — Правильный способ
• Редактируем CSS-стили вашей темы WordPress на лету с помощью плагина CSS Hero
• Как добавить JavaScript и CSS в WordPress тему или плагин
• Загружаем свои стили оформления CSS на WordPress правильно
• 5 правок в CSS, которые помогут новичку улучшить внешний вид своего блога

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

Кастомный CSS — больше контроля над дизайном плагинов

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

Возьмём, к примеру, один из наиболее популярных плагинов Contact Form 7. Его стиль можно изменить только слегка. Но используя кастомный CSS, вы можете полностью изменить каждый аспект его отображения на экране.

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

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

Почему важно добавить кастомный CSS правильно

Вы не хотите как попало добавить CSS стили к плагину. Есть правильный и неправильный способ добавить CSS на WordPress.

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

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

А сейчас мы расскажем вам, как правильно добавлять CSS стили плагинов для Divi и других тем WordPress.

Куда добавлять CSS стили в теме Divi

Для начала рассмотрим процесс добавления кастомных стилей CSS на примере темы Divi.

Для безопасного добавления CSS стилей для ваших плагинов в Divi, зайдите во вкладку «Theme Options» в вашем меню Divi:

Потом во вкладке «General» нужно пролистать страницу до конца вниз. Там вы найдёте окошко «Custom CSS»:

Технически, всё, что вам нужно сделать, это ввести ваш кастомный код CSS и нажать «Save Changes». Но поскольку мы хотим сделать так, чтобы можно было легко перемещать и копировать стиль нашего плагина, то давайте сделаем еще один шаг.

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

Чтобы добавить такой комментарий, нужно скопировать и вставить этот код:

/* Plugin CSS Styles Start Here */

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

Куда добавлять CSS стили для других тем

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

Предположим, что вы установили дочернюю тему, вы можете менять её в консоли WordPress, зайдя во Внешний вид → Редактор:

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

Потом вам нужно просто добавить ваш кастомный CSS так же, как мы это сделали в Divi. Для начала, добавьте комментарий:

/* Plugin CSS Styles Start Here */

Далее добавьте ваш кастомный CSS стиль под этой строкой:

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

Реальный пример: Contact Form 7

Давайте рассмотрим реальный пример. Представим, что вы хотите изменить стиль формы обратной связи Contact Form 7. Вы установите плагин и получите похожую форму:

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

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    border: 1px solid #000000;
}

В редакторе ваш CSS должен выглядеть так:

После сохранения таблицы стилей и обновления вашей формы обратной связи, вы должны увидеть это:

Теперь границы полей ввода выделены черной рамкой.

Если вы используете Divi, то ваш код будет таким же, только добавляется он в другом месте:

Конечно, это просто эксперимент, поскольку вам не нужен плагин формы обратной связи в Divi. Но этот метод сработает с любым плагином!

Итоги

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

Чтобы подсмотреть, какие стили вам нужно изменить для того или иного элемента на вашем сайте, откройте Developer Tools в Chrome (нажмите F12) и наведите мышкой на интересующий вас объект. Вы сразу же увидите, какие стили использует этот элемент.

Просто помните – всегда храните кастомный CSS в отдельной области, отделённой комментарием. Так вы всегда сможете его быстро найти.

А у вас есть советы по поводу кастомных CSS стилей? Расскажите нам в комментариях!

Алексей Шевченко

редактор wpcafe

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующийся на создании сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/