Функция wp_enqueue_style() используется для безопасного подключения CSS-стилей на страницы WordPress. Она регистрирует файл стилей и добавляет его в очередь на загрузку, а затем стили выводятся в разделе <head> HTML-документа. Это стандартный способ подключения стилей в WordPress, который обеспечивает правильное управление зависимостями и версионированием файлов.
wp_enqueue_style(
string $handle,
string $src = '',
array $deps = array(),
string|bool|null $ver = false,
string $media = 'all'
);
Параметры:
- $handle (обязательный) — Уникальное имя файла стилей.
- $src (необязательный) — Путь к файлу стилей, полный URL или путь относительно корня WordPress. Если не указан, функция только регистрирует файл, не добавляя его в очередь на загрузку.
- $deps (необязательный) — Массив идентификаторов стилей, от которых зависит текущий файл. Указанные здесь стили будут загружены перед текущим.
- $ver (необязательный) — Версия файла стилей. Используется для контроля кэширования. Если указать
false, автоматически будет добавлена версия WordPress. - $media (необязательный) — Тип устройства, для которого стили предназначены. Принимает значения такие как
all,screen,printили медиазапросы, например,(max-width: 600px).
Пример 1: Подключение стилей темы
Функция wp_enqueue_style() часто используется для подключения основного файла стилей темы:
function theme_enqueue_styles() {
wp_enqueue_style( 'main-styles', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
В этом примере стили темы подключаются с помощью стандартной функции get_stylesheet_uri(), которая возвращает путь к файлу style.css темы.
Пример 2: Подключение файла с зависимостями
Вы можете указать зависимости от других стилей, чтобы они загружались до основного файла стилей:
function enqueue_custom_styles() {
wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom.css', array( 'main-styles' ), '1.0', 'screen' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_styles' );
В этом примере файл custom.css будет загружен после файла стилей с именем main-styles.
Пример 3: Подключение стилей только для администратора
Для подключения стилей на страницах админ-панели используется хук admin_enqueue_scripts:
function admin_custom_styles() {
wp_enqueue_style( 'admin-styles', get_template_directory_uri() . '/css/admin.css', array(), '1.0', 'all' );
}
add_action( 'admin_enqueue_scripts', 'admin_custom_styles' );
Этот код подключит файл стилей admin.css только в панели администратора.
Пример 4: Загрузка стилей только на определённых страницах
Можно настроить подключение стилей только для определённых страниц, например, для страниц с определённым шаблоном:
function enqueue_template_styles() {
if ( is_page_template( 'custom-template.php' ) ) {
wp_enqueue_style( 'custom-template-styles', get_template_directory_uri() . '/css/template.css' );
}
}
add_action( 'wp_enqueue_scripts', 'enqueue_template_styles' );
В этом примере стили загружаются только на страницах, использующих шаблон custom-template.php.
Пример 5: Версионирование стилей для кэширования
Чтобы избегать проблем с кэшированием при обновлении файлов стилей, можно использовать версионирование на основе времени последней модификации файла:
function versioned_styles() {
$version = filemtime( get_template_directory() . '/css/style.css' );
wp_enqueue_style( 'versioned-styles', get_template_directory_uri() . '/css/style.css', array(), $version, 'all' );
}
add_action( 'wp_enqueue_scripts', 'versioned_styles' );
Этот код автоматически добавит время последней модификации файла в качестве версии, что позволит избежать проблем с кэшированием.
Заключение
Функция wp_enqueue_style() — это стандартный и безопасный способ подключения стилей в WordPress. Она позволяет управлять зависимостями, кэшированием и настраивать подключение стилей для различных условий, будь то определённые страницы или устройства.