Большинство веб-разработчиков знакомы со стандартными условными комментариями IE, которые позволяют загружать таблицу стилей только в Internet Explorer. Например:
Многие начинающие разработчики / поклонники WordPress стремятся просто жестко закодировать эти условные комментарии непосредственно в файл header.php
своей темы. Этот подход может хорошо работать для одноразовых клиентских тем, но он не очень хорошо работает, если ваша тема используется в качестве родительской темы, что обычно имеет место в публично опубликованных темах.
Правильный способ загрузки условных таблиц стилей в WordPress – использование этой функции. Для многих разработчиков WordPress использование этой функции является стандартной процедурой. Однако не совсем очевидно, как обрабатывать условные комментарии IE с помощью этого метода. Итак, многие разработчики будут делать что-то вроде этого: wp_enqueue_style()
add_action( 'wp_print_styles', 'print_my_styles' );
function print_my_styles() {
echo '';
}
При условии, что ваш обратный вызов больше ничего не делает, это может предоставить дочерним темам реальный способ удалить или переопределить загрузку вашей условной таблицы стилей.
Хотите верьте, хотите нет, в WordPress есть встроенный способ условно загружать специфичные для IE таблицы стилей с помощью функции, которую мы знаем и любим. Это просто требует немного дополнительного кода. Вот фрагмент кода, который показывает, как правильно загрузить специфичные для IE таблицы стилей в нескольких различных сценариях: wp_enqueue_style()
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );
/**
* Пример функции обратного вызова, которая демонстрирует, как правильно ставить условные таблицы стилей в WordPress для IE.
* IE10 и выше не поддерживает условные комментарии в стандартном режиме.
*
* @uses wp_style_add_data() WordPress function to add the conditional data.
* @link https://developer.wordpress.org/reference/functions/wp_style_add_data/
* @link https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
*/
function enqueue_my_styles() {
// Load the main stylesheet
wp_enqueue_style( 'my-theme', get_stylesheet_uri() );
/**
* Load our IE-only stylesheet for all versions of IE:
*
*/
wp_enqueue_style( 'my-theme-ie', get_stylesheet_directory_uri() . "/css/ie.css", array( 'my-theme' ) );
wp_style_add_data( 'my-theme-ie', 'conditional', 'IE' );
/**
* Load our IE version-specific stylesheet:
*
*/
wp_enqueue_style( 'my-theme-ie7', get_stylesheet_directory_uri() . "/css/ie7.css", array( 'my-theme' ) );
wp_style_add_data( 'my-theme-ie7', 'conditional', 'IE 7' );
/**
* Load our IE specific stylesheet for a range of older versions:
*
*
* NOTE: You can use the 'less than' or the 'less than or equal to' syntax here interchangeably.
*/
wp_enqueue_style( 'my-theme-old-ie', get_stylesheet_directory_uri() . "/css/old-ie.css", array( 'my-theme' ) );
wp_style_add_data( 'my-theme-old-ie', 'conditional', 'lt IE 9' );
/**
* Load our IE specific stylesheet for a range of newer versions:
*
*
* NOTE: You can use the 'greater than' or the 'greater than or equal to' syntax here interchangeably.
*/
wp_enqueue_style( 'my-theme-new-ie', get_stylesheet_directory_uri() . "/css/new-ie.css", array( 'my-theme' ) );
wp_style_add_data( 'my-theme-ie', 'conditional', 'gt IE 8' );
}
Обратите внимание, что приведенный выше код использует функцию, которая получит корневой URL вашей темы. В случае использования дочерней темы эта функция возвращает корневой URL-адрес дочерней темы, а не родительской темы. Если вы хотите всегда ссылаться на URL родительской темы, используйте вместо этого. get_stylesheet_directory_uri()
get_template_directory_uri()
К сожалению, подобное решение для условной загрузки скриптов в WordPress в настоящее время недоступно.
Статья была переведена для блога TechBlog.SDStudio.top
Источник: wpscholar.com