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

Дополнительные стили CSS WordPress

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

Что такое CSS? CSS — это каскадная таблица стилей (если мы будем гуглить ответ на этот вопрос). Знаю, что мало о чем скажет обычному пользователю. Поэтому выражусь проще:

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

Стили CSS в записях

Начнем с самого простого, поменяем стили абзацу. Установим ему новый фон и цвет. В своей записи выберите любой абзац и справа в колонке выберите «Дополнительно». Спуститесь ниже до графы «Дополнительные классы CSS».

Дополнительные стили CSS WordPress

Дадим новое название нашему классу, пусть это будет redbox. Вы можете использовать абсолютно любое название, которое только пожелаете.

Далее мы переходим в настройки нашей темы.

custom css

Здесь в самом низу мы видим графу «Дополнительные стили«, она то нам и нужна!

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

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

Мы задали нашему абзацу класс redbox, в CSS стили начинаются с точки, затем идет название класса и скобки, внутри которых мы будем писать код.

background-color: rgb(157, 229, 175); — Задаем фоновый цвет.
color: rgb(97, 96, 153); — Задаем цвет текста.
padding: 15px; — Добавляем немного отступов со всех краев, чтоб текст не прилипал.

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

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

У вас мог возникнуть вопрос, откуда вам брать цвет, который вам нужен?

Есть множество сервисов и готовых решений. Самый простой способ — это ввести в поисковой системе «Подобрать цвет». У вас откроется цветовая палитра, можете начинать.

В CSS поддерживаются и HEX и RGB цвета, выбирайте на свой вкус.

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

Зачем вам это?

У вас может возникнуть подобный вопрос. Зачем изменять фон и цвет столь «сложным» способом, если это можно сделать редактируя саму запись. И вы будете абсолютно правы!

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

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

Дополнительные стили CSS имеют преимущество над вашими остальными стилями, вы можете переназначать параметры ваших стилей с помощью этой функции. Например, если вы пожелали текст всех ваших абзацев сделать больше — не проблема: p {font-size: 20px;}

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

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

Изменяем стили виджетам

Допустим, мы хотим изменить заголовки всем виджетам, для этого нам необходимо узнать их класс. Нажимаете на любой заголовок виджета ПКМ (правая кнопка мыши), затем «Просмотреть код».

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

У вас справа, либо снизу откроется панель разработчика (незаменимая вещь в вёрстке), в которой вы и найдете ваш класс. Видим знакомое название «Свежие записи», нас интересует то, что написано в кавычках в параметре class="widget-title", это widget-title.

Идем в наши дополнительные стили и прописываем стили для widget-title.

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

Помним, что стили начинаются с точки, прописываем .widget-title {color: red;}. И мы видим, что наши заголовки окрасились в красный.

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

Я показал вам это — исключительно для наглядности. Чтоб вы понимали, какую силу имеют «Дополнительные стили».

Задаем класс для виджетов

Первым делом, вам необходимо установить и активировать плагин «Widget CSS Classes» (как установить плагин на wordpress). Далее мы уже идем в привычное нам меню с виджетами.

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

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

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

Действуем по аналогии с абзацами и задаем произвольное название нашему классу. Сохраняем и отправляется редактировать наши дополнительные стили: Внешний видНастроитьДополнительные стили. Задаем .postcustom {color: red;]

Дополнительные стили CSS
Только один заголовок окрасился в красный

Редактируем мы именно виджет «Свежие записи», потому что именно ему мы задали дополнительный класс. Если мы хотим применить наши действия ко всем виджетам, необходимо задать такой же класс и всем остальным.

Можем придумать что-то еще, например, добавить иконку в меню сайта или конкретному заголовку. Можно делать абсолютно всё, что вы пожелаете. Всё зависит только от вас и вашей фантазии.

Дополнительные стили CSS
.postcustom .widget-title {
	background-image: url(/wp-content/uploads/bc2.jpg);
	background-size: 20px;
	background-repeat: no-repeat;
	padding-left: 30px;
        color: red;
}

Почему я здесь указал .widget-title после .postcustom? Так я «сказал» стилям, что картинка должно относится именно к заголовку в этом блоке, а не ко всему блоку. Также мы можем исправить то, что точка напротив «Привет, мир!» окрасилась в красный. Достаточно перенести color: red; в код выше, тем самым указывая, что окрасить необходимо только заголовок.

В общем и целом, вариантов развития много, то, как стилизовать ваш блог — решать вам, я лишь показал, как это легко и доступно! Удачи!

Оцените статью
Добавить комментарий