Для чего нужен файл style.css в WordPress?

Сайт OnWordpress.ru продается

Оптимальная цена 300 000 рублей

Подробнее
Файл style.css в теме wordpress

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

Использование файла style.css не только упрощает работу с сайтом, но также положительно влияет на индексирование сайта.

  1. Файл style.css упрощает работу с сайтом - чтобы изменить внешний вид сайта вам придется править только один файл style.css, а не множество шаблонов темы.
  2. Файл style.css положительно влияет на индексацию сайта, потому что весь CSS код, отвечающий за внешний вид сайта вынесен в отдельный файл, поэтому поисковый робот индексирует только полезный и нужный код, а не технические фрагменты.

Для чего нужен style.css?

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

Предположим, что файл style.css вашей WordPress темы пуст, тогда ваш сайт в браузере будет выглядеть не оформленным - без стилей. Точнее стили к сайту будут применяться те, что установлены в вашем браузере по умолчанию. А это значит, что будет простой, растянутый на весь экран, черный текст на белом фоне.

Где находится файл style.css и как его редактировать

Находится файл style.css в папке WordPress темы (например, http://ваш_сайт.ru/wp-content/themes/twentyten/style.css). Вы можете найти и отредактировать файл style.css подключившись к сайту с помощью FTP клиента.

Также отредактировать файл style.css можно в админке WordPress на вкладке "Внешний вид - Редактор".

Редактируем файл style.css в админке WordPress

Как подключить файл стилей style.css

WordPress автоматически подключает нужный файл стилей style.css при установке темы. Происходит подключение style.css в шапке сайта, а именно в файле темы header.php с помощью этой строки кода:

<link rel="stylesheet" type="text/css" media="all" href='<?php bloginfo( 'stylesheet_url' ); ?>' />

В случае если по каким-то причинам ваш файл style.css не подключается или нужно подключить еще один файл стилей, то можно подключить файл стилей вручную, добавив в файл header.php следующий код:

<link rel="stylesheet" type="text/css" media="all" href='http://ваш_сайт.ru/путь_до_папки_с_файлом/my_style.css' />

Как устроен файл style.css

Устроен файл style.css следующим образом - в самом начале файла располагается код, сбрасывающий все браузерные стили, а далее располагается код, задающий нужные вам стили для сайта.

Код сброса CSS стилей может быть примерно следующим:

/* Сброс CSS */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

body {
	line-height: 1;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-weight: normal;
}

ol, ul {
	list-style: disc;
	padding-left: 25px;
}

blockquote {
	quotes: none;
}

blockquote:before, blockquote:after {
	content: '';
	content: none;
}

del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a { outline: none; }

a img { border: none; }

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

body {
	background: url(/img/my_fon.png);
}

И так далее, вы можете изменить весь внешний вид вашего сайта с помощью файла style.css.

Расскажите друзьям
Нравится блог? - Читайте ВКонтакте
Ответим на Ваши вопросы в комментариях