Mendaftar dan mengirim file javascript bersyarat (khusus browser)?

8

Komunitas WP.SE selalu menyarankan penggunaan wp_register_scriptdan wp_enqueue_scriptuntuk menambahkan skrip dalam tema / template (dan juga, wp_register_styledan wp_enqueue_styleuntuk stylesheet).


Ini adalah bagaimana saya mendaftar dan membuat skrip saya ...

Pertama, saya menambahkan sesuatu seperti ini di 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');
}

kemudian menyebutnya dalam file templat (katakanlah, header.php) seperti ini

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

Sekarang, sampai pada intinya, bagaimana cara mendaftar dan mengeluarkan "file JavaScript bersyarat" yang ada untuk dikenali oleh browser tertentu? Sebagai contoh:

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

Bagaimana cara saya mendaftar dan melakukan enqueue ini dengan benar?

PS: Saya menggunakan tema Reddle , yang dikembangkan oleh pengatur tema di Automattic. Dan header.php tema langsung menggunakan kode yang baru saja disebutkan - yaitu tidak enqueued. Jadi, apakah itu berarti, itu satu-satunya cara untuk melakukannya?

ini aku
sumber
Meskipun hampir berumur satu tahun, pertanyaan yang sama diajukan sebelumnya . Saya tidak menemukan itu ketika saya mencari sebelumnya.
its_me

Jawaban:

13

WP_Scriptsdan WP_Styleskelas ada di belakang wp_enqueue_scriptdan wp_enqueue_stylefungsi. Jika Anda melihat implementasi kelas ( skrip dan gaya ) maka Anda akan melihat bahwa WP_Scriptskelas tidak mendukung segala jenis skrip bersyarat, tetapi! Anda bisa melihat itu WP_Styles! Masalahnya adalah itu wp_enqueue_styletidak memungkinkan Anda untuk mengatur kondisi.

Jadi kita harus membuat retasan kecil:

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

Retas semacam itu menjadi mungkin, karena semua gaya terdaftar disimpan di registeredbidang WP_Styleskelas. Setiap gaya terdaftar adalah objek _WP_Dependencykelas, yang memungkinkan Anda untuk menambahkan data tambahan.

Sayangnya peretasan ini tidak berfungsi untuk skrip.

Informasi Tambahan:
Saya benar-benar membaca kode di Aaron Campbell's Essence Theme tadi malam dan memperhatikan bahwa dia memanggil skrip kondisional browser dan gaya.

/**
 * @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' );

Ada juga tiket dan tambalan tetapi belum dalam inti . Jelas skrip kondisional tidak akan berfungsi tanpa tambalan tetapi satu hal yang perlu diperhatikan adalah bahwa Anda dapat menggunakan metode add_data langsung di dalam fungsi Anda yang terlampir pada wp_enqueue_scriptstindakan.

Eugene Manuilov
sumber
1
Unfortunately this hack is not working for scripts.Oh ... itu menyebalkan! Sepertinya satu-satunya cara adalah cara itu. :(
Omong
Sepertinya kami memiliki skrip bersyarat mulai dari 4.2 core.trac.wordpress.org/changeset/31223
lkraav