wake-up-neo.com

Wie füge ich dem Stylesheet-Link ein zusätzliches Attribut hinzu?

Nach Keith Clarks Rat möchte ich meine Schriften asynchron laden. Ich versuche das zu erreichen, indem ich hinzufüge:

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\'');

in meiner scripts.php-Datei, aber anscheinend wird dieses Argument von dieser Funktion nicht gut angenommen, weil es kein Onload-Attribut gibt. Wie richtig kann ich das in WordPress machen?

4
Anna Oleksiuk

Wir können style_loader_tag filter verwenden, um den Link zu filtern, der ausgegeben wird.

Hier ist der Filter:

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

Hier ist der Link $ Handle, für den Sie ein Attribut hinzufügen möchtenfont-awesomealso wenn das Handle, können Sie font-awesome-css durch zusätzliche Informationen ersetzen.

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

Ich verstehe Sie beide wirklich, aber ich möchte darauf hinweisen, dass das Befolgen von Keith Clarks Rat nur einer weiteren schlechten Praxis folgt. Ich verstehe auch, dass dies im Jahr 2016 gefragt und beantwortet wird und dass sich die meisten Dinge zum Guten oder Schlechten ändern.

Wenn Sie ein Stylesheet verzögern müssen, empfehle ich Ihnen Folgendes:

// 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' );



Integrität und Crossorigin
Wenn Sie Font Awesome 5 extern hinzufügen, würde ich auch empfehlen, Integrität und Crossorigin zu verwenden. Weitere Informationen zum Hinzufügen von Attributen finden Sie in meiner anderen Antwort: Hinzufügen von Crossorigin und Integrität zu 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