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

Что такое CSS?

CSS - это каскадные таблицы стилей и язык, используемый для идентификации и описания того, как выглядит контент на странице, написанной на HTML. W3Schools дает очень красивое определение CSS: “Стили определяют, как отображать HTML-элементы.”

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

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

Simple Custom CSS

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

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

Основные изменения стиля

С простым пользовательским CSS вы можете изменять стиль, на какой хотите. Но какие же изменения вы можете вносить?

• Делать большие/маленькие заголовки
• менять порядок разделов
• изменять цвет, размер, шрифт текста
• выбирать способ расположения меню
• и т.д.

 

Как видим, с помощью CSS в WordPress можно сделать очень многое. Давайте вкратце рассмотрим основные возможности CSS.

 

Шрифт текста

Если вы хотите изменить вид шрифта на вашем сайте, то ваш CSS должен иметь примерно такой вид:

 

В этом фрагменте кода, "body" определяет, что мы говорим о тексте. Затем "background-color" ссылается на цвет фона страницы. Далее идет "font-family", где указывается шрифт, который мы хотим использовать для текста.

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

На “sans-serif” индикаторе отмечается, что если любой из предыдущих шрифтов не работает, то браузер должен вызвать шрифт, который можно использовать.

Далее идет "font-weight", который указывает на толщину линий, образующих каждую букву и "font-size", который говорит вашему браузеру, насколько большим должен быть шрифт в пикселях. И, наконец, это "color", который отмечает цвет вашего текста.

Заголовки

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

 

Теперь в этом примере все теги заголовков от h1 до h6 будут шрифтом Georgia, курсивом и темно-синего цвета. Но допустим, вы хотите, чтобы ваши теги h1 немного отличались от остальных заголовков. Для этого нужно вставить в код выше уточнение:

 

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

Ссылка

Чтоб выделить ссылки из общего текста по всему сайту можно использовать код:

 

“Color” означает цвет текста ссылки, а “text-decoration” здесь имеет значение none (нет), потому что мы не хотим никаких подчеркиваний.

Список

Если вы хотите на вашем сайте WordPress добавить дополнительный стиль, например, неупорядоченные списки, вы можете использовать код:

 

“List-style-type” определяет какой стиль основной. Тут он отображен как “circle”. Вы можете установить другой цвет и размер шрифта для ваших списков. В результате это выглядит так:

Вывод

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