web-dev-qa-db-fra.com

WordPress - Enqueue des scripts pour seulement si LT IE 9

Dans un thème WordPress, comment inclure conditionnellement des scripts pour ie8 et les versions antérieures? Il s’agit principalement d’appliquer des polyfill pour diverses fonctions html5/css3. Je vois que wp a la variable $ is_IE qui peut être utilisée comme condition pour inclure uniquement les scripts pour IE. Existe-t-il un moyen d’ajouter le script pour certaines versions de IE plutôt que pour toutes les versions? C’est simple avec certains commentaires HTML, c’est-à-dire conditionnels, mais j’aimerais inclure les scripts au même endroit dans mon fichier de fonctions.

Conditionnel pour des versions spécifiques en HTML:

<!--[if lt IE 9]> <script src="iepolyfill.min.js"></script> <![endif]-->

Conditionnel pour tout IE dans WP:

    global $is_IE;

    if ( $is_IE ) {
        wp_enqueue_script( 'iepolyfill', bloginfo('stylesheet_directory').'/js/iepolyfill.min.js' );
    }

J'ai jeté un coup d'œil et surtout trouvé des détails sur les scripts conditionnels pour le backend wp uniquement.

Aucune suggestion?

phpjavascriptwordpressinternet-explorerpolyfills
26
circlecube

Wordpress étant un script PHP, il peut accéder à la variable serveur via $ _SERVER.

Ensuite, vous pouvez rechercher un navigateur avec PHP, PHP: Si Internet Explorer 6, 7, 8 ou 9

1
Trinh Hoang Nhu

Pour WordPress 4.2+

Utilisez wp_script_add_data pour envelopper le script dans un commentaire conditionnel:

wp_enqueue_script( 'html5shiv', '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js' );
wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );

wp_enqueue_script( 'respond', get_template_directory_uri() . '/js/respond.min.js' );
wp_script_add_data( 'respond', 'conditional', 'lt IE 9' );

Assurez-vous simplement d'enregistrer le script avant d'appeler wp_script_add_data (l'enregistrement est géré par wp_enqueue_script ci-dessus) et que le premier argument que vous transmettez à wp_script_add_data correspond au premier argument que vous avez transmis lors de l'enregistrement du script.

Pour WordPress 4.1

Vous pouvez utiliser le filtre script_loader_tag today pour mettre en file d'attente les scripts encapsulés dans des commentaires conditionnels. Voici un exemple de mise en œuvre:

wp_enqueue_script( 'html5shiv', '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js', array(), '3.7.2', false );
add_filter( 'script_loader_tag', function( $tag, $handle ) {
    if ( $handle === 'html5shiv' ) {
        $tag = "<!--[if lt IE 9]>$tag<![endif]-->";
    }
    return $tag;
}, 10, 2 );

Et si vous souhaitez inclure plusieurs scripts de la même manière, vous pouvez utiliser quelque chose comme:

// Conditional polyfills
$conditional_scripts = array(
    'html5shiv'           => '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js',
    'html5shiv-printshiv' => '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv-printshiv.js',
    'respond'             => '//cdn.jsdelivr.net/respond/1.4.2/respond.min.js'
);
foreach ( $conditional_scripts as $handle => $src ) {
    wp_enqueue_script( $handle, $src, array(), '', false );
}
add_filter( 'script_loader_tag', function( $tag, $handle ) use ( $conditional_scripts ) {
    if ( array_key_exists( $handle, $conditional_scripts ) ) {
        $tag = "<!--[if lt IE 9]>$tag<![endif]-->";
    }
    return $tag;
}, 10, 2 );
71
Andrew Patton
  • Vous devez utiliser wp_register_script() chaque fois que vous ajoutez des scripts à vos thèmes ou plugins WP.
  • Le reniflage côté serveur est généralement une mauvaise idée, car il est incertain.
  • Habituellement, vous souhaitez cibler les navigateurs dépourvus de fonctionnalités essentielles, mais pas uniquement le navigateur IE. Modernzr est un bon script pour faire exactement cela.

Pour IE, les balises conditionnelles fonctionnent très bien. Voici comment ajouter des balises conditionnelles dans un script, par exemple pour HTML5shiv :

global $wp_scripts;
wp_register_script( 
    'html5shiv', 
    get_bloginfo('template_url').'/assets/js/html5shiv.js', 
    array(), 
    '3.6.2'
    );
$wp_scripts->add_data( 'html5shiv', 'conditional', 'lt IE 9' );
24
Mikael Korpela

Solution pour WordPress 4.2 et supérieur

La bonne façon serait d'appliquer wp_enqueue_script puisqu'il s'agit de JavaScripts ici, et non de styles css. En outre, il est préférable d'utiliser get_bloginfo ('stylesheet_url') pour vous assurer que cela fonctionne également dans les thèmes enfants.

/**
 * IE Fallbacks
 */

function load_IE_fallback() {
    wp_register_script( 'ie_html5shiv', get_bloginfo('stylesheet_url'). '/js/html5shiv.min.js', __FILE__, false, '3.7.2' );
    wp_enqueue_script( 'ie_html5shiv');
    wp_script_add_data( 'ie_html5shiv', 'conditional', 'lt IE 9' );

    wp_register_script( 'ie_respond', get_bloginfo('stylesheet_url'). '/js/respond.min.js', __FILE__, false, '1.4.2' );
    wp_enqueue_script( 'ie_respond');
    wp_script_add_data( 'ie_respond', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'load_IE_fallback' );
8
Daniel Klose

Mise à jour pour WordPress 4.7.3 avec chargement des scripts depuis le CDN:

    add_action( 'wp_enqueue_scripts', 'load_IE_fallback' );
function load_IE_fallback() {
    wp_register_script( 'ie_html5shiv', 'https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js', '', '3.7.3', false );
    wp_register_script( 'ie_respond', 'https://oss.maxcdn.com/respond/1.4.2/respond.min.js', '', '1.4.2', false );

    wp_enqueue_script( 'ie_html5shiv');
    wp_enqueue_script( 'ie_respond');

    wp_script_add_data( 'ie_html5shiv', 'conditional', 'lt IE 9' );    
    wp_script_add_data( 'ie_respond', 'conditional', 'lt IE 9' );
}
6
Masimba Rodgers

La meilleure façon de le faire est de mettre les scripts en file d'attente, puis d'utiliser wp_style_add_data () pour mettre conditionnel. Cette méthode est utilisée par des thèmes officiels comme vingt-treize

Il y a une réponse semblable à celle-ci mais il ajoute un supplément si dans l'état qui ne va pas.

wp_register_style( 'ie_html5shiv', get_template_directory_uri() . '/js/html5shiv.js' );
    wp_enqueue_style( 'ie_html5shiv');
    wp_style_add_data( 'ie_html5shiv', 'conditional', 'lt IE 9' );

    wp_register_style( 'ie_respond', get_template_directory_uri() . '/js/respond.min.js' );
    wp_enqueue_style( 'ie_respond');
    wp_style_add_data( 'ie_respond', 'conditional', 'lt IE 9' );
2
Ahmad Awais

C'est un cauchemar bizarre. Je veux juste dormir un peu ce soir, d'accord?

Ça ne marche pas

$wp_styles->add_data("foo", "conditional", "lt IE 9");

Considérant que tout ce qui est suggéré ici n’est qu’un hack, j’ai fini par les coder en dur dans mon modèle.

header.php 

<head>
  <!-- ... -->

  <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/2.3.0/es5-shim.js"></script>
  <![endif]-->

  <?php wp_head(); ?>
</head>

Le seul inconvénient est que si vous ne les voulez pas sur toutes les pages. Soyons honnêtes, vous les voudrez sur la plupart pages, donc règle 80/20 dicte que cela suffit pour moi.

1
user633183

Essayez d’utiliser la fonction wp_style_add_data() (utilisée officiellement dans vingt-treize et vingt-quatorze thème:

wp_enqueue_style( 'iepolyfill', bloginfo( 'stylesheet_directory' ) . '/js/iepolyfill.min.js' );
wp_style_add_data( 'iepolyfill', 'conditional', 'if lt IE 9' );

Update: Depuis WordPress> = 4.2.0, une fonction est utilisée de la même manière. C'est appelé:

wp_script_add_data()
1
Flow