Стили CSS, использование в WordPress

Стили CSS, как они используются в CMS WordPress, именно эти вопросы разберем в этом посте.

Стили CSS или стандарты CSS являются понятиями-синонимами. Использование технологии CSS значительно облегчают жизнь вебдизайнерам при разработке и верстке страниц своих сайтов.

Как уже было сказанов статье «Стандарты CSS», при помощи стилей CSS мы описываем параметры и характеристики представления блоков и элементов страниц сайта. Для начала вспомним из каких основных блоков состоят страницы среднестатистических сайтов.

Элементы страницы сайта

В общем виде страница сайта состоит из следующих основных блоков:

1) Шапка сайта или Header.

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

2)Информационный блок.

Это основной блок страницы, содержит уникальное для каждой страницы содержание. Но оформление всех страниц для этого блока также будет одинаков.

3)Виджеты.

Это боковые колонки сайта. Их может быть несколько. Чаще всего один или два. Располагаться виджеты могут в нескольких вариациях:

• справа от информационного блока
• слева от информационного блока
• справа и слева от информационного блока

Есть еще виджеты, расположенные ниже информационного блока. Все виджеты для всех страниц сайта отображаются одинаково.

4) Подвал или Footer страницы.

Располагается внизу страницы и для всех страниц сайта одинаков.

Все эти блоки, в свою очередь, состоят из отдельных составляющих, их называют элементами блоков. Что это за элементы?

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

Так вот для описания всех этих элементов и служат стили CSS. И находятся эти описания в специальных файлах с расширением .css.

Применение стилей CSS в CMS WordPress

Теперь переходим ближе к теме нашей статьи – использование стилей CSS в CMS WordPress.
В каждом сайте, функционирующем на WordPress, дизайн определяется шаблоном или темой. Файл, содержащий все элементы CSS, называется style.css.

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

Располагается этот файл в папке используемой темы. Если зайти на хостинг сайта по ftp-протоколу, то путь к файлу будет следующим:

…/wp-content/themes/имя-темы/style.css

Можно добраться к нему и через административную панель вашего сайта, пройдя по пунктам:

Дизайн — Редактор — style.css

В каких случаях стоит заниматься изменением стилей в файле style.css?
Если Вас дизайн сайта в целом устраивает, но хочется какой-то элемент подправить. Изменить размер или цвет шрифта в каком-то блоке, изменить цвет заливки или рисунок. да мало ли что мы захотим изменить.

Что я менял на своем сайте? Увеличивал размер шрифта в некоторых, цвет некоторых элементов.
Например, мне не очень нравилось оформление цитат на моем сайте. И я заменил традиционное изображение.

на рисунок этой симпатичной птички-говоруна.

Это было сделать несложно. Я нашел в файле блок описания цитат, привожу этот фрагмент ниже

/* Start blockquote */
blockquote
{
margin:10px 10px 10px 50px;
padding:5px 5px 5px 41px;
background-color:#CCE1E5;
background-image:url(‘images/PostQuote1.png’);
background-position:left top;
background-repeat:no-repeat;
}
/* Finish blockuote */

Затем загрузил в в папку images своей темы изображение с именем PostQuote1.png и откорректировал запись в этом блоке. Для этого пришлось изменить только одну строку в файле style.css. Таким образом можно менять любые элементы дизайна на своем сайте на движке WordPress. Я решил дать Вам небольшую инструкцию по изменению стилей CSS.

Изменение элементов дизайна

• 1.Четко определяем, что нам надо менять. Конкретный элемент дизайна.
• 2.Сохраняем копию файла style.css на свой компьютер
• 3.Открываем файл style.css любым редактором, Блокнотом или Notepad будет предпочтительнее.
• 4.Находим элемент дизайна для изменения.
• 5.Изменяем директивы css
• 6.Сохраняем изменения в файле style.css и загружаем его на хостинг.
• 7.Тестируем результаты нашей работы.
• 8.Если все нормально, то завершаем наши усилия, в противном случае продолжаем работу.

Вот Вам ориентировочный план действий.

И еще предлагаю Вам посмотреть хорошее доходчивое видео на тему стилей CSS и его месте в сайтостроении.

На этом завершаю, всем желаю успехов.

15 комментариев на “Стили CSS, использование в WordPress”