Как на WordPress подключить CSS файл

Подключение CSS файла к WordPress не многим отличается от стандартного подключения в нединамической (обычной) HTML странице. Но все-же есть ньюансы и отличия, о которых и пойдет речь в данной статье.

Для начала приведу основные способы подключения СSS к HTML файлу. То-есть сначала рассмотрим обычное, стандартное подключение стилей к сайту, это пригодится в дальнейшем.

Чтобы подключить CSS файл к обычной HTML странице нужно:

Первый способ подключения CSS к HTML странице

Между тегами

<head></head>

прописать следующий код:

<link rel='stylesheet' type='text/css' href='css/reset.css'>

Тут все довольно просто, css — это папка, куда помещен файл стилей, reset.css — сам подключаемый файл.

Или так, с указанием полного адреса URL нахождения стилевого файла:

<link rel='stylesheet' type='text/css' href='http://filwebs.ru/css/reset.css'>

Данным кодом можно подключить любой css файл, даже если он размещен на стороннем ресурсе.

Второй способ подключения CSS к HTML странице

Можно подключить CSS файл через @import. В данном случае подключаемый файл импортируется в основной файл CSS, дополняя его.

Для этого нужно в самом начале style.css (см. название своего файла) прописать следующий код:

@import "css/reset.css";

Или для стороннего файла стилей, с указанием полного адреса:

@import url("/css/reset.css");

Как видно из примера, в код подключения просто вставляется ссылка на сторонний ресурс.

Может пригодиться статья — Как прописать правильный путь к папке с файлом.

Из личного опыта

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

В этой статье я не буду затрагивать такие моменты как «точечное подключение» или компановка стилей в HTML файле. А лучше перейду к главному.

Как подключить CSS файл к WordPress

Подключать файлы CSS к WordPress можно и вышепреведенными способами, но правильнее будет последовать следующим примерам.

Первый способ подключить CSS файл к WordPress

Открываем файл header.php и сразу перед закрывающим тегом </head> нужно прописать такой код:

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/css/reset.css" />

Это то-же самое, что и в верхнем примере, только написано на языке PHP. Нужно только правильно прописать путь к папке и файлу /css/reset.css.

Но самым правильным способом считается подключение CSS файлов к сайту на WordPress является нижеприведенный пример.

Регистрация CSS файлов в WordPress

Дабы избежать подключения одного и того-же файла CSS несколько раз, разработчики WordPress придумали функцию wp_register_style. Дублирование стилевых файлов может возникать, если к примеру несколько плагинов подключают одни и те же стили.

Добавляем в файл functions.php этот код:

function my_style_load() {
$theme_uri = get_template_directory_uri();
wp_register_style('my_theme_style', $theme_uri.'/css/reset.css', false, '0.1');
wp_enqueue_style('my_theme_style');
}
add_action('wp_enqueue_scripts', 'my_style_load');

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

function my_style_load() — my_style_load — название функции, можете придумать свое, пишется без пробелов в нижнем регистре букв и без знака — (тире). Обратите внимание, что встречается оно в коде два раза.

$theme_uri = get_template_directory_uri(); — get_template_directory_uri(); значит, что подключаемый файл должен обязательно находится внутри папки вашей темы, в директории шаблона.

wp_register_style(‘my_theme_style’, $theme_uri.’/css/reset.css’, false, ‘0.1’); — my_theme_style идентификатор стилей, может быть произвольным.

/css/my-style.css — это как можно догадаться, путь к папке и название подключаемого CSS файла.

Вот и все, стоит потратить 5-10 минут и немного разобраться просто что-где прописывать и ваши стили CSS не будут загружаться по два раза.

Если вы уверены, что к сайту не подключен подобный CSS файл, то для подключения подойдут все способы указанные в статье. Выбирайте какой нравится!

Возможно вам будет интересно

— Как вам статья «Как на WordPress подключить CSS файл?» Если что, пишите.

Самая подробная информация емкость под СИП раствор на сайте.