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?


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.


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
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.