Функция wp_register_style() в WordPress с примерами

Функция wp_register_style() используется для регистрации CSS стилей в WordPress. После регистрации с помощью этой функции стили можно добавить на страницу с помощью функции wp_enqueue_style(). Это стандартный способ подключения CSS файлов, который позволяет WordPress эффективно управлять стилями и оптимизировать их подключение.

wp_register_style( string $handle, string|false $src, array $deps = array(), string|bool|null $ver = false, string $media = 'all' ): bool

Параметры

• $handle (string, обязательный): Уникальное имя для стиля. Используется как идентификатор.
• $src (string|false, обязательный): Полный URL стиля или относительный путь от корневой директории WordPress. Если передано false, стиль выступает как зависимость других стилей.
• $deps (array, необязательный): Массив идентификаторов стилей, от которых зависит данный стиль. Эти стили будут подключены перед текущим. По умолчанию — пустой массив.
• $ver (string|bool|null, необязательный): Версия стиля. Если не указано, будет использоваться версия WordPress. Устанавливает версию в конец URL в виде ?ver=1.0.0. Если указать null, версия не будет добавлена. По умолчанию — false.
• $media (string, необязательный): Тип медиа, для которого предназначен стиль. Может быть: 'all', 'print', 'screen', или медиа-запросы, например, '(max-width: 640px)'. По умолчанию — 'all'.

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

Функция возвращает true в случае успешной регистрации и false в случае ошибки.

Описание

wp_register_style() — это функция, которая регистрирует стиль для последующего подключения с помощью wp_enqueue_style(). Это позволяет централизованно управлять подключением CSS стилей и устраняет дублирующее подключение одних и тех же файлов.

Пример 1: Регистрация стиля в плагине (вне класса)

Этот код добавляется в файл плагина для регистрации и подключения стилей. Допустим, у нас есть плагин с файлом стилей plugin.css, который находится в папке my-plugin/css/.

/**
 * Регистрируем и подключаем файл стилей для плагина.
 */
function wpdocs_register_plugin_styles() {
    wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) );
    wp_enqueue_style( 'my-plugin' );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_register_plugin_styles' );

Этот код сначала регистрирует стиль с помощью wp_register_style(), а затем подключает его через wp_enqueue_style().

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

Пример регистрации стиля внутри класса плагина. Это удобно для структурированных плагинов, которые используют объектно-ориентированный подход.

class Genius_My_Plugin_Stylesheet {

    /**
     * Конструктор класса.
     */
    public function __construct() {
        add_action( 'wp_enqueue_scripts', array( $this, 'register_plugin_styles' ) );
    }

    /**
     * Регистрируем и подключаем файл стилей для плагина.
     */
    public function register_plugin_styles() {
        wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) );
        wp_enqueue_style( 'my-plugin' );
    }
}
new Genius_My_Plugin_Stylesheet();

Регистрация стиля с зависимостями

Если ваш стиль зависит от других стилей, вы можете передать массив зависимостей в параметр $deps. Например, если ваш стиль зависит от стиля bootstrap.css, сначала нужно зарегистрировать и подключить его.

function wpdocs_register_styles_with_deps() {
    wp_register_style( 'bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css' );
    wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ), array( 'bootstrap' ) );
    wp_enqueue_style( 'my-plugin' );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_register_styles_with_deps' );

Указание версии стилей

Чтобы добавить версию стилей, которая будет добавлена в URL файла как параметр для кэширования, можно указать значение $ver. Это позволяет управлять кэшированием файлов при их изменении.

wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ), array(), '1.0.0' );

Это добавит к URL стиля версию ?ver=1.0.0.

Медиа типы

Стили могут быть зарегистрированы для разных типов устройств с помощью параметра $media. Это может быть полезно для подключения стилей только для печати или мобильных устройств.

wp_register_style( 'print-styles', plugins_url( 'my-plugin/css/print.css' ), array(), false, 'print' );

Этот стиль будет подключен только при печати.

Заключение

Использование функции wp_register_style() — это лучший способ зарегистрировать и управлять подключением CSS стилей в WordPress. Регистрация стилей через WordPress API позволяет централизованно управлять зависимостями, кэшированием и совместимостью стилей, а также упрощает их оптимизацию на этапе разработки и производительности.