Как добавить CSS в WordPress, легкий путь

Доброго времени суток, господа!

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

Как добавить CSS в WordPress, легкий путь

Одна из причин, по которой WordPress является самой популярной системой управления контентом (CMS), заключается в том, что она очень удобна для начинающих. Вам не нужно иметь никаких технических знаний, навыков программирования или опыта в веб-разработке, чтобы создать полноценный веб-сайт с нуля.

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

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

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

Что такое CSS в WordPress?

Каскадные таблицы стилей (CSS) — это язык, используемый в веб-дизайне для изменения внешнего вида сайта. Например, вы можете использовать его для изменения макета вашего сайта, шрифтов, цветов и многого другого. И большая часть использования CSS в WordPress заключается в том, что он позволяет вам переопределить некоторые настройки вашей темы по умолчанию.

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

Как работает CSS?

Вы когда-нибудь слышали о языке гипертекстовой разметки (HTML)?

HTML является основным языком, используемым для создания вашего сайта WordPress. Его задача — рассказать веб-браузерам, как выглядит ваш сайт. Таким образом, когда посетитель сайта вводит адрес вашего сайта, он видит такие вещи, как цвета, изображения и письменный контент. Без HTML ваш сайт был бы страницами кода, которые никто не мог понять.

Чтобы увидеть, как выглядит HTML, все, что вам нужно сделать, это нажать на три точки в верхнем правом углу редактора Гутенберга и выбрать «Редактор кода»:

Редактор кода

Проблема с редактированием HTML, чтобы ваш сайт выглядел определенным образом, заключается в том, что он чрезвычайно трудоемкий (не говоря уже о том, что вы должны понимать код). Например, предположим, что вы хотели изменить заголовки всех ваших сообщений на другой цвет. Вам придется заходить в каждый пост, который вы когда-либо писали, и вручную редактировать HTML-код, чтобы изменить цвет.

Вот почему использование CSS вместо этого так полезно.

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

Использование CSS в WordPress дает вам полный контроль над тем, как выглядит ваш сайт, и позволяет легко изменять определенные элементы. И вам даже не нужно понимать, как работает HTML. Вы можете просто добавить CSS-код на свой сайт и изменить его внешний вид. Это действительно настолько просто.

Как добавить CSS в WordPress

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

Но как вы добавляете CSS в WordPress?

1. Таблицы стилей темы WordPress

Вы можете добавить фрагменты кода CSS непосредственно в таблицы стилей вашей темы WordPress, чтобы внести изменения в общий вид вашего сайта.

Тем не менее, этот метод не рекомендуется для большинства людей. Добавление кода в родительскую тему сопряжено с несколькими рисками:

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

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

Для получения дополнительной информации, ознакомьтесь с моей статьей обо всем, что вам нужно знать о дочерних темах WordPress.

А пока, ознакомьтесь с более удобными для начинающих способами добавления CSS в WordPress.

2. Настройка темы

На панели инструментов WordPress есть способ доступа к настройщику тем (Theme Customizer). Все, что вам нужно сделать, это пройти по навигации «Внешний вид — Настройка».

Настройка темы

Это приведет вас к интерфейсу «Theme Customizer». Вы увидите предварительный просмотр вашего сайта и кучу вариантов на левой стороне.

Чтобы добавить CSS в ваш WordPress, нажмите «Дополнительный (пользовательский) CSS».

Дополнительный CSS

Когда вы откроете это, вы увидите пустое текстовое поле, в которое вы можете добавить свой код CSS.

добавить свой код CSS

Когда будет добавлено действующее правило CSS, вы увидите изменения, отраженные на панели предварительного просмотра «Theme Customizer».

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

цвет для заголовка

Обратите внимание, что «Hello World» больше не черный.

Кроме того, посмотрите, как я использую слово «синий» в коде CSS. Если вы хотите определенный оттенок синего, вы всегда можете ввести шестнадцатеричные коды. Например, я мог бы заменить слово «синий» на «#61d4f4», чтобы получить этот цвет для заголовка сообщения:

на панели предварительного просмотра

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

Нажмите «Опубликовать», когда вы закончите.

3. Плагин CSS

Если вы не хотите использовать «Theme Customizer» для добавления CSS в WordPress, вы всегда можете использовать бесплатный плагин WordPress, например Simple Custom CSS.

Этот легкий плагин создаст новый пункт меню на панели инструментов WordPress в разделе «Внешний вид». Он будет помечен как «Custom CSS». Когда вы нажмете на него, вы увидите пустое текстовое поле, похожее на то, которое находится в настройщике тем.

Плагин CSS

После добавления фрагментов кода CSS нажмите «Обновить пользовательский CSS», чтобы сохранить изменения.

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

Другие полезные инструменты для настройки вашего сайта WordPress с использованием CSS включают в себя:

  • Elementor
  • Beaver Builder

Примеры фрагментов кода CSS

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

  • Первая строка: какой элемент вы изменяете, например, заголовок записи (h1), текст в абзаце (p) или область виджета (виджет)
  • Все остальные строки: конкретные инструкции по изменению, заключенные в скобки

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

Тем не менее, если вы хотите настроить свой сайт с помощью CSS, вот несколько примеров фрагментов кода, чтобы показать вам, как он работает.

Семейство и размер шрифтов

Чтобы изменить шрифт и его размер, добавьте этот код CSS:

    p {
    font-family: Georgia;
    font-size: 20px;
    }

изменить шрифт

Вы можете заменить семейство шрифтов желаемым стилем шрифта и изменить число, чтобы размер шрифта был большим или меньшим, как вы хотите.

Настройка боковой панели

Допустим, вы хотите добавить некоторые настройки для виджетов боковой панели на вашем сайте. Чтобы добавить хороший цвет фона и отступы, добавьте этот код CSS в новую строку:

    .widget {
    background: #b9ebfa;
    padding: 25px;
    }

настройки для виджетов

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

Например, допустим, вы хотите, чтобы CSS применялся только к виджету панели поиска. Чтобы сделать это, измените CSS так:

    .widget_search {
    background: #b9ebfa;
    padding: 25px;
    }

виджет панели поиска

Где узнать больше о CSS

  • Htmlbook.ru (Бесплатно)
  • W3Schools.com (Бесплатно)
  • Codeacademy (Бесплатно)
  • MDN web docs (бесплатно)
  • Udemy (платный)
  • Lynda.com (платный)

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

Последние мысли

Наличие уникального веб-сайта, который выделяется среди всех остальных, является важной частью вашего общего успеха. И так уж получилось, что добавление CSS в WordPress — это простой способ настроить ваш сайт.

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

Просто не забудьте использовать «Theme Customizer» или CSS-плагин для добавления CSS в WordPress. Нет смысла ломать ваш сайт и рисковать серьезным простоем из-за нескольких изменений дизайна.

Если у вас остались вопросы или пожелания — вы всегда можете написать мне в комментариях или на странице «Об авторе» — там есть форма связи.

Также не забывайте подписываться на обновленияя моего блога. У меня много интересных мыслей, что написать в следующих статьях. Не отставайте от других — подписывайтесь.

До скорых встреч!

Вы когда-нибудь добавляли CSS в WordPress? Есть ли какие-нибудь фрагменты кода перехода, которыми вы хотели бы поделиться? Если это так, я хотел бы услышать все об этом в комментариях ниже.
Вам понравилась статья?
плохохорошо (+1 баллов, 1 оценок)
Загрузка...
Обо мне
Юрич:
Занимаюсь созданием сайтов на WordPress более 6 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на WordPress, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!