Руководство для начинающих по CSS

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

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

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

Что такое CSS?

CSS расшифровывается как Cascading Style Sheets или каскадируемые таблицы стилей , и это язык, который используется , чтобы определять и описывать как должен выглядеть контент на странице, написанной в HTML. W3Schools (самый большой обучающий сайт по веб-дизайну и сайтостроению) дает CSS достаточно хорошее объяснение: «Стили, определяющие как отображать HTML элементы».

На WordPress CSS работают так же, как если бы они  работали на любой другой платформе. У вас есть ваш главный CSS файл , который командует всеми эстетическими и форматированными элементами вашей темы. Затем, у вас есть кусочек СSS кода внутри ваших главных PHP файлов, которые ссылаются на таблицу стилей и указывают сайту где что поставить.

Все HTML элементы в теме подчиняются правилам , изложенным в СSS для настройки макета. Все WordPress темы полагаются на CSS в плане создания профессионального облика с согласующимися между собой шрифтами, стилями и форматированием. Представьте, что CSS-  это такая инструкция для вашего сайта. У вас есть functions.php, header.php, sidebar.php и т.д. Но только после вмешательства style.css все эти PHP файлы будут знать как собрать сайт воедино.

Плагин Simple Custom CSS (Простая настройка CSS)

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

Интерфейс на самом деле представляет из себя обычный упорядоченный список WordPress UI (user interface), и в этом его удобство. Плюс ко всему , он четко и ясно показывает ваши параметры настройки.

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

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

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

При помощи плагина Simple Custom CSS вы можете менять стили в соответствии с вашими вкусом и желанием. Но, вероятно, вы уже задаетесь вопрос «А какие изменения я могу , собственно говоря, делать?» Хороший вопрос.

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

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

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

Шрифт основного текста (Body Text Font)

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

В данном отрывке из кода слово “body” означает, что мы имеем ввиду основной текст body text. Слова  “background-colour” относятся к цвету фона страницы. Следующее “font-family”(список шрифтов),  к которому вы обращаетесь, когда хотите , чтобы основной текст отобразился с тем или иным  шрифтом из этого списка.

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

Следующие слова “font-weight” (вес шрифта), что указывает на толщину линий, которые составляют каждую букву и  “font-size” (размер шрифта), которые указывают вашему браузеру какой величины в пикселях должен быть шрифт. И наконец, “colour” (цвет) , который указывает на цвет основного текста.

Подсказка: все, что вы включите  в / * как эти знаки  * /, будет указывать на  примечания для себя и и не появится на сайте.

Заголовки Headers

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

 В этом примере все теги от h1 до h6  будут прописаны шрифтом Georgia ( или любым другим serif шрифтом), с наклоном (italics) и в темно-синем цвете. Но давайте предположим, что вы хотите ,чтобы h1 тег  немножко отличался от остальных тегов заголовка. В этом случае, вам нужно вставить над ними  следующий код:

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

Ссылка (Link)

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

Где  “colour”  означает цвет текста ссылки и “text-decoration” здесь установлен как « none», потому что мы не хотим ничего подчеркивать.  “a:visited” означает, что мы хотим, чтобы  ссылка выглядела также ( без изменений), после того, как на нее кликнут.

Наведение на ссылку (Link Hover)

Когда посетители наводят свой курсор на ссылку, иногда  интересно использовать какой-нибудь эффект. Наиболее распространенный  из них- простое подчеркивание.  Чтобы сделать это, введите следующее:

a:hover { text-decoration: underline; }

Список (List)

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

ul { list-style-type: circle; colour: #004060; font-size: 16px; font-weight: bold; }

“list-style-type”  обозначает  пулевой стиль ( bullet style). В данном случае он обозначен словом “circle.”  Вы можете также установить отличные размер шрифта ( font size),  толщину шрифта (font weight) ,а также цвет ( сolor)  для ваших списков.

Примечание: ol — ordered list– упорядоченный список, выглядит так:

1. List Item
2. List Item
3. List Item

ul- unodered list– неупорядоченный список, выглядит так:

• List Item
• List Item
• List Item

И когда вы внесете все эти изменения, то на живом сайте CSS будут выглядеть вот так:

Заключение

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

Алексей Шевченко

Автор и редактор на wptheme.us

Опыт работы с WordPress более 10 лет. Создал более 1500 сайтов на Вордпресс. Перевел более 400 тем на русский и украинский язык. Сотни вылеченных сайтов от вирусов. Тысячи установленных и настроенных плагинов. Задать вопрос мне можно на https://profiles.wordpress.org/wpthemeus/