web-dev-qa-db-fra.com

Tout avantage à utiliser wp_scripts et is_IE lors de la mise en file d'attente de scripts

J'ai lu sur la WP docs, qui pointait vers cet élément Gist que la bonne manière de mettre en file d'attente les styles pour IE consiste à utiliser le $wp_styles. J'imagine que cela serait vrai également pour les scripts.

Prenons ces exemples par exemple ...

Option 1 - Utilisation de wp_scripts

add_action('wp_print_scripts', function() {
    global $wp_scripts;
    wp_enqueue_script( 'html5shiv', 'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js', array( 'bootstrap' )  );
    $wp_scripts->add_data( 'html5shiv', 'conditional', 'lt IE 9' );
} );

Deuxième option - Utilisez wp_scripts avec is_IE

add_action('wp_print_scripts', function() {
    global $wp_scripts, $is_IE;
    if($is_IE) {
        wp_enqueue_script( 'html5shiv', 'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js', array( 'bootstrap' )  );
        $wp_scripts->add_data( 'html5shiv', 'conditional', 'lt IE 9' );
    }
} );

Troisième option - Répondez simplement dans la tête:

add_action('wp_head', function(){
    echo '<!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><![endif]-->' . "\n";
});

Option Quatre - Mettez-le en tête de liste:

add_action('wp_print_scripts', function(){
        wp_enqueue_script( 'html5shiv', 'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js', array( 'bootstrap' )  );
});

La deuxième option. semble cool car il semble un peu plus propre sur les navigateurs non-IE. Mais je ne suis pas sûr si cela a réellement un avantage de vitesse ou si le contrôle seul le ralentit davantage. À part cela, je n'arrive pas à comprendre pourquoi l'option 1 est meilleure que l'option 3 ou 4.

La raison de cette question

J'utilise le framework Genesis et ils incluent HTML5shiv comme dans l'exemple ci-dessous qui ne me semblait pas correct:

add_action( 'wp_head', 'genesis_html5_ie_fix' );
/**
 * Load the html5 shiv for IE8 and below. Can't enqueue with IE conditionals.
 */
function genesis_html5_ie_fix() {
    if ( ! genesis_html5() )
        return;
    echo '<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->' . "\n";
}
javascriptwp-enqueue-scriptwp-headgenesis-theme-frameworkglobals
7
Bryan Willis

Pour prolonger @gmazzap suggestion sur le fait de ne pas utiliser de globales lorsque vous pouvez utiliser wp_scripts(), il existe un raccourci pour wp_scripts() permettant d'ajouter des commentaires conditionnels appelés wp_script_add_data et __ également wp_style_add_data pour les styles conditionnels.

Donc, la manière correcte d’utiliser les conditionnels à partir de Wordpress 4.2 est la suivante:

/**
 * IE enqueue HTML5shiv with conditionals
 * @link http://tiny.cc/html5shiv
 */
function wpse_213701_enqueue_html5shiv()  {
    wp_enqueue_script( 'html5shiv',
        'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js',
        array(),
        false,
        false
    );
    wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );
}
add_action('wp_enqueue_scripts', 'wpse_213701_enqueue_html5shiv');

Cependant, l'exemple ci-dessus utilise HTML5shiv, ce qui est une situation unique. Puisque doit être chargé dans la tête, vous pourriez faire quelque chose comme cet exemple suivant si vous craignez un plugin comme Roots Soil en supprimant tous les scripts de la tête.

Très probablement, vous ne rencontrerez pas une telle situation. C'est une chose très instable à faire car il faut beaucoup de scripts pour charger dans la tête. Pour placer des scripts dans le pied de page, définissez $in_footer variable sur true lors de la mise en file d'attente des scripts. Par conséquent, si vous utilisez des racines ou tout autre plug-in de cache, planifiez pas que tout fonctionne correctement. boîte.

Voici un exemple moche de ce que vous pouvez faire:

add_action( 'wp_head', 'wpse_213701_check_html5shiv', 1 );
function wpse_213701_check_html5shiv() {
    remove_action( 'wp_head', 'genesis_html5_ie_fix' );
    if ( !has_filter( 'wp_head', 'wp_enqueue_scripts' ) && !wp_script_is( 'html5shiv', 'done' ) ) {
        add_action('wp_head', 'wpse_213701_echo_html5shiv');
        wp_dequeue_script('html5shiv');
    }
}
function wpse_213701_echo_html5shiv() {
    echo '<!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><![endif]-->' . "\n";
}

C'est exagéré cependant et cela ne garantit toujours pas que cela fonctionnera. Au cours des 4 dernières années, html5shiv a pris de nombreux noms, ce qui a provoqué son enregistrement/mise en file d'attente avec plusieurs descripteurs différents (html5, html5shiv, html5shim, nom_thème-html5shiv, html5-ie-fix, et html5- polyfill pour n'en nommer que quelques-uns). De plus, il s'agit souvent de fourni avec modernizr . Dans cet esprit, si vous pensez que l'exemple ci-dessus est ridicule, vous pouvez également ajouter le script à wp_head dans votre thème enfant depuis un plugin html5shiv handle nommera probablement autre chose.

Mise à jour (Déplacement des scripts au pied de page avec cette approche):

Cela a déclenché une action sur la page Roots/Soil Github. Voici probablement le meilleur moyen de le faire (comme suggéré par @grappler )) et de toujours déplacer les scripts vers le pied de page. Une approche similaire a été publiée sur @ kaiser blog il y a quelques années.

function grappler_move_js_to_footer() 
    $scripts = wp_scripts();
    foreach( $scripts->registered as $script ) {
        if ( 'html5' == $script->handle ) {
            wp_script_add_data( $script->handle, 'group', 0 );
        } else {
            wp_script_add_data( $script->handle, 'group', 1 );
        }
    }
}
add_action( 'wp_enqueue_scripts', 'grappler_move_js_to_footer', 99 );

Quant à ce que Mark Kaplan a suggéré et à ce quetoscho mentionné ici, vous ne devriez pas utiliser la méthode $ is_IE de l'option 2 . Apparemment, si l'en-tête HTTP Vary: User- L’agent n’est pas envoyé, vous enverrez le mauvais résultat aux utilisateurs derrière un cache, ce qui le cassera. En ce qui concerne la détection côté navigateur voici un long fil d’exemples sur la façon dont cela pourrait être fait. Même la détection côté client a ses pièges.

En fin de compte, la meilleure solution est peut-être de ne pas utiliser ces méthodes et d'oublier les navigateurs hérités, car Microsoft a cessé de les prendre en charge à compter du 12 janvier .

5
Bryan Willis

Et l'option 5 consiste à détecter du côté du navigateur de quel navigateur il s'agit et à créer un élément de script pour votre script directement dans le dom, comme le fait Google Analytics comme le FB SDK.

Cela présente l’avantage de faire la détection du navigateur au seul endroit où cela devrait être fait, le navigateur, et de charger les scripts spécifiques à IE uniquement lorsque cela est nécessaire.

Dans l’esprit, cela ressemble beaucoup à votre troisième option, mais elle est plus générique.

Sidenote: is_IE devrait être évité, comme tous les autres navigateurs côté serveur, car ils empêcheraient la mise en cache.

4
Mark Kaplun

De manière générale, les scripts et les styles ne doivent jamais être directement imprimés sur la page.

La raison en est qu'un autre plugin ou thème peut ajouter le même script à nouveau, et vous obtenez le même script ajouté 2 fois ou plus.

Si vous mettez la ressource en file d'attente de la manière appropriée, si un autre code met la ressource en file d'attente à nouveau, elle sera ajoutée une fois.

Pour cette raison, vous devez ignorer les options 3 et 4.

En ce qui concerne l'option 2, comme Mark Kaplun a souligné , il utilise la détection de navigateur côté serveur, qui n'est jamais très abordable, et même si ce serait le cas, ne laissez pas la version sélectionnée du navigateur et dans votre cas, il inclura le script même dans les versions modernes IE, qui n'en ont pas besoin.

Donc, en fait, l'option 1 est la meilleure parmi celles que vous avez proposées.

Les seuls changements que je ferais:

  • utilisez l'action 'wp_enqueue_scripts' au lieu de 'wp_print_scripts'
  • utiliser wp_scripts() function plutôt que d'accéder à global

Quelque chose comme:

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script(
       'html5shiv',
       'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js',
       array( 'bootstrap' ),
       '3.7.2',
       false
    );
    wp_scripts()->add_data( 'html5shiv', 'conditional', 'lt IE 9' );
} );

En procédant ainsi, si un autre plugin met en file d'attente le script 'html5shiv', il ne sera ajouté qu'une seule fois.

Notez qu'en utilisant l'extrait ci-dessus, ce qui est imprimé sur une page est:

<!--[if lt IE 9]>
<script type='text/javascript' src='https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js'></script>
<![endif]-->

Cette condition est analysée par le navigateur (côté client) et non par le serveur. Elle est donc abordable et vous permet d'ajouter le script uniquement pour la version IE que vous souhaitez cibler.

Si vous souhaitez en savoir plus sur la plate-forme cliente (système d'exploitation, type d'écran et résolution, version détaillée du navigateur, etc.), vous ne pouvez utiliser que du javascript pour obtenir ces informations et ajouter dynamiquement le script à DOM Mark Kaplun solution), mais si connaître la "famille de navigateurs" et la version majeure vous suffit, ma suggestion est d'utiliser cette solution.

4
gmazzap