web-dev-qa-db-ja.com

条件付き（ブラウザ固有）のJavaScriptファイルを登録してエンキューしますか？

WP.SEコミュニティは、テーマ/テンプレートにスクリプトを追加するためにwp_register_scriptとwp_enqueue_scriptを使用することを常に推奨しています（同様に、スタイルシートにもwp_register_styleとwp_enqueue_style）。

これが私のスクリプトの登録とエンキュー方法です。

まず、functions.phpにこのようなものを追加します 

add_action('init','wpse54189_register_script');
function wpse54189_register_script(){

    //Register scripts
    wp_enqueue_script( 'jquery' );
    wp_register_script( 'aahan_bootstrap_transition', get_template_directory_uri().'/js/bootstrap-transition.js');
    wp_register_script( 'aahan_bootstrap_carousel', get_template_directory_uri().'/js/bootstrap-carousel.js', array('aahan_bootstrap_transition'));    
    wp_register_script( 'wpse54189_ajax_comment', get_template_directory_uri().'/js/no-reload-comments.js');
}

それからテンプレートファイル（例えばheader.php）でそれを次のように呼び出します 

<?php wp_enqueue_script( 'aahan_bootstrap_carousel' ); ?>
<?php wp_enqueue_script( 'wpse54189_ajax_comment' ); ?>

それでは、具体的なブラウザで認識される「条件付きJavaScriptファイル」を登録してエンキューするにはどうすればよいでしょうか。例えば：

<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

これを正しく登録してエンキューするにはどうすればよいですか。

PS： 私はAutomatticのテーマラングラーによって開発された Reddleテーマ を使う。そしてテーマのheader.phpは直接前述のコードを使用します - つまりそれはエンキューされていません。だから、それはそれを行うための唯一の方法であるという意味ですか？

javascriptwp-enqueue-scriptwp-register-script
8
its_me

WP_ScriptsおよびWP_Stylesクラスは、wp_enqueue_scriptおよびwp_enqueue_style関数の背後にあります。クラスの実装（ scripts と styles ）を見ると、WP_Scriptsクラスはいかなる種類の条件付きスクリプトもサポートしていないことがわかります。 WP_Stylesがすることがわかります。問題はwp_enqueue_styleでは条件を設定できないことです。

だから私たちは小さなハックをしなければなりません：

add_filter( 'wp_enqueue_scripts', 'wpse2345_enqueue_scripts' );
function wpse2345_enqueue_scripts() {
    wp_enqueue_style( 'mystyle', 'url/of/my/style.css', array(), '1.0.0' );

    global $wp_styles;
    $wp_styles->registered['mystyle']->add_data( 'conditional', 'lt IE 9' );
}

すべての登録済みスタイルがWP_Stylesクラスのregisteredフィールドに格納されているため、そのようなハッキングが可能になります。登録されたスタイルはそれぞれ_WP_Dependencyクラスのオブジェクトであり、これを使うと追加のデータを追加できます。

残念ながら、このハックはスクリプトに対しては機能しません。

追加情報：
私は昨夜、 Aaron CampbellのEssence Theme のコードを実際に調べていましたが、彼はブラウザの条件付きスクリプトとスタイルの両方を呼び出していることに気付きました。

/**
 * @var WP_Scripts
 */
global $wp_scripts;
// Conditionally load this only for IE < 9
$wp_scripts->add_data( 'html5', 'conditional', 'lt IE 9' );

/**
 * @var WP_Styles
 */
global $wp_styles;
// Conditionally load this only for IE < 8
$wp_styles->add_data( 'blueprint-ie', 'conditional', 'lt IE 8' );

チケットとパッチもありますが、まだコアではありません 。明らかに、条件付きスクリプトはパッチなしでは動作しませんが、注意すべきことはwp_enqueue_scriptsアクションに付随するあなたの関数の中で直接add_dataメソッドを使うことができるということです。

13
Eugene Manuilov