web-dev-qa-db-fra.com

Comment ajouter crossorigin et intégrité à wp_register_style? (Police Awesome 5)

Je suis en train de mettre à niveau Font Awesome 4 vers la version 5, qui introduit les attributs d’intégrité et d’origine croisée dans le balisage <link rel="stylesheet">.

Actuellement, j'utilise: 

wp_register_style('FontAwesome', 'https://example.com/font-awesome.min.css', array(), null, 'all' );
wp_enqueue_style('FontAwesome');

Quelles sorties en tant que: 

<link rel="stylesheet" id="FontAwesome-css" href="https://example.com/font-awesome.min.css" type="text/css" media="all" />

Avec Font Awesome 5, il introduit deux nouveaux attributs et valeurs (integrity et crossorigin), par exemple: 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

J'ai donc besoin de savoir comment ajouter l'intégrité et l'origine croisée à wp_register_style. J'ai essayé mais mes tentatives d'utilisation de wp_style_add_data ont échoué. Il semblerait que cette méthode ne supporte que conditional, rtl et suffix, alt et title.

wp-enqueue-stylestylesheetattributehtml
7
Pipo

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 $handle est 'font-awesome-5'
Je fais null pour 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 obtenir 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 différents attributs
Ci-dessous un exemple d’ajout d’attributs différents à (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 );


Ajoute des attributs à tous les styles
Ci-dessous un exemple permettant d’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
J'aimerais également expliquer script_loader_tag, car il est également pratique, mais cette API fonctionne en combinaison avec wp_enqueue_script .

L’API script_loader_tag est presque identique, il n’ya que 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 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 reporter plus d'un script

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é les style_loader_tag et script_loader_tag des deux API. Et j’ai donné quelques exemples pour les deux API et j’espère que cela est 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 le disais, 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 vous conformer aux " Normes de codage WordPress "ou ils rejetteront simplement votre thème et/ou votre plugin.

C'est pourquoi j'encourage les développeurs à utiliser "la méthode WordPress". Je comprends que parfois il n’ya aucune différence, mais c’est aussi pratique. Comme vous l'avez dit vous-même, vous pourriez télécharger Font Awesome et l'inclure dans votre thème et/ou votre plugin. Ainsi, il vous suffira de supprimer la fonction style_loader_tag et de modifier votre fonction wp_enqueue_style.

Et une dernière chose, dans le passé (il y a 5 ans), des plugins de mise en cache, de combinaison et de minification ne fonctionnaient pas et la plupart du temps, je découvrais pourquoi les développeurs qui ont créé le thème mettaient simplement des choses dans le dossier. la tête dans le thème et/ou les a fait écho. La plupart des plugins de mise en cache, qui fournissent également (la plupart du temps) des options pour combiner, minimiser et retarder l'exécution des scripts sont devenus plus intelligents et plus efficaces pour détecter les codes erronés et les contourner. Mais ce n'est pas préféré. C'est pourquoi j'encourage les gens à coder avec les normes/conventions en tête.

En tant que développeur, vous devez toujours tenir compte de ce que les utilisateurs peuvent faire avec votre code et en tenant compte de la compatibilité. Donc, ne pas prendre 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 (utiliser 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 les plus populaires de minify, je vois généralement ceci d'une manière ou d'une autre, par exemple:

Question: Pourquoi certains fichiers CSS et JS ne sont-ils pas fusionnés?
Réponse: Le plugin traite uniquement 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/ -aussi bien que des fichiers du même domaine (sauf indication contraire dans les paramètres).

Voir FAQ: https://wordpress.org/plugins/fast-velocity-minify/

13
Remzi Cavdar