web-dev-qa-db-ja.com

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：

    global $is_IE;

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

私は周りを見回して、主にwpバックエンドのみの条件付きスクリプトに関する詳細を見つけました。

助言がありますか？

phpjavascriptwordpressinternet-explorerpolyfills
28
circlecube

wordpressはPHPスクリプトなので、$ _ SERVERを介してサーバー変数にアクセスできます。

次に、PHPで検出ブラウザーを検索できます PHP：Internet Explorer 6、7、8、または9の場合

1
Trinh Hoang Nhu

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 filter を使用して、条件付きコメントで囲まれたスクリプトをエンキューできます。次に実装例を示します。

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 );
71
Andrew Patton
  • WPテーマまたはプラグインにスクリプトを追加する場合は常にwp_register_script()を使用する必要があります。
  • サーバーサイドのスニッフィングは一般に悪い考えです。
  • 通常は、必ずしもIE browser。 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' );
24
Mikael Korpela

WordPress 4.2以降の解決策

ここではJavaScriptでws_enqueue_scriptを適用するのが正しい方法ですが、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' );
8
Daniel Klose

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' );
}
7
Masimba Rodgers

これを行う最良の方法は、スクリプトをエンキューし、次にwp_style_add_data（）を使用して条件付きにすることです。このメソッドは twenty thirteen などの公式テーマで使用されています

これに似た答えがありますが、間違った状態の場合は余分に追加します。

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' );
2
Ahmad Awais

これはおかしな悪夢です。今夜は少し眠りたいだけですよね？

これは機能しません

$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>

これの唯一の欠点は、すべてのページに表示したくない場合です。正直に言って、mostページでそれらを必要とするので、80/20ルールで十分です。 。

1
user633183

wp_style_add_data()関数を使用してみてください（正式には twentythirteen および twentyfourteen テーマで使用されます：

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

Update：WordPress> = 4.2.0なので、同じように使用される関数があります。 ：

wp_script_add_data()
1
Flow