Думаете о настройке некоторых функций на своем веб-сайте WordPress? Одна из замечательных особенностей WordPress заключается в том, что обычно есть много разных способов сделать одно и то же.
Вы можете нанять веб-дизайнера, использовать конструктор страниц WordPress или просто засучить рукава и добавить пользовательский CSS на свой сайт WordPress.
Если идея получить почти неограниченный контроль над стилем различных элементов на вашем веб-сайте волнует вас, вы находитесь в правильном месте!
Читайте дальше, чтобы узнать все, что вам нужно знать о настройке вашего сайта WordPress с помощью пользовательского CSS.
3 разных способа добавить пользовательский CSS в WordPress
Существуют разные способы добавления пользовательского CSS в WordPress, и ни один из них не обязательно является лучшим решением для любой ситуации.
Мы познакомим вас с каждым из них, и вы сможете решить, какой из них использовать!
Прежде чем мы пойдем дальше, пришло время сделать резервную копию вашего сайта.
Перво-наперво: резервное копирование вашего сайта
Независимо от вашего уровня навыков, резервное копирование вашего веб-сайта должно быть одним из первых действий, которые вы должны сделать, прежде чем пытаться что-либо настроить.
Если вы будете следовать всем шагам, которые мы вам покажем, то, скорее всего, ничего не пойдет не так. Однако, если вы допустите ошибку в любой момент, есть шанс, что вы можете сломать свой сайт.
Наличие резервной копии дает вам простой способ сбросить настройки веб-сайта, если это произойдет.
Самый простой способ создать резервную копию — использовать специальный плагин для резервного копирования, такой как UpdraftPlus .
Для начала просто установите и активируйте плагин UpdraftPlus из репозитория WordPress.
После активации перейдите в « Настройки » на левой панели и нажмите « Резервные копии UpdraftPlus» .
Затем вы можете нажать «Создать резервную копию сейчас» , чтобы создать резервную копию на своем веб-сервере.
Кроме того, вы можете щелкнуть вкладку внутренних настроек UpdraftPlus , чтобы выбрать дополнительное удаленное хранилище.
Теперь, когда резервная копия вашего веб-сайта надежно зарезервирована, пришло время настроить собственный стиль с помощью CSS в WordPress!
Как уже упоминалось, есть три разных способа сделать это. Мы начнем с добавления пользовательского CSS в WordPress с помощью плагина.
Готовый? Давайте начнем!
Как добавить пользовательский CSS в WordPress с помощью плагина
Плагины — это полезные инструменты, которые позволяют добавлять дополнительные возможности или функции на ваш веб-сайт WordPress с минимальными усилиями.
Существует несколько плагинов, которые упрощают добавление пользовательского CSS на веб-сайт WordPress. Некоторые из наиболее популярных и наиболее рекомендуемых включают фрагменты кода , простые пользовательские CSS и JS , CSS Hero и многие другие.
Чтобы добавить новый плагин, перейдите на панель управления WordPress, нажмите « Плагины» > «Добавить новый » и найдите нужный плагин.
В этом примере мы будем работать с фрагментами кода.
Добавление пользовательского CSS в WordPress с помощью фрагментов кода
Code Snippets позволяют легко запускать фрагменты кода CSS на вашем сайте. С этим плагином вам не нужно редактировать файлы темы для добавления кода, так как интерфейс GUI имитирует файл functions.php вашей темы.
После того, как вы установили и активировали плагин, наведите курсор на « Внешний вид » в бэкэнде WordPress и нажмите « Пользовательский CSS » .
В интерфейсе Simple Custom CSS просто вставьте свой код CSS и нажмите « Обновить пользовательский CSS » .
Некоторые другие плагины CSS для рассмотрения
Есть много других плагинов CSS, которые помогут вам сделать то же самое. У них также есть свои уникальные особенности, поэтому обязательно внимательно изучите их, прежде чем остановиться на одном из них.
Вот несколько лучших вариантов:
Simple Custom CSS and JS
Simple Custom CSS and JS позволяет добавлять как CSS, так и JS-код без изменения вашей темы или файлов плагинов.
Некоторые из его ключевых функций включают текстовый редактор с подсветкой синтаксиса, добавление CSS или JS во внешний интерфейс или на сторону администратора, добавление столько кодов, сколько вы хотите, и сохранение ваших индивидуальных изменений при смене темы.
CSS Hero
CSS Hero — это удобный плагин, который упрощает процесс редактирования CSS. Он имеет простой и интуитивно понятный интерфейс «укажи и щелкни» или «перетащи и оставь», который делает настройку проще, чем когда-либо. Это лучше всего подходит для начинающих с нулевыми навыками программирования.
С CSS Hero у вас есть доступ к огромной коллекции шрифтов Google и полный контроль над цветовой схемой.
Как только вы активируете какой-либо плагин, вы можете найти его на панели инструментов через Внешний вид >> Пользовательский CSS .
У некоторых из этих плагинов также может быть свой специальный раздел на панели инструментов, но это зависит от плагина.
Добавьте пользовательский CSS с помощью настройщика WordPress
В WordPress есть встроенный настройщик тем, которым вы можете воспользоваться. Независимо от того, какую тему вы выберете, вы всегда сможете настроить ее по вкусу с помощью этой функции.
Перейдите в раздел « Внешний вид » на панели инструментов и нажмите « Настроить».
Прокрутите страницу вниз и нажмите « Дополнительные CSS » .
Здесь вы сможете добавить любой код CSS.
При добавлении кода у вас будет возможность предварительно просмотреть его в представлении для настольных компьютеров и мобильных устройств. Это поможет вам получить представление о том, как это выглядит в обоих интерфейсах перед публикацией.
Этот метод не требует каких-либо плагинов, и многие люди склонны выбирать его, поскольку он более прост.
Дополнительным преимуществом является то, что ваш код CSS сохраняется, даже когда вы обновляете свою тему или меняете темы.
Как добавить пользовательский CSS в WordPress с помощью редактора тем
Самый прямой способ добавить немного CSS на ваш сайт WordPress — это использовать редактор WordPress. Это также самый рискованный метод, но если вы сделали резервную копию своего сайта, все будет в порядке.
Дополнительным шагом является создание дочерней темы . Вы можете рассмотреть возможность использования плагина, такого как Child Theme Configurator для создания дочерней темы .
Чтобы использовать этот плагин, наведите курсор на « Плагины », затем нажмите « Добавить новый » в бэкэнде WordPress.
Найдите Child Theme Configurator. Как только вы найдете его, установите и активируйте его.
Чтобы создать новую дочернюю тему, перейдите в раздел «Инструменты» на панели инструментов WordPress и нажмите «Дочерние темы».
Это откроет мастер настройки.
Нажмите «Анализ », чтобы узнать, можно ли создать дочернюю тему из вашей текущей темы. В большинстве случаев здесь не должно быть проблем.
После очистки следующим шагом будет создание дочерней темы!
Просто нажмите «Создать новую дочернюю тему» , и ваша новая дочерняя тема будет готова к использованию.
Добавление CSS непосредственно в файл Style.CSS
Чтобы начать, наведите курсор на « Внешний вид » в левом меню панели инструментов WordPress.
Нажмите на Редактор тем. Это предоставит вам доступ к некоторым базовым файлам, которые заставляют вашу тему работать.
По умолчанию откроется файл style.css , который вы ищете.
Прокрутите до конца таблицы стилей и вставьте свой код CSS. Обновите файл, и все!
Распространенные проблемы с пользовательским CSS в WordPress и способы их устранения
Как вы видели, вставить пользовательский CSS в WordPress очень просто. Но проблемы могут возникать время от времени. Не беспокойтесь, хотя эти проблемы могут возникать по многим причинам, их обычно легко исправить.
Мы познакомим вас с некоторыми распространенными проблемами CSS, с которыми вы можете столкнуться, как их диагностировать и как исправить.
1. Каскадные проблемы
Как работает CSS, можно создать несколько правил, влияющих на одни и те же атрибуты элемента. Например, на заголовок могут повлиять два конфликтующих правила, которые могут назначить ему разные цвета.
Каскадирование — это способ их решения. Каскад — это свойство CSS, которое отдает приоритет самым последним правилам CSS по сравнению со старыми в случае конфликта.
Если вы создали некоторые правила CSS, которые не отображаются, возможно, существует конфликтующее правило, которое каскадирует то, которое вы планировали.
Если вы хотите создать общие правила для некоторых элементов, стилизуя некоторые из этих элементов немного по-другому, вы можете сделать это, полагаясь на свойство CSS, называемое специфичностью.
Идентификаторы и классы создают определенные правила, которые получают приоритет в каскаде. Это означает, что не имеет значения наличие двух или более конфликтующих правил. Все, что вам нужно сделать, это добавить квалификатор, такой как класс или идентификатор, к элементу, стиль которого вы хотите изменить.
2. Изменения не появляются
После использования пользовательского CSS на вашем сайте вы можете не сразу увидеть изменения. Не паникуйте, это, вероятно, проблема с кэшированием.
Начните с очистки кеша браузера . Если это не решит проблему, очистите кеш WordPress .
Если эти шаги не решат проблему, проблема, скорее всего, связана с качеством вашего CSS. Скорее всего, вы допускаете ошибки или опечатки в коде CSS.
Читайте дальше, чтобы узнать, как диагностировать и исправить это.
3. Ошибки и опечатки в синтаксисе CSS
Орфографические ошибки встречаются чаще, чем вы думаете, и их легко не заметить. Это может повлиять на отображение пользовательского CSS.
Хотя код может выглядеть правильно, даже незначительные ошибки могут помешать вашему сайту выглядеть так, как вы ожидаете. В этом случае вы должны проверить код, чтобы убедиться в отсутствии орфографических ошибок.
Самый простой способ сделать это — использовать инструмент под названием CSS-валидатор, который выделит ошибки в вашем CSS. Самый популярный доступный валидатор CSS — это W3C (Консорциум World Wide Web) CSS Validator .
Существуют различные способы использования валидатора W3C CSS в зависимости от того, как вы вставили свой CSS. Вы можете вставить фрагменты CSS, загрузить всю таблицу стилей или просто вставить URL-адрес документа, если он есть.
Затем инструмент проверит ваш CSS и выделит основные ошибки, такие как опечатки или отсутствие точки с запятой, а также более серьезные ошибки, такие как несоблюдение стандартов W3C.
Что произойдет с пользовательским CSS, если вы измените свою тему?
Когда вы используете собственный CSS, есть риск его потерять при смене темы. Чтобы избежать этого, всегда создавайте дочернюю тему при написании пользовательского CSS.
Если вы не используете дочернюю тему, вы можете сохранить свой пользовательский CSS где-нибудь, чтобы легко реализовать его с новой темой при смене темы.
Готовы создать собственный CSS в WordPress?
Знание того, как редактировать CSS вашей установки WordPress, дает вам больше контроля над дизайном вашего сайта. Это также позволяет вам делать гораздо больше без необходимости установки дополнительных плагинов, которые могут привести к раздуванию.
В этой статье мы рассмотрели три способа сделать это.
К ним относятся использование плагина, работа в настройщике и редактирование непосредственно в файле style.css в WordPress.
Если вы будете следовать этим шагам, вы быстро настроите свой веб-сайт как профессионал! Не забудьте сделать резервную копию вашего сайта и сначала создать дочернюю тему!
