style_loader_tag
style_loader_tag est une API WordPress officielle, voir la documentation: https://developer.wordpress.org/reference/hooks/style_loader_tag/
apply_filters( 'style_loader_tag', $html, $handle, $href, $media )
Filtre la balise de lien HTML d'un style mis en file d'attente.
Mettez d'abord votre feuille de style en file d'attente, voir la documentation: https://developer.wordpress.org/reference/functions/wp_enqueue_style/
wp_enqueue_style( 'font-awesome-5', 'https://use.fontawesome.com/releases/v5.5.0/css/all.css', array(), null );
Le $handleest 'font-awesome-5'
je fais nullpour qu'il n'y ait pas de numéro de version. De cette façon, il sera mis en cache.
Simple str_replace
Un simple str_replace suffit pour réaliser ce que vous voulez, voir l'exemple ci-dessous
function add_font_awesome_5_cdn_attributes( $html, $handle ) {
if ( 'font-awesome-5' === $handle ) {
return str_replace( "media='all'", "media='all' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'", $html );
}
return $html;
}
add_filter( 'style_loader_tag', 'add_font_awesome_5_cdn_attributes', 10, 2 );
Ajouter des attributs différents Ci-
dessous un exemple pour ajouter différents attributs à (plusieurs) feuilles de style différentes
function add_style_attributes( $html, $handle ) {
if ( 'font-awesome-5' === $handle ) {
return str_replace( "media='all'", "media='all' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'", $html );
}
if ( 'another-style' === $handle ) {
return str_replace( "media='all'", "media='all' integrity='blajbsf' example", $html );
}
if ( 'bootstrap-css' === $handle ) {
return str_replace( "media='all'", "media='all' integrity='something-different' crossorigin='anonymous'", $html );
}
return $html;
}
add_filter( 'style_loader_tag', 'add_style_attributes', 10, 2 );
Ajouter des attributs à tous les styles
Ci-dessous un exemple pour ajouter les mêmes attributs à plusieurs feuilles de style
function add_attributes_to_all_styles( $html, $handle ) {
// add style handles to the array below
$styles = array(
'font-awesome-5',
'another-style',
'bootstrap-css'
);
foreach ( $styles as $style ) {
if ( $style === $handle ) {
return str_replace( "media='all'", "media='all' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'", $html );
}
}
return $html;
}
add_filter( 'style_loader_tag', 'add_attributes_to_all_styles', 10, 2 );
script_loader_tag
Je voudrais également expliquer le script_loader_tag, car c'est aussi pratique, mais cette API fonctionne en combinaison avec wp_enqueue_script .
L'API script_loader_tag est presque la même, seulement quelques petites différences, voir la documentation: https://developer.wordpress.org/reference/hooks/script_loader_tag/
apply_filters( 'script_loader_tag', $tag, $handle, $src )
Filtre la balise de script HTML d'un script mis en file d'attente.
Ci-dessous un exemple pour reporter un seul script
function add_defer_jquery( $tag, $handle ) {
if ( 'jquery' === $handle ) {
return str_replace( "src", "defer src", $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'add_defer_jquery', 10, 2 );
Ci-dessous un exemple pour différer plusieurs scripts
function add_defer_attribute( $tag, $handle ) {
// add script handles to the array below
$scripts_to_defer = array(
'jquery',
'jquery-migrate',
'bootstrap-bundle-js'
);
foreach ( $scripts_to_defer as $defer_script ) {
if ( $defer_script === $handle ) {
return str_replace( "src", "defer src", $tag );
}
}
return $tag;
}
add_filter( 'script_loader_tag', 'add_defer_attribute', 10, 2 );
J'ai donc expliqué à la fois les API style_loader_taget script_loader_tag. Et j'ai donné quelques exemples pour les deux API, j'espère que cela sera utile pour beaucoup de gens. J'ai de l'expérience avec les deux API.
UPDATE
@CKMacLeod Merci pour votre mise à jour, cela clarifie les choses. Nous sommes principalement sur la même page. Comme je l'ai dit, je suis un développeur WordPress et si vous souhaitez publier un thème et / ou un plugin sur https://wordpress.org, vous êtes essentiellement obligé de respecter les " normes de codage WordPress " ou ils rejetteront simplement votre thème et / ou plugin.
C'est pourquoi j'encourage les développeurs à utiliser "la manière WordPress". Je comprends que parfois il n'y a aucune différence, mais c'est aussi une question de commodité. Comme vous l'avez dit vous-même, vous pouvez télécharger Font Awesome et l'inclure dans votre thème et / ou plugin, de cette façon, vous n'auriez qu'à supprimer la fonction style_loader_tag et modifier votre fonction wp_enqueue_style.
Et une dernière chose, dans le passé (il y a 5 ans), la mise en cache, la combinaison et la réduction des plugins ne fonctionnaient pas et la plupart du temps, je découvrirais pourquoi les développeurs qui ont créé le thème ont simplement mis les choses en tête dans le thème et / ou leur fait écho. La plupart des plugins de mise en cache, qui fournissent également (la plupart du temps) des options pour combiner, réduire et retarder l'exécution des scripts, sont devenus plus intelligents et meilleurs pour détecter le mauvais code et les contourner. Mais ce n'est pas préféré. C'est pourquoi j'encourage les gens à coder avec des normes / conventions à l'esprit.
En tant que développeur, vous devez toujours prendre en considération ce que les gens pourraient faire avec votre code et en tenant compte de la compatibilité. Donc, ne prenez pas la solution facile mais la meilleure solution optimale. J'espère avoir clarifié mon point de vue.
EDIT
@CKMacLeod Merci pour le débat (technique), j'espère que vous réalisez à quel point c'est important (en utilisant les API WordPress dans votre propre développement). Encore une fois, j'ai regardé autour de moi et même maintenant, si je regarde la FAQ des plugins minify les plus populaires, je vois généralement ça dans un sens ou dans l'autre, par exemple:
Question: Pourquoi certains fichiers CSS et JS ne sont-ils pas fusionnés?
Réponse: Le plugin ne traite que les fichiers JS et CSS mis en file d'attente à l'aide de la méthode officielle de l'API WordPress -
https://developer.wordpress.org/themes/basics/including-css-javascript/
- ainsi que les fichiers du même domaine (sauf indication contraire) sur les paramètres).
Voir FAQ: https://wordpress.org/plugins/fast-velocity-minify/