Enregistrer et mettre en file d'attente des fichiers javascript conditionnels (spécifiques au navigateur)?

8

La communauté WP.SE a toujours conseillé l'utilisation wp_register_scriptet l' wp_enqueue_scriptajout de scripts dans un thème / modèle (et de même, wp_register_styleet wp_enqueue_stylepour les feuilles de style).


Voici comment je m'inscris et met en file d'attente mes scripts ...

Tout d'abord, j'ajoute quelque chose comme ça dans 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');
}

puis appelez-le dans un fichier modèle (par exemple, header.php) comme celui-ci

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

Maintenant, pour en venir au fait, comment puis-je enregistrer et mettre en file d'attente des "fichiers JavaScript conditionnels" qui sont là pour être reconnus par des navigateurs spécifiques? Par exemple:

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

Comment puis-je m'enregistrer et mettre en file d'attente correctement?

PS: J'utilise le thème Reddle , développé par les rédacteurs de thèmes d' Automattic. Et le header.php du thème utilise directement le code susmentionné - c'est-à-dire qu'il n'est pas mis en file d'attente. Alors, ça veut dire que c'est la seule façon de le faire?

c'est moi
la source
Bien qu'elle ait presque un an, cette même question a déjà été posée . Je ne l'ai pas rencontré lorsque j'ai cherché plus tôt.
its_me

Réponses:

13

WP_Scriptset les WP_Stylesclasses sont derrière wp_enqueue_scriptet wp_enqueue_stylefonctionnent. Si vous regardez l'implémentation des classes ( scripts et styles ), vous verrez que la WP_Scriptsclasse ne prend en charge aucun type de scripts conditionnels, mais! vous pouvez le voir WP_Styles! Le problème est que wp_enqueue_stylecela ne vous permet pas de configurer la condition.

Nous devons donc faire un petit hack:

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

Un tel piratage devient possible, car tous les styles enregistrés sont stockés dans le registeredchamp de WP_Stylesclasse. Chacun des styles enregistrés est un objet de _WP_Dependencyclasse, qui vous permet d'ajouter des données supplémentaires.

Malheureusement, ce hack ne fonctionne pas pour les scripts.

Informations supplémentaires:
J'étais en train de parcourir le code du thème Essence d'Aaron Campbell hier soir et j'ai remarqué qu'il appelait à la fois un script et un style conditionnels du navigateur.

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

Il y a aussi un ticket et un patch mais ce n'est pas encore dans le noyau . Évidemment, le script conditionnel ne fonctionnera pas sans le correctif, mais une chose à noter est que vous pouvez utiliser la méthode add_data directement à l'intérieur de votre fonction qui est attachée à l' wp_enqueue_scriptsaction.

Eugene Manuilov
la source
1
Unfortunately this hack is not working for scripts.Oh ... ça craint! On dirait que la seule façon est la façon dont c'est. :( Merci pour le hack au fait. :)
its_me
Il semble que nous ayons des scripts conditionnels à partir de la version 4.2 core.trac.wordpress.org/changeset/31223
lkraav