0
98
2014-08-08

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

В статье предоставлен годный сниппет php кода, который позволит правильно загружать таблицу стилей только для Internet Explorer.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Большинство веб-разработчиков знакомы со стандартными условными комментариями IE, которые позволяют загружать таблицу стилей только в Internet Explorer. Например:

<!--[if lt IE 9]>
    <link href="style.css" rel="stylesheet" type="text/css">
<![endif]-->

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

Правильный способ загрузки условных таблиц стилей в WordPress - использование этой функции. Для многих разработчиков WordPress использование этой функции является стандартной процедурой. Однако не совсем очевидно, как обрабатывать условные комментарии IE с помощью этого метода. Итак, многие разработчики будут делать что-то вроде этого: wp_enqueue_style()

<?php
add_action( 'wp_print_styles', 'print_my_styles' );
function print_my_styles() {
    echo '<!--[if lt IE 9]><link href="style.css" rel="stylesheet" type="text/css"><![endif]-->';
}

При условии, что ваш обратный вызов больше ничего не делает, это может предоставить дочерним темам реальный способ удалить или переопределить загрузку вашей условной таблицы стилей.

Хотите верьте, хотите нет, в WordPress есть встроенный способ условно загружать специфичные для IE таблицы стилей с помощью функции, которую мы знаем и любим. Это просто требует немного дополнительного кода. Вот фрагмент кода, который показывает, как правильно загрузить специфичные для IE таблицы стилей в нескольких различных сценариях: wp_enqueue_style()

<?php
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:
     * <!--[if IE]> ... <![endif]-->
     */
    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:
     * <!--[if IE 7]> ... <![endif]-->
     */
    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:
     * <!--[if lt IE 9]> ... <![endif]-->
     * <!--[if lte IE 8]> ... <![endif]-->
     * 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:
     * <!--[if gt IE 8]> ... <![endif]-->
     * <!--[if gte IE 9]> ... <![endif]-->
     * 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