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

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

Как безопасно добавлять кастомные 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:

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

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

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

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

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

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

/* Plugin CSS Styles Start Here */

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

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

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

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

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

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

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

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

/* Plugin CSS Styles Start Here */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итоги

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *