Пользовательский дизайн WordPress — дополнительные стили

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

Вступление

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

О дизайне сайта и его реализации

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

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

Собственный дизайн WordPress — это возможность имеющимися инструментами изменить цветовые и графические элементы рабочей темы по своему усмотрению.

Как можно сделать собственный дизайн WordPress

С появлением на версии WordPress 4.6 настройщика тем (Customizer WordPress) создать собственный дизайн сайта стало очень просто. Читать о статью о Customizer WordPress.

В настройщике темы обязательно должен быть пункт «Дополнительные стили». Эта настройка позволяет сделать любые дополнения (изменения) в файл таблица стилей вашей рабочей (активной) темы.

На фото вы видите настройку «Дополнительные стили» с пояснениями системы. Прочитав пояснения — закройте их, чтобы они не мешали.

Данный редактор работает в двух режимах:

С подсветкой кода;
Без подсветки кода.

По умолчанию подсветка кода включена во всех редакторах на вкладках:

Внешний вид >>>Редактор тем;
Плагины>>>Редактор плагинов;
Дополнительные стили.

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

Важно, если у вас мало опыта в программировании НЕ отключайте подсветку кода.

Собственный дизайн WordPress

Определившись с видом настройки «Дополнительные стили», начинаем создавать собственный дизайн WordPress. Для этого в поле редактора пишем CSS grouping selector, по возможности объединяя элементы и их стилизацию. Каждый селектор разделяется пробелом.

Читать: Защита от спама reCAPTCHA Google WordPress сайта

Синтаксис селектора:

element, element {
/*[свойство]: [значение]*/}

Например, чтобы поменять шрифт на Verdana и его размер на 18px на всём сайте, необходимо в поле редактора «Дополнительные стили» вписать такой селектор.

body {
font-family: Verdana;
font-size: 18px;
}

После публикации данной настройки, это правило переопределит правило для элемента body в файле style.css рабочей темы.

Заключение

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

©wpkupi.ru