Без CSS у вас есть очень ограниченный выбор стилей ваших веб-страниц. А без надлежащего включения CSS в WordPress вы можете очень сложно настроить стиль вашей темы для пользователей вашей темы.
В этом уроке мы рассмотрим правильный способ включения CSS в WordPress.
WordPress в настоящее время является самой популярной системой управления контентом в мире и насчитывает десятки миллионов пользователей. Вот почему, чтобы создать успешную тему, мы должны думать как каждый пользователь WordPress и пытаться идти по книге и правильно загружать наши CSS-файлы в наши темы.
Неправильный способ загрузки CSS в WordPress
За прошедшие годы WordPress расширил свой код, чтобы сделать его все более гибким, и постановка в очередь CSS и JavaScript была движением в этом направлении. Наши вредные привычки остались на некоторое время. Зная, что WordPress представил CSS и JavaScript, мы продолжили добавлять этот код в наши файлы header.php :
|
1
|
<link rel=»stylesheet» href=»<?php echo get_stylesheet_uri(); ?>»>
|
… или мы добавили приведенный ниже код в наши файлы functions.php , думая, что это лучше:
|
1
2
3
4
5
6
7
8
9
|
<?php
function add_stylesheet_to_head() {
echo «<link href=’http://fonts.googleapis.com/css?family=Open+Sans’ rel=’stylesheet’ type=’text/css’>»;
}
add_action( ‘wp_head’, ‘add_stylesheet_to_head’ );
?>
|
В описанных выше случаях WordPress не может определить, загружены ли CSS-файлы на странице или нет. Это может быть ужасной ошибкой!
Если другой плагин использует тот же файл CSS, он не сможет проверить, был ли файл CSS уже включен в страницу. Затем плагин загружает тот же файл во второй раз, что приводит к дублированию кода.
К счастью, WordPress имеет довольно простое решение таких проблем: регистрация и постановка в очередь таблиц стилей.
Правильный способ загрузки CSS в WordPress
Как мы уже говорили ранее, WordPress значительно вырос за эти годы, и мы должны думать о каждом отдельном пользователе WordPress в мире.
В дополнение к ним мы также должны учитывать тысячи плагинов WordPress. Но не позволяйте этим большим цифрам вас пугать: в WordPress есть довольно полезные функции, позволяющие нам правильно загружать стили CSS в WordPress.
Давайте посмотрим.
Регистрация файлов CSS
Если вы собираетесь загружать таблицы стилей CSS, вы должны сначала зарегистрировать их с помощью функции wp_register_style() :
|
1
2
3
|
<?php
wp_register_style( $handle, $src, $deps, $ver, $media );
?>
|
-
$handle(string, обязательный) — это уникальное имя для вашей таблицы стилей. Другие функции будут использовать эту «ручку» для постановки в очередь и печати вашей таблицы стилей. -
$src(строка, обязательная) ссылается на URL таблицы стилей. Вы можете использовать такие функции, какget_template_directory_uri()чтобы получить файлы стилей в каталоге вашей темы. Никогда не думай о жестком кодировании! -
$deps(массив, необязательно) обрабатывает имена для зависимых стилей. Если ваша таблица стилей не будет работать, если какой-либо другой файл стилей отсутствует, используйте этот параметр, чтобы установить «зависимости». -
$ver(строка или логическое значение, необязательно) — номер версии. Вы можете использовать номер версии своей темы или сделать ее, если хотите. Если вы не хотите использовать номер версии, установите его наnull. По умолчанию используется значениеfalse, что заставляет WordPress добавлять собственный номер версии. -
$media(строка, необязательно) — это CSS-типы медиа, такие как «screen», «handheld» или «print». Если вы не уверены, что вам нужно это использовать, не используйте его. По умолчанию это «все».
Вот пример функции wp_register_style() :
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<?php
// wp_register_style() example
wp_register_style(
‘my-bootstrap-extension’, // handle name
get_template_directory_uri() .
array( ‘bootstrap-main’ ), // an array of dependent styles
‘1.2’, // version number
‘screen’, // CSS media type
);
?>
|
Регистрация стилей является своего рода «необязательным» в WordPress. Если вы не думаете, что ваш стиль будет использоваться каким-либо плагином или вы не собираетесь использовать какой-либо код для его повторной загрузки, вы можете поставить в очередь стиль без его регистрации. Посмотрите, как это делается ниже.
Постановка в очередь файлов CSS
После регистрации нашего файла стилей нам нужно «поставить» его в очередь, чтобы он был готов к загрузке в разделе <head> нашей темы.
Мы делаем это с помощью функции wp_enqueue_style() :
|
1
2
3
|
<?php
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
?>
|
Параметры в точности совпадают с wp_register_style() , поэтому нет необходимости повторять их.
Но, как мы сказали, wp_register_style() не является обязательной, я должен сказать вам, что вы можете использовать wp_enqueue_style() двумя различными способами:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
<?php
// if we registered the style before:
wp_enqueue_style( ‘my-bootstrap-extension’ );
// if we didn’t register it, we HAVE to set the $src parameter!
wp_enqueue_style(
‘my-bootstrap-extension’,
get_template_directory_uri() .
array( ‘bootstrap-main’ ),
null, // example of no version number…
// …and no CSS media type
);
?>
|
Имейте в виду, что если плагину потребуется найти вашу таблицу стилей или вы намереваетесь загрузить ее в различных частях своей темы, вам обязательно нужно сначала ее зарегистрировать.
Загрузка стилей на наш сайт
Мы не можем просто использовать wp_enqueue_style() где-либо в нашей теме — нам нужно использовать «действия». Есть три действия, которые мы можем использовать для различных целей:
-
wp_enqueue_scriptsдля загрузки скриптов и стилей в интерфейс нашего сайта, -
admin_enqueue_scriptsдля загрузки скриптов и стилей на страницах нашей панели администрирования, -
login_enqueue_scriptsдля загрузки скриптов и стилей на странице входа в WordPress.
Вот примеры для этих трех действий:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<?php
// load css into the website’s front-end
function mytheme_enqueue_style() {
wp_enqueue_style( ‘mytheme-style’, get_stylesheet_uri() );
}
add_action( ‘wp_enqueue_scripts’, ‘mytheme_enqueue_style’ );
// load css into the admin pages
function mytheme_enqueue_options_style() {
wp_enqueue_style( ‘mytheme-options-style’, get_template_directory_uri() . ‘/css/admin.css’ );
}
add_action( ‘admin_enqueue_scripts’, ‘mytheme_enqueue_options_style’ );
// load css into the login page
function mytheme_enqueue_login_style() {
wp_enqueue_style( ‘mytheme-options-style’, get_template_directory_uri() . ‘/css/login.css’ );
}
add_action( ‘login_enqueue_scripts’, ‘mytheme_enqueue_login_style’ );
?>
|
В Make WordPress есть важное объявление: «Используйте wp_enqueue_scripts() , а не wp_print_styles() !» , Он сообщает вам о возможной ошибке несовместимости с WordPress v3.3.
Некоторые дополнительные функции
В WordPress есть несколько очень полезных функций о CSS: они позволяют нам печатать встроенные стили, проверять состояние очереди наших файлов стилей, добавлять метаданные для наших файлов стилей и отменять регистрацию стилей.
Давайте посмотрим.
Добавление динамических встроенных стилей: wp_add_inline_style()
Если в вашей теме есть параметры для настройки стиля темы, вы можете использовать встроенный стиль для их печати с помощью функции wp_add_inline_style() :
|
01
02
03
04
05
06
07
08
09
10
11
|
<?php
function mytheme_custom_styles() {
wp_enqueue_style( ‘custom-style’, get_template_directory_uri() . ‘/css/custom-style.css’ );
$bold_headlines = get_theme_mod( ‘headline-font-weight’ );
$custom_inline_style = ‘.headline { font-weight: ‘ .
wp_add_inline_style( ‘custom-style’, $custom_inline_style );
}
add_action( ‘wp_enqueue_scripts’, ‘mytheme_custom_styles’ );
?>
|
Быстро и просто. Помните, однако: вы должны использовать то же имя hasle с таблицей стилей, после которого вы хотите добавить встроенный стиль.
Проверка состояния постановки в очередь таблицы стилей: wp_style_is()
В некоторых случаях нам может понадобиться информация о состоянии стиля: зарегистрирован ли он, поставлен ли он в очередь, распечатывается или ожидает печати? Вы можете определить это с помощью функции wp_style_is() :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<?php
/*
* wp_style_is( $handle, $state );
* $handle — name of the stylesheet
* $state — state of the stylesheet: ‘registered’, ‘enqueued’, ‘done’ or ‘to_do’.
*/
// wp_style_is() example
function bootstrap_styles() {
if( wp_style_is( ‘bootstrap-main’ ) {
// enqueue the bootstrap theme if bootstrap is already enqueued
wp_enqueue_style( ‘my-custom-bootstrap-theme’, ‘http://url.of/the/custom-theme.css’ );
}
}
add_action( ‘wp_enqueue_scripts’, ‘bootstrap_styles’ );
?>
|
Добавление метаданных в wp_style_add_data() стилей: wp_style_add_data()
Вот удивительная функция wp_style_add_data() которая позволяет добавлять метаданные в ваш стиль, включая условные комментарии, поддержку RTL и многое другое!
Проверьте это:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<?php
/*
* wp_style_add_data( $handle, $key, $value );
* Possible values for $key and $value:
* ‘conditional’ string Comments for IE 6, lte IE 7 etc.
* ‘rtl’ bool|string To declare an RTL stylesheet.
* ‘suffix’ string Optional suffix, used in combination with RTL.
* ‘alt’ bool For rel=»alternate stylesheet».
* ‘title’ string For preferred/alternate stylesheets.
*/
// wp_style_add_data() example
function mytheme_extra_styles() {
wp_enqueue_style( ‘mytheme-ie’, get_template_directory_uri() . ‘/css/ie.css’ );
wp_style_add_data( ‘mytheme-ie’, ‘conditional’, ‘lt IE 9’ );
/*
* alternate usage:
* $GLOBALS[‘wp_styles’]->add_data( ‘mytheme-ie’, ‘conditional’, ‘lte IE 9’ );
* wp_style_add_data() is cleaner, though.
*/
}
add_action( ‘wp_enqueue_scripts’, ‘mytheme_ie_style’ );
?>
|
Круто, не правда ли?
[Если я не ошибаюсь, это первое учебное пособие, написанное об этой маленькой, но полезной функции.
Отмена регистрации файлов стилей с помощью wp_deregister_style()
Если вам когда-нибудь понадобится «отменить регистрацию» таблицы стилей (например, чтобы перерегистрировать ее в измененной версии), вы можете сделать это с помощью wp_deregister_style() .
Давайте посмотрим на пример:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
<?php
function mytheme_load_modified_bootstrap() {
// if bootstrap is registered before…
if( wp_script_is( ‘bootstrap-main’, ‘registered’ ) ) {
// …deregister it first…
wp_deregister_style( ‘bootstrap-main’ );
// …and re-register it with our own, modified bootstrap-main.css…
wp_register_style( ‘bootstrap-main’, get_template_directory_uri() . ‘/css/bootstrap-main-modified.css’ );
// …and enqueue it!
wp_enqueue_style( ‘bootstrap-main’ );
}
}
add_action( ‘wp_enqueue_scripts’, ‘mytheme_load_modified_bootstrap’ );
?>
|
Хотя это и не требуется, вам следует всегда перерегистрировать другой стиль, если вы отменили его регистрацию — вы можете что-то сломать, если этого не сделаете.
[Существует также похожая функция wp_dequeue_style() , которая удаляет таблицы стилей в wp_dequeue_style() , как следует из ее названия.
Заворачивая все
Поздравляем, теперь вы знаете все о том, как правильно включить CSS в WordPress! Надеюсь, вам понравился урок.
Есть ли у вас какие-либо советы или опыт, которыми вы хотите поделиться? Прокомментируйте ниже и поделитесь своими знаниями с нами! И если вам понравилась эта статья, не забудьте поделиться ею с друзьями!