Вопрос или проблема
Читать ниже, если вы хотите начать с того места, на котором я остановился в ядре. Но основной вопрос таков: мне нужно добавить атрибут “title” в мои таблицы стилей, и wp_enqueue_style() не позволяет использовать этот параметр, насколько я понимаю. Кроме жесткой вставки, есть ли способы, которые WordPress позволяет использовать для добавления заголовка к таблице стилей?
При исследовании ядра я заметил, что есть переменная $title, которую можно установить с помощью $style->extra['title'].
$title = isset($this->registered[$handle]->extra['title']) ? "title="" . esc_attr( $this->registered[$handle]->extra["title'] ) . "'" : '';
(class.wp-styles.php)
И $title также фигурирует в фильтре, который применяется при добавлении таблицы стилей. Как вы можете установить этот ‘extra’ массив внутри объекта стиля?
Хорошо, вот где я нахожусь с решением.
wp_enqueue_style( 'my-handle', 'mystyle.css' );
global $wp_styles;
$wp_styles->add_data( 'my-handle', 'title', 'my_stylesheet_title' );
Не люблю использовать глобальные переменные. Есть что-то лучше?
Мне кажется, вы также можете использовать style_loader_tag, посмотрите мой другой ответ для более подробного объяснения как style_loader_tag, так и script_loader_tag API:
Как добавить crossorigin и integrity в wp_register_style? (Font Awesome 5)
style_loader_tag — это официальный API WordPress, смотрите документацию: https://developer.wordpress.org/reference/hooks/style_loader_tag/
apply_filters( 'style_loader_tag', $html, $handle, $href, $media )
Фильтрует HTML-тег ссылки для добавленной
таблицы стилей.
Сначала добавьте ваши таблицы стилей
function add_styles() {
// Пример загрузки внешней таблицы стилей, может использоваться как в теме, так и в плагине
wp_enqueue_style( 'font-awesome-5', 'https://use.fontawesome.com/releases/v5.5.0/css/all.css', array(), null );
// Пример темы
wp_enqueue_style( 'font-awesome-5', get_theme_file_uri( '/assets/css/fontawesome.min.css' ), array(), null );
// Пример плагина
wp_enqueue_style( 'font-awesome-5', plugins_url( '/assets/css/fontawesome.min.css', __FILE__ ), array(), null );
};
add_action( 'wp_enqueue_scripts', 'add_styles' );
Во-вторых, используйте style_loader_tag
Затем используйте style_loader_tag, чтобы добавить ваш заголовок в конкретную таблицу стилей.
function add_stylesheet_attributes( $html, $handle ) {
if ( 'font-awesome-5' === $handle ) {
return str_replace( "rel="stylesheet"", "rel="stylesheet" title="something"", $html );
}
return $html;
}
add_filter( 'style_loader_tag', 'add_stylesheet_attributes', 10, 2 );
Смотря на файл, который вы упомянули в своем посте class.wp-styles.php, у вас есть следующая строка: $tag .= apply_filters( 'style_loader_tag', "<link rel="$rel" id='$handle-css' $title href="https://wordpress.stackexchange.com/questions/34754/$href" type="text/css" media="$media" />\n", $handle );. Таким образом, вы можете подключиться к фильтру “style_loader_tag” и добавить тег заголовка. Мне тоже нравится ваш ответ, но я не уверен, какой из них будет лучше, так как я не знаю, есть ли проблемы с использованием глобальной переменной или нет.
Я использовал способ с style_loader_tag. Таким образом, я неправильно использовал хэндл для передачи моего дополнительного тега заголовка. Это выглядит следующим образом:
// Добавление стиля
wp_enqueue_style( 'twentytwelve-style-Xstyle1', get_stylesheet_uri() );
// моя фильтр-функция
add_filter('style_loader_tag', 'my_style_loader_tag_function');
function my_style_loader_tag_function($tag){
$customXML = new SimpleXMLElement($tag);
$id = (string)$customXML->attributes()->id;
$values = explode('-X',$id);
if(!isset($values[1])){
return $tag;
}
$customXML->attributes()->id = $values[0].'-css';
$title = str_replace('-css', '', $values[1]);
$customXML->addAttribute('title', $title);
$dom = dom_import_simplexml($customXML);
return $dom->ownerDocument->saveXML($dom->ownerDocument->documentElement);
}
Таким образом, я ищу -X, и все, что следует за этой строкой, — это мой атрибут заголовка.
вы можете использовать wp_style_add_data('handler', attr, 'val')
Ответ или решение
Чтобы добавить атрибут title к таблицам стилей в WordPress с использованием функции wp_enqueue_style(), существует несколько подходов. Как вы заметили, данный параметр не поддерживается напрямую в функции wp_enqueue_style(). Однако благодаря различным хукам и методам, доступным в WordPress, можно добиться желаемого результата.
Подход 1: Использование глобальной переменной
Наиболее прямолинейный способ — это использование глобальной переменной $wp_styles для добавления данных стиля. Вот как это можно сделать:
function enqueue_my_styles() {
wp_enqueue_style('my-style-handle', 'path/to/mystyle.css');
// Получаем доступ к глобальной переменной
global $wp_styles;
$wp_styles->add_data('my-style-handle', 'title', 'My Stylesheet Title');
}
add_action('wp_enqueue_scripts', 'enqueue_my_styles');Хотя этот метод работает, и он достаточно простой, многие разработчики предпочитают избегать использования глобальных переменных из соображений чистоты кода.
Подход 2: Использование фильтра style_loader_tag
Более элегантный способ — использование фильтра style_loader_tag, что делает ваш код более гибким и чистым. Фильтр позволяет модифицировать HTML-тег для загруженных стилей.
Вот пример, как это можно реализовать:
function enqueue_my_styles() {
wp_enqueue_style('my-style-handle', 'path/to/mystyle.css');
}
add_action('wp_enqueue_scripts', 'enqueue_my_styles');
function add_title_to_stylesheet($html, $handle) {
if ('my-style-handle' === $handle) {
// Добавляем атрибут title к тегу link
return str_replace('rel=\'stylesheet\'', 'rel=\'stylesheet\' title=\'My Stylesheet Title\'', $html);
}
return $html;
}
add_filter('style_loader_tag', 'add_title_to_stylesheet', 10, 2);В этом коде, после того как мы зарегистрировали наш стиль, мы используем фильтр style_loader_tag для модификации HTML-кода, добавляя атрибут title.
Подход 3: Использование wp_style_add_data()
Еще один способ заключается в использовании функции wp_style_add_data(), которая позволяет добавлять дополнительные данные к стилям до их рендеринга. Этот метод предпочтителен так как он не использует глобальные переменные и поддерживает хорошую читаемость кода:
function enqueue_my_styles() {
wp_enqueue_style('my-style-handle', 'path/to/mystyle.css');
// Используем функцию wp_style_add_data
wp_style_add_data('my-style-handle', 'title', 'My Stylesheet Title');
}
add_action('wp_enqueue_scripts', 'enqueue_my_styles');Этот метод позволяет вам добавлять любые дополнительные атрибуты, обеспечивая чистоту и ясность вашей реализации.
Заключение
Из всех представленных способов, использование style_loader_tag и wp_style_add_data() являются наиболее рекомендованными из-за их ясности и безопасности. Оба метода не требуют использования глобальных переменных и обеспечивают более чистую архитектуру кода.
Независимо от того, что вы выберете, важно следить за тем, чтобы код оставался чистым и поддерживаемым в будущем. Это особенно актуально, если ваш проект имеет потенциал для роста и расширения.