WordPress

Подключение CSS в WordPress

Подключение css в WordPress

В этом руководстве мы будем говорить о произвольных стилях CSS в WordPress. Рассмотрим:

  1. Плагины для произвольных стилей (custom CSS WordPress);
  2. Встроенный настройщик темы;
  3. Дочерняя тема WordPress.

К концу вы будете знать всё о добавлении произвольных стилей CSS в WordPress. Это поможет настроить определённые элементы и сделать ваш сайт более привлекательным или более удобным. Так что давайте приступать к работе!

Вариант 1 — Подключение CSS в WordPress через плагин

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

Установка плагина для custom CSS WordPress

Плагин Simple Custom CSS

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

Установка плагина для Custom CSS WordPress - Simple Custom CSS через консоль

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

WP Add Custom CSS

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

Установка плагина для Custom CSS WordPress - WP Add Custom CSS в админ консоли

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

Custom CSS WordPress для отдельной записи - используя плагин WPПосле редактирования, все изменения можно просмотреть, обновив сайт в браузере.Пользовательские стили custom CSS WordPress - пример с плагином 2

Site Origin CSS

Удобный, интерактивный инструмент для добавления пользовательских стилей CSS в WordPress.Установка плагина для Custom CSS WordPress - SiteOrigin CSS через консольПосле установки инструмент будет доступен в разделе Внешний вид › Пользовательский CSS.Пользовательский custom css WordPress от плагина SiteOrigin - предпросмотрЭтот плагин имеет удобный интерфейс для редактирования, где вы можете выбрать любую часть своего сайта и изменить его с помощью встроенных инструментов или путем добавления кода вручную.

Добавить произвольные стили WordPress через плагин SiteOriginin и возможность управления всем в удобном редакторе

Simple Custom CSS and JS

Last, but not least, you may also try this tool. It features a few extra functionalities compared to earlier entries. One of them is the ability to add custom JavaScript entries.

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

Установка плагина для пользовательских стилей CSS в WordPress -Simple Custom CSS and JS

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

В поисках лучшего варианта размещения своего сайта?

Переносите свой сайт на самую быструю хостинг платформу с выделенной поддержкой 24/7.

Чтобы проверить это, мы изменили теги h1, чтобы сделать их немного более яркими.Редактирование стилей CSS в WordPress и установление тэга h1 tags более яркимВсе изменения будут отображаться на вашем сайте после сохранения.Пример подключения пользовательских стилей Custom CSS WordPress

Вариант 2 — Добавление Custom CSS WordPress через настройщик темы

Вы можете легко добавить произвольный CSS в WordPress, если версия вашей CMS 4.7 и выше, так как она включает встроенный инструмент в настройке темы. Чтобы использовать его, перейдите в раздел Внешний вид › Настроить в админ консоли. Настроить внешний вид из админ консоли WordPressПрокрутите вниз до раздела Дополнительные стили.
Раздел для редактирования стилей CSS в редакторе тем WordPressДля вас будет открыт встроенный инструмент, который позволит вам добавить любой код CSS. Он прост в использовании и позволяет просматривать как мобильные, так и планшетные версии вашего сайта, что очень ценно, учитывая, насколько важна мобильность в настоящее время.
Результат редактирования стилей CSS в редакторе стилей темы WordPressПоздравления! Теперь вы знаете, как применять пользовательский CSS в WordPress без каких-либо плагинов.

Вариант 3 — Добавление стилей Custom CSS WordPress, используя дочернюю тему

Все приведенные выше примеры показали вам, как добавить свой собственный CSS в уже живой сайт (запущенный онлайн) на WordPress. Однако есть ситуации, когда вам нужно сначала проверить это. Возможно, вы ещё не знаете точно, что хотите сделать, или не хотите рисковать своим сайтом. Чтобы этого не произошло, мы рекомендуем создать дочернюю тему WordPress. Это позволит вам развязать своё воображение и попробовать различные комбинации CSS. И самое главное, ваш живой сайт при этом никак не пострадает!

Разрешение общих вопросов, связанных с пользовательскими стилями в WordPress

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

Изменения не появляются

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

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

И наконец, некоторые хостинг-провайдеры предлагают встроенные инструменты кэширования, чтобы улучшить работу вашего сайта на WordPress. Мы делаем это и на Hostinger. Наши встроенные плагины для WordPress могут быть отключены или очищены через раздел Плагины › Установленные › Must-Use.Выяснение причин неработающего custom CSS в WordPress путём отключения встроенного плагина кэширования WordPress от Hostinger.

Ошибки в синтаксисе CSS

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

Слишком много вариантов

Иногда с произвольными стилями CSS можно перестараться. Добавляя две или более ссылки на селектор, можно вызвать конфликт. Поскольку CSS не может читать мысли, он не знает, какое значение применять. Это обычное явление при вызове новой таблицы стилей поверх существующей. Если вы пытаетесь изменить заголовок h2, но ничего не происходит, дважды проверьте таблицу стилей для существующих записей.

Отсутствие идей

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

Заключительное слово

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

Если вы нашли это руководство полезным, не стесняйтесь делиться им на Facebook, Twitter или в других социальных сетях. И, наконец, если у вас есть какие-либо советы, хитрости или идеи, которыми вы хотите поделиться, мы с нетерпением ждём их в комментариях ниже!

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

Нажмите здесь, чтобы оставить комментарий

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Присоединяйтесь к тысячам других подписчиков по всему миру

и получайте самые свежие руководства на вашу электронную почту

Пожалуйста, подождите...

Спасибо за подписку!

Начните экономить сейчас!

Хостинг и доменное имя от

руб.95
00