TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

IE и условные стили в WordPress

584

Большинство веб-разработчиков знакомы со стандартными условными комментариями 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

Источник записи:

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее