Функция wp_register_style(): WP 2.6.0. Регистрация CSS-стилей в WordPress.

Функция WP_REGISTER_STYLE() │ WP 2.6.0

Эта функция используется для регистрации CSS-стилей.

Возвращаемое значение

Функция возвращает true или false. Значение true указывает на успешную регистрацию стиля, а false — на неудачу.

Использование

wp_register_style( $handle, $src, $deps, $ver, $media );

Параметры

  • $handle (строка, обязательный): Имя стиля. Должно быть уникальным.

  • $src (строка|false, обязательный): Полный URL стиля или путь к нему относительно корневой директории WordPress. Если значение равно false, то это служит псевдонимом для других стилей, от которых зависит данный стиль.

  • $deps (массив строк): Массив зарегистрированных стилей, от которых зависит текущий стиль. По умолчанию этот массив пустой.

  • $ver (строка|true|false|null): Версия стиля, если она есть. Эта версия добавляется к URL в качестве параметра для кэширования. Если указать false, автоматически будет добавлено значение, равное текущей версии WordPress. Если указать null, версия не будет добавлена. По умолчанию — false.

  • $media (строка): Типы медиа, для которых этот стиль определён. Принимает такие значения, как 'all', 'print' и 'screen', а также медиазапросы вроде '(orientation: portrait)' и '(max-width: 640px)'. По умолчанию — 'all'.

Примеры использования

Пример 1: Регистрация стилей при написании плагина

Для регистрации стиля в плагине можно использовать следующий код:

// регистрируем стили
add_action( 'wp', 'register_plugin_styles' ); // только для фронтенда
//add_action( 'init', 'register_plugin_styles' ); // для фронтенда и админки
add_action( 'wp_enqueue_scripts', 'enqueue_plugin_styles' );

// функция для регистрации файла стилей и добавления его в очередь
function register_plugin_styles() {
    wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) );
}

// добавляем файл стилей в очередь
function enqueue_plugin_styles() {
    wp_enqueue_style( 'my-plugin' );
}

Или можно сделать проще:

add_action( 'wp_enqueue_scripts', 'enqueue_plugin_styles' );

// добавляем файл стилей в очередь
function enqueue_plugin_styles() {
    wp_enqueue_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) );
}

Пример 2: Регистрация стилей внутри класса плагина

Если вы пишете плагин внутри класса, код будет выглядеть так:

class my_plugin {
    function __construct() {
        // регистрируем стили
        add_action( 'wp_enqueue_scripts', [ $this, 'use_plugin_styles' ] );

        add_action( 'wp', [ $this, 'register_plugin_styles' ] ); // только для фронтенда
        // add_action( 'init', [ $this, 'register_plugin_styles' ] ); // для фронтенда и админки
    }

    // регистрируем файл стилей и добавляем его в очередь
    public function register_plugin_styles() {
        wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) );
    }

    public function use_plugin_styles(){
        wp_enqueue_style( 'my-plugin' );
    }
}

Пример 3: Использование Google Fonts

Обратите внимание, что адреса Google Fonts изменились, и при внедрении нескольких семейств шрифтов будет загружено только одно. Чтобы исправить это, установите параметр $ver в значение null, ��тобы защищать URL от неправильной обработки.

wp_register_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Roboto', array(), null );

Примечания

  • Для получения дополнительной информации см. класс WP_Dependencies::add.

Изменения

  • С версии 2.6.0 функция была введена.
  • С версии 4.3.0 был добавлен возврат значений.

Эта статья ознакомит вас с функцией wp_register_style() и покажет, как правильно регистрировать CSS-стили в WordPress. Теперь вы сможете легко добавлять стили к вашим плагинам.

Leave a Reply

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