Добавляем CSS в WordPress (легкий путь)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На панели инструментов WordPress есть доступ к настройщику тем. Нажимаем «Внешний вид» — «Настройка».

Откроется интерфейс настройщика тем. Вы увидите предварительный просмотр вашего сайта. Чтобы добавить CSS в ваш WordPress, нажмите «Дополнительные стили».

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

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

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

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

2. Плагин CSS

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

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

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

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

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

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

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

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

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

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

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

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

Вы можете заменить стиль шрифта и изменить его размер.

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

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

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

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

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

Ну вот мы и закончили. Теперь вы сможете вносить изменения в внешний вид вашего сайта с минимальными усилиями. Мы показали вам лишь самые простые способы добавления CSS в дизайн вашего веб-сайта. Способов конечно множество, но нет смысла ломать сайт и рисковать серьезным простоем из-за нескольких изменений дизайна. Ну а у нас на этом все. Всем пока!

С уважением Вячеслав и Валерия!