Подключение стилей в WordPress

Віталий

7 років ago

Доброго времени суток. 🙂

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

Чаще всего начинающие мастера, при создании своей темы WordPress, пользуются простейшим способом подключением стилей. Хотя не всегда и начинающие. Иногда мастера используют простой способ при оптимизации темы, чтобы уменьшить количество обращений к базе данных, потому как при данном способе нет обращений к базе данных и тд. В общим, суть способа просто, просто добавляем ссылки link rel="stylesheet". Выглядит это примерно так:

<link rel="stylesheet" type="text/css" media="all" href="http://site.com/wp-content/themes/mytheme/style.css" />

Данная строка, как вы понимаете, добавляется в шапку темы, то бишь в файл header.php между тегами head. Очень часто в данном способе добавляют стандартную функцию WordPress - bloginfo(). В итоге строка выглядит так:

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

Как вы понимаете тут уже идет обращение к базе данных и оптимизированным этот способ не назвать. Поэтому, если вас не очень беспокоит вопрос с нагрузкой на БД, тем более если он очень малый, я бы даже сказал, практически невидимый, то можно воспользоваться уже способом, который рекомендуют сами разработчики WordPress. Его суть в том, чтобы использовать функцию wp_enqueue_scripts. Именно поэтому я в начале просил вас ознакомится с материалом из прошлой статьи. Так же как и скрипты можно подключать и стили. Просто добавляете функцию в ваш файл functions.php

function mythem_enqueue_style() {
wp_enqueue_style( 'style', get_template_directory_uri(). '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'mythem_enqueue_style' );

Как видите мы используем ту же функцию wp_enqueue_scripts как и в подключении со скриптами для регистрации стилей, но сам файл подключаем с помощью wp_enqueue_style.

Давайте немножко разберем что за параметры указаны и что они означают. Схема выглядит так wp_enqueue_style( $handle, $src, $deps, $ver, $media ). После wp_enqueue_style, в нашем случаи в скобках в примере всего два из возможных.

style - $handle - Рабочее название скрипта или идентификатор. Если вы будете подключать много файлов, то у каждого должно быть свое уникальное название.
get_template_directory_uri(). '/style.css' - $src - Тот самый путь к файлу в корневой папке вашей теме. Если файл style.css не в корне, а в вложенной папке, то естественно путь указывается с папкой, например - /style/style.css. get_template_directory_uri() - это функция что создает ссылку на папку с темой.

Помимо этих параметров, можно еще указывать и другие.

$deps - Массив идентификаторов других стилей, от которых зависит тот файл стилей что вы подключаете. Указанные тут стили, будут подключены до текущего.
$ver - Версия вашего файла. Указанная версия, будет добавлена в конец ссылки на файл и будет выглядеть так - ?ver=1.1.1
$media - Параметр, что устанавливает значение атрибута media.

Теперь давайте расмотрим, когда вам нужно подключить несколько файлов стилей. В примере будет 2 файла из папки с темой и один сторонний файл, для подключения стилей шрифта font-awesome, что создает иконки. Выглядит это примерно так:

function mythem_enqueue_style() {
wp_enqueue_style( 'style', get_template_directory_uri(). '/style.css' );
wp_enqueue_style( 'tw_style', get_template_directory_uri(). '/tw_style.css' );
wp_enqueue_style( 'font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'mythem_enqueue_style' );

Как видите нет ничего сложного. Если вы начали создание своей темы для WordPress то данный способ вам пригодится.

На этом все, спасибо за внимание. 🙂

Exit mobile version