WordPress - ставить скрипты в очередь только если LT IE 9

В теме WordPress, как вы условно включаете скрипты для ie8 и ниже? Это прежде всего для применения полифиллов для различных функций html5/css3. Я вижу, что в wp есть переменная $is_IE, которую можно использовать как условную для включения только сценариев для IE. Есть ли способ добавить сценарий только для определенных версий IE, а не для всех? Это просто с некоторым HTML, то есть с условными комментариями, но я бы хотел включить сценарии в одном месте в моем файле функций.

Условно для конкретных версий в HTML:

<!--[if lt IE 9]> <script src="iepolyfill.min.js"></script> <![endif]-->

Условно для всех IE в WP:

    global $is_IE;

    if ( $is_IE ) {
        wp_enqueue_script( 'iepolyfill', bloginfo('stylesheet_directory').'/js/iepolyfill.min.js' );
    }

Я осмотрелся и, в основном, нашел подробности об условных скриптах только для бэкэнда wp

Какие-либо предложения?

Источник

8 ответов

Решение

Так как WordPress является PHP-скриптом, он может обращаться к серверной переменной через $_SERVER.

Затем вы можете искать браузер с помощью PHP, PHP: если Internet Explorer 6, 7, 8 или 9

Источник

Для WordPress 4.2+

использование wp_script_add_data обернуть скрипт в условный комментарий:

wp_enqueue_script( 'html5shiv', '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js' );
wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );

wp_enqueue_script( 'respond', get_template_directory_uri() . '/js/respond.min.js' );
wp_script_add_data( 'respond', 'conditional', 'lt IE 9' );

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

Для WordPress 4.1

Вы можете использовать script_loader_tag фильтр сегодня, чтобы поставить в очередь сценарии, завернутые в условные комментарии. Вот пример реализации:

wp_enqueue_script( 'html5shiv', '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js', array(), '3.7.2', false );
add_filter( 'script_loader_tag', function( $tag, $handle ) {
    if ( $handle === 'html5shiv' ) {
        $tag = "<!--[if lt IE 9]>$tag<![endif]-->";
    }
    return $tag;
}, 10, 2 );

И если вы хотите включить более одного сценария одним и тем же способом, вы можете использовать что-то вроде:

// Conditional polyfills
$conditional_scripts = array(
    'html5shiv'           => '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js',
    'html5shiv-printshiv' => '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv-printshiv.js',
    'respond'             => '//cdn.jsdelivr.net/respond/1.4.2/respond.min.js'
);
foreach ( $conditional_scripts as $handle => $src ) {
    wp_enqueue_script( $handle, $src, array(), '', false );
}
add_filter( 'script_loader_tag', function( $tag, $handle ) use ( $conditional_scripts ) {
    if ( array_key_exists( $handle, $conditional_scripts ) ) {
        $tag = "<!--[if lt IE 9]>$tag<![endif]-->";
    }
    return $tag;
}, 10, 2 );
Источник
  • Вы должны использовать wp_register_script() всякий раз, когда вы добавляете скрипты в ваши темы WP или плагины.
  • Обнюхивание на стороне сервера - это вообще плохая идея, потому что это неуверенно.
  • Обычно вы хотите ориентироваться на браузеры, в которых отсутствуют некоторые функции, а не только на браузер IE. Modernzr - хорошие сценарии, чтобы сделать это.

Для IE условные теги работают очень хорошо. Вот как вы можете добавить условные теги в скрипт, пример для HTML5shiv:

global $wp_scripts;
wp_register_script( 
    'html5shiv', 
    get_bloginfo('template_url').'/assets/js/html5shiv.js', 
    array(), 
    '3.6.2'
    );
$wp_scripts->add_data( 'html5shiv', 'conditional', 'lt IE 9' );
Источник

Решение для WordPress 4.2 и выше

Правильный способ - применить wp_enqueue_script, так как здесь есть сценарии JavaScripts, а не стили CSS. Кроме того, лучше использовать get_bloginfo('stylesheet_url'), чтобы убедиться, что это также работает в дочерних темах.

/**
 * IE Fallbacks
 */

function load_IE_fallback() {
    wp_register_script( 'ie_html5shiv', get_bloginfo('stylesheet_url'). '/js/html5shiv.min.js', __FILE__, false, '3.7.2' );
    wp_enqueue_script( 'ie_html5shiv');
    wp_script_add_data( 'ie_html5shiv', 'conditional', 'lt IE 9' );

    wp_register_script( 'ie_respond', get_bloginfo('stylesheet_url'). '/js/respond.min.js', __FILE__, false, '1.4.2' );
    wp_enqueue_script( 'ie_respond');
    wp_script_add_data( 'ie_respond', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'load_IE_fallback' );
Источник

Обновление для WordPress 4.7.3 с загрузкой скриптов из CDN:

    add_action( 'wp_enqueue_scripts', 'load_IE_fallback' );
function load_IE_fallback() {
    wp_register_script( 'ie_html5shiv', 'https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js', '', '3.7.3', false );
    wp_register_script( 'ie_respond', 'https://oss.maxcdn.com/respond/1.4.2/respond.min.js', '', '1.4.2', false );

    wp_enqueue_script( 'ie_html5shiv');
    wp_enqueue_script( 'ie_respond');

    wp_script_add_data( 'ie_html5shiv', 'conditional', 'lt IE 9' );    
    wp_script_add_data( 'ie_respond', 'conditional', 'lt IE 9' );
}
Источник

Лучший способ сделать это - поставить в очередь сценарии, а затем использовать wp_style_add_data(), чтобы поставить условные выражения. Этот метод используется официальными темами, такими как двадцать тринадцать

Есть ответ, подобный этому, но он добавляет дополнительно, если в состоянии, которое является неправильным.

wp_register_style( 'ie_html5shiv', get_template_directory_uri() . '/js/html5shiv.js' );
    wp_enqueue_style( 'ie_html5shiv');
    wp_style_add_data( 'ie_html5shiv', 'conditional', 'lt IE 9' );

    wp_register_style( 'ie_respond', get_template_directory_uri() . '/js/respond.min.js' );
    wp_enqueue_style( 'ie_respond');
    wp_style_add_data( 'ie_respond', 'conditional', 'lt IE 9' );
Источник

Попробуйте использовать wp_style_add_data() функция (официально используется в двадцать тринадцатой и четырнадцатой темах:

wp_enqueue_style( 'iepolyfill', bloginfo( 'stylesheet_directory' ) . '/js/iepolyfill.min.js' );
wp_style_add_data( 'iepolyfill', 'conditional', 'if lt IE 9' );

Обновление: поскольку WordPress >= 4.2.0, есть функция, которая используется таким же образом. Это называется:

wp_script_add_data()
Источник

Это странный кошмар. Я просто хочу немного поспать сегодня вечером, хорошо?

Это не работает

$wp_styles->add_data("foo", "conditional", "lt IE 9");

Учитывая все остальное, что здесь предлагается, это всего лишь взлом, в итоге я жестко запрограммировал их в своем шаблоне.

header.php

<head>
  <!-- ... -->

  <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/2.3.0/es5-shim.js"></script>
  <![endif]-->

  <?php wp_head(); ?>
</head>

Единственный недостаток - если вы не хотите, чтобы они были на каждой странице. Давайте будем честными, хотя вы будете хотеть их на большинстве страниц, поэтому правило 80/20 диктует, что это достаточно хорошо для меня.

Источник
Другие вопросы по тегам