Registrare e accodare file javascript condizionali (specifici del browser)?


8

La comunità WP.SE ha sempre consigliato l'uso di wp_register_scripte wp_enqueue_scriptper l'aggiunta di script in un tema / modello (e allo stesso modo, wp_register_stylee wp_enqueue_styleper i fogli di stile).


È così che mi registro e accoda i miei script ...

Innanzitutto, aggiungo qualcosa del genere in 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');
}

quindi chiamalo in un file modello (diciamo header.php) in questo modo

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

Ora, arrivando al punto, come posso registrare e accodare "file JavaScript condizionali" che sono lì per essere riconosciuti da browser specifici? Per esempio:

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

Come posso registrarmi e accodarmi correttamente?

PS: Uso il tema Reddle , sviluppato dai creatori di temi di Automattic. E il header.php del tema utilizza direttamente il codice appena citato, ovvero non è accodato. Quindi, ciò significa che è l'unico modo per farlo?


Sebbene abbia quasi un anno, questa stessa domanda è stata posta prima . Non l'ho trovato quando ho cercato prima.
its_me

Risposte:


13

WP_Scriptse le WP_Stylesclassi sono dietro wp_enqueue_scripte le wp_enqueue_stylefunzioni. Se dai un'occhiata all'implementazione delle classi ( script e stili ), vedrai che la WP_Scriptsclasse non supporta alcun tipo di script condizionali, ma! puoi vederlo WP_Styles! Il problema è che wp_enqueue_stylenon ti consente di impostare le condizioni.

Quindi dobbiamo fare un piccolo trucco:

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

Tale hack diventa possibile, perché tutti gli stili registrati sono memorizzati nel registeredcampo di WP_Stylesclasse. Ciascuno di stile registrato è un oggetto di _WP_Dependencyclasse, che consente di aggiungere ulteriori dati.

Purtroppo questo trucco non funziona per gli script.

Informazioni aggiuntive:
In realtà stavo esaminando il codice nel tema Essence di Aaron Campbell la scorsa notte e ho notato che stava chiamando sia uno script condizionale del browser che uno stile.

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

C'è anche un ticket e una patch ma non è ancora nel core . Ovviamente lo script condizionale non funzionerà senza la patch, ma una cosa da notare è che puoi usare il metodo add_data direttamente all'interno della tua funzione collegata wp_enqueue_scriptsall'azione.


1
Unfortunately this hack is not working for scripts.Oh ... che schifo! Sembra che l'unico modo sia quello che è. :( Grazie comunque per l'hack. :)
its_me

Sembra che abbiamo script condizionali a partire dalla 4.2 core.trac.wordpress.org/changeset/31223
lkraav
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.