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


8

WP.SEコミュニティは常にの使用をお勧めしているwp_register_scriptwp_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は、前述のコードを直接使用します-つまり、エンキューされません。だから、それはそれを行う唯一の方法だということですか?


ほぼ1年です、これと同じ質問が以前に行われました。以前に検索したとき、私はそれに遭遇しませんでした。
its_me

回答:


13

WP_ScriptsWP_Stylesクラスは背後にwp_enqueue_scriptあり、wp_enqueue_style機能しています。クラスの実装(スクリプトスタイル)を見ると、その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' );
}

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

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

追加情報:昨夜
アーロンキャンベルのエッセンステーマのコードを実際に調べていたところ、彼がブラウザーの条件付きスクリプトとスタイルの両方を呼び出していることに気付きました。

/**
 * @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メソッドを直接使用できるという点に注意してください。


1
Unfortunately this hack is not working for scripts.ああ...それは嫌だ!唯一の方法はそれがそうである方法のように見えます。:(ちなみにハックをありがとう。:)
its_me

4.2から始まる条件付きスクリプトがあるようです。core.trac.wordpress.org
changeset /
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.