Статьи

Загрузка CSS в WordPress в правильном направлении

Без CSS у вас есть очень ограниченный выбор стилей ваших веб-страниц. А без надлежащего включения CSS в WordPress вы можете очень сложно настроить стиль вашей темы для пользователей вашей темы.

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

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

За прошедшие годы 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 имеет довольно простое решение таких проблем: регистрация и постановка в очередь таблиц стилей.

Как мы уже говорили ранее, WordPress значительно вырос за эти годы, и мы должны думать о каждом отдельном пользователе WordPress в мире.

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

Давайте посмотрим.

Если вы собираетесь загружать таблицы стилей 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. Если вы не думаете, что ваш стиль будет использоваться каким-либо плагином или вы не собираетесь использовать какой-либо код для его повторной загрузки, вы можете поставить в очередь стиль без его регистрации. Посмотрите, как это делается ниже.

После регистрации нашего файла стилей нам нужно «поставить» его в очередь, чтобы он был готов к загрузке в разделе <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() :

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() :

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() которая позволяет добавлять метаданные в ваш стиль, включая условные комментарии, поддержку 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() .

Давайте посмотрим на пример:

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! Надеюсь, вам понравился урок.

Есть ли у вас какие-либо советы или опыт, которыми вы хотите поделиться? Прокомментируйте ниже и поделитесь своими знаниями с нами! И если вам понравилась эта статья, не забудьте поделиться ею с друзьями!