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

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

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

Между тегами

<head></head>

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

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

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

Второй способ подключить CSS файл через @import, для внешних файлов нужно добавить в самое начало основной таблицы стилей CSS сайта строчку:

@import url("http://google/style/reset.css");

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

@import "../slider/my-slider";

разницы нет, нужно лишь указать правильный путь к папке с файлом CSS.

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




Сразу хочу заметить, что подключать CSS файл к WordPress вышеприведенным способом не правильно. К примеру, если какой-либо из плагинов использует уже такой-же фай, то движок WordPress не сможет проверить, был ли этот файл уже загружен и подключит его повторно.
Раньше на WP стили подключались таким образом:

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

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

Чтобы подключить CSS файл к WordPress нужно:

Добавить в файл functions.php этот код:

function my_style_load() {
 $theme_uri = get_template_directory_uri();
 wp_register_style('my_theme_style', $theme_uri.'/css/my-style.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/my-style.css’, false, ‘0.1’);my_theme_style название стилей, я придумал свое, оно пишется так-же как и название функции и встречается в коде два раза.
/css/my-style.css — это как можно догадаться, путь к папке и название подключаемого CSS файла.
Вот и все, стоит потратить 5-10 минут и немного разобраться просто что-где прописывать и ваши стили CSS не будут загружаться по два раза. Хотя если вы уверены, что к сайту не подключен подобный CSS файл, то для подключения подойдут все вышеописанные способы. Выбирайте какой нравится!
Источник

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

  • 16/02/2017 в 19:41
    Permalink

    Здравствуйте! Спасибо за статью) А что означает(для чего служит) предпоследний элемент false и последний элемент `0.1` в wp_register_style ?

    Ответ
  • 18/02/2017 в 10:51
    Permalink

    Здравствуйте, это необязательные атрибуты подключаемого файла стилей. Элемент “false” отключает атрибут “media type”, так же можно использовать “null” или вообще пропустить. А “0.1” соответственно версия файла, при наличии таковой.

    Ответ
  • 08/05/2017 в 23:37
    Permalink

    Спасибо вам большое вы просто красавчик

    Ответ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.