CSS в WordPress – как правильно?

В этой небольшой статье расскажу как правильно добавить свои стили CSS в WordPress.

Нередко возникает ситуация, когда после установки нового шаблона на блог приходится либо что-то менять в в таблице стилей, либо что-то добавлять. Короче говоря - подстраивать CSS в WordPress под свой вкус и нужды. С этим сталкивался практически каждый блогер. Причём, на такую необходимость абсолютно не влияет купили вы шаблон за $100 или скачали где-то бесплатно. Она, необходимость, просто возникает и всё тут.

Многие поступают самым простым, но совершенно неправильным способом - начинают редактировать стили CSS в WordPress прямо в файле style.css шаблона. Почему такой способ корректировки CSS в WordPress я считаю неправильным? Во-первых, при обновлении шаблона или его смене надо начинать всё заново, а во-вторых, как правило бывает затруднительно вспомнить где конкретно и что менял.

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

Как правильно добавить свои стили CSS в WordPress

Покажу несколько, на мой взгляд, более совершенных вариантов.

Свои стили CSS в WordPress используя возможности шаблона

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

Этот вариант работает у меня. Я уже несколько раз устанавливал обновления шаблона, а это, если кто не знает, подразумевает следующий порядок действий - активация другого шаблона, удаление данного, загрузка обновлённого и его активация. Стили CSS, прописанные в этом блоке никуда не исчезают, они хранятся в базе и продолжают действовать.

Возникает вопрос, а как быть, если я надумаю перейти на другой шаблон? Очень просто, я скопирую css из этого блока себе на компьютер, а потом вставлю в новый шаблон. На мой взгляд - это самый правильный вариант. Но такую возможность предоставляют не все шаблоны, даже платные...

Свои стили CSS в WordPress используя плагин

Можно настроить свои стили CSS в WordPress используя какой-либо специальный плагин - их есть в репозитории. В этом варианте ваш css вообще не будет привязан к шаблону. Сразу признаюсь, таким способом я не пользовался, но вот пример подобных плагинов:

Custom CSS - Whole Site and Per Post - «Добавление пользовательских таблиц стилей для вашего WordPress сайта - Стиль всего сайта или конкретные сообщения / Страницы. Легко добавлять Styling и внешние таблицы стилей». 

Custom CSS for WordPress - «Простой и легкий плагин для добавления пользовательских CSS для вашего сайта WordPress. Этот плагин поможет вам переопределить тему или плагин CSS». 

Не уверен, но возможно, что при использовании этого варианта в некоторые идентификаторы css придётся добавлять параметр «!important».

Также считаю этот вариант очень хорошим решением.

Свои стили CSS в WordPress путём импорта

Если по каким либо причинам первые два варианта задания своих стилей CSS в WordPress не подходят, то можно поступить следующим образом. Создать отдельный файл стилей, например «my.css», положить его либо в корень сайта, либо в папку wp-content/themes - короче куда вам нравится и в нём прописывать всё, что нужно. А чтобы подключить этот файл к активной теме, необходимо в самом начале style.css шаблона прописать всего лишь одну строчку:

@import url('my.css');

 Конечно, в URL надо указать реальный путь к вашему файлу css в зависимости от того, куда вы его положите. Желательно не размещать его в папке конкретной темы - может удалиться вместе с шаблоном...

Вот пример из одного моего рабочего проекта, показано начало файла demo.css, в первой строке которого в него импортируется reset.css:

@import url('reset.css');

/* General Demo Style */
body{
	background:#e4ebe9 url(../images/pattern.png) repeat top left;
	color:#000;
	font-family: 'PT Sans Narrow', Arial, sans-serif;
	font-size:12px;
}
a{
	color:#000;
	text-decoration:none;
}
.clr{
	clear:both;
}
h1, h5{
	margin:15px;
	font-size:44px;
	color:#000;
	font-family: 'Rochester', sans-serif;
	text-shadow:1px 1px 1px #fff;
	text-align:center;
}

 Этот вариант тоже неплох, только надо не забывать при изменении шаблона или его обновлении вставлять команду импорта в style.css.

Заключение

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

Материалы по теме:

Резервное копирование WordPress

Как привлечь посетителей на сайт бесплатно

Как обойти маразм

Оптимизация изображений – формат webp

Свои смайлы в статьи WordPress

Надо ли устанавливать обновления WordPress