wp_enqueue_style()
Правильно додає файл CSS стилів. Реєструє файл стилів, якщо він не був зареєстрований.
Якщо файл стилів був попередньо зареєстрований через wp_register_style() , його можна додати в чергу, вказавши назву (ідентифікатор) у першому параметрі $handle .
Якщо файл не був попередньо зареєстрований, ця функція зареєструє файл і додасть його до черги.
Доданий у чергу файл стилів виводиться у частині <head> документа.
З версії 3.3 можна викликати у середині документа. У цьому випадку файл буде виведений у підвалі перед тегом </body> (де викликається wp_footer() ).
Цю функцію як і wp_enqueue_script() прийнято викликати під час подій:
- wp_enqueue_scripts – для зовнішньої частини сайту.
- admin_enqueue_scripts – для адмін-панелі.
- login_enqueue_scripts – для сторінки входу (wp-login.php).
- Щоб додати умови підключення стилів, використовуйте wp_style_add_data() .
- Використовуйте wp_add_inline_style() , щоб вставити в документ самі стилі CSS, а не файл стилів.
Помилка розробників-початківців. Функція нічого не виведе, якщо тема не використовує wp_footer() . Саме на момент виклику цих функцій спрацьовує хук, який додає стилі.
wp_enqueue_code_editor()
Хуків немає.
Повертає
null. Нічого не вертає.
Використання
wp_enqueue_style($handle, $src, $deps, $ver, $media);
-
$handle
(рядок) (обов’язковий) -
Назва файлу стилів (ідентифікатор). Рядок у нижньому регістрі. Якщо рядок містить знак питання (?):
styleaculous?v=1.2 , то попередня частина буде назвою стилю, а все, що після буде додано в УРЛ як параметри запиту. Так можна вказувати версію стилю, що підключається. -
$src
(рядок) -
УРЛ до файлу стилів. Наприклад,
http://example.com/css/style.css . Не потрібно вказувати шлях жорстко, використовуйте функції:
plugins_url() (для плагінів) та
get_template_directory_uri() (для тем). Зовнішні домени можна вказувати з неявним протоколом
//example.com/css/style.css .
За замовчуванням: ” -
$deps
(масив) -
Масив ідентифікаторів інших стилів, від яких залежить файл стилів, що підключається. Вказані тут стилі будуть підключені до поточного.
За замовчуванням: array() -
$ver
(рядок/логічний) -
Рядок визначає версію стилів. Версія буде додана до кінця посилання на файл:
?ver=3.5.1. Якщо не вказати (встановлено false), буде використано версію WordPress. Якщо встановити null, то жодної версії не буде встановлено.
Типово: false -
$media
(рядок/логічний) -
Встановлюється значення атрибута media. media вказує тип пристрою, для якого буде працювати поточний стиль. Можливо:
all,
screen,
handheld,
printабо
all (max-width:480px). Повний список дивіться
тут .
За замовчуванням: ‘all’
Приклади
#1 Підключення через подію
У цьому прикладі ми зареєструємо та підключимо стилі та скрипти, використовуючи подію ‘ wp_enqueue_scripts ‘.
// правильний спосіб підключити стилі та скрипти
add_action( 'wp_enqueue_scripts', 'theme_name_scripts');
// add_action('wp_print_styles', 'theme_name_scripts'); // можна використовувати цей хук він пізніший
function theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}Вставляємо цей код у wp_head() , яка викликається в header.php
#2 Завантаження стилів на сторінці налаштувань плагіна
add_action( 'admin_menu', 'my_plugin_admin_menu');
function my_plugin_admin_menu() {
// реєструємо сторінку плагіна
$page = add_submenu_page(
'edit.php',
__( 'My Plugin', 'myPlugin' ),
__( 'My Plugin', 'myPlugin' ),
'administrator',
__FILE__,
'my_plugin_manage_menu'
);
// використовуючи ідентифікатор сторінки плагіна, підключаємося до потрібної події
add_action('load-'. $page, 'my_plugin_admin_styles');
}
// Ця функція буде викликана тільки на сторінці налаштувань плагіна,
function my_plugin_admin_styles() {
wp_enqueue_style( 'myPluginStylesheet', plugins_url('stylesheet.css', __FILE__) );
}
// Сторінка налаштувань
function my_plugin_manage_menu() {
// код сторінки налаштувань
}
нотатки
Використовує глобальну змінну $wp_styles , яка містить екземпляр класу WP_Styles. Використовує методи WP_Styles::add(), WP_Styles::enqueue() .
нотатки
- Дивіться: WP_Dependencies::add()
- Дивіться: WP_Dependencies::enqueue()
список змін
| З версії 2.6.0 | Введено. |
Код wp_enqueue_style() wp enqueue style WP 6.0.2
function wp_enqueue_style( $handle, $src = '', $deps = array(), $ver = false, $media = 'all' ) {
_wp_scripts_maybe_doing_it_wrong( __FUNCTION__, $handle );
$wp_styles = wp_styles();
if ($ src) {
$_handle = explode('?', $handle);
$wp_styles->add( $_handle[0], $src, $deps, $ver, $media);
}
$wp_styles->enqueue($handle);
}