Как подключить 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 файл, то для подключения подойдут все вышеописанные способы. Выбирайте какой нравится!
Источник
Здравствуйте! Спасибо за статью) А что означает(для чего служит) предпоследний элемент false и последний элемент `0.1` в wp_register_style ?
Здравствуйте, это необязательные атрибуты подключаемого файла стилей. Элемент “false” отключает атрибут “media type”, так же можно использовать “null” или вообще пропустить. А “0.1” соответственно версия файла, при наличии таковой.
Спасибо вам большое вы просто красавчик