web-dev-qa-db-fra.com

Comment ajouter un attribut supplémentaire au lien de la feuille de style?

Suivant les conseils de Keith Clarks , je voudrais charger mes polices de manière asynchrone. J'essaie d'y parvenir en ajoutant:

wp_enqueue_style( 'font-awesome', URI . '/fonts/font-awesome/css/font-awesome.min.css' );
wp_style_add_data( 'font-awesome', 'onload', 'if(media!=\'all\')media=\'all\'');

dans mon fichier scripts.php, mais apparemment cet argument n'est pas bien pris par cette fonction, car il n'y a pas d'attribut onload. Comment puis-je le faire correctement dans WordPress?

wp-enqueue-stylestylesheetattribute
4
Anna Oleksiuk

Nous pouvons utiliser style_loader_tag filter pour filtrer le lien en sortie.

Voici le filtre:

$tag = apply_filters( 'style_loader_tag', "<link rel='$rel' id='$handle-css' $title href='$href' type='text/css' media='$media' />\n", $handle, $href, $media);

Ici, le lien $ handle pour lequel vous voulez ajouter un attribut estfont-awesomedonc si le handle, vous pouvez donc remplacer font-awesome-css par des informations supplémentaires.

add_filter('style_loader_tag', 'wpse_231597_style_loader_tag');

function wpse_231597_style_loader_tag($tag){

    $tag = preg_replace("/id='font-awesome-css'/", "id='font-awesome-css' online=\"if(media!='all')media='all'\"", $tag);

    return $tag;
}
4
bravokeyl

Je vous comprends très bien tous les deux, mais je voudrais souligner que suivre le conseil de Keith Clark ne fait que suivre une autre mauvaise pratique. Je comprends aussi que cela est demandé et répondu en 2016 et que la plupart des choses changent pour le meilleur ou pour le pire.

Si vous avez besoin de retarder une feuille de style, je vous recommanderais ce qui suit:

// I use get_footer to put my stylesheets in the footer
function add_footer_styles() {
    // Example loading external stylesheet, could be used in both a theme and/or plugin
    wp_enqueue_style( 'font-awesome-5', 'https://use.fontawesome.com/releases/v5.5.0/css/all.css', array(), null );

    // Example theme
    wp_enqueue_style( 'font-awesome-5', get_theme_file_uri( '/assets/css/fontawesome.min.css' ), array(), null );

    // Example plugin
    wp_enqueue_style( 'font-awesome-5', plugins_url( '/assets/css/fontawesome.min.css', __FILE__ ), array(), null );
};
add_action( 'get_footer', 'add_footer_styles' );



Intégrité et origine croisée
Si vous ajoutez Font Awesome 5 en externe, je vous recommanderais également d'utiliser intégrité et crossorigin , voir mon autre réponse pour une analyse plus détaillée de l'ajout d'attributs: Comment ajouter crossorigin et intégrité pour wp_register_style? (Font Awesome 5)

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 );
0
Remzi Cavdar