Wie füge ich wp_register_style Crossorigin und Integrität hinzu? (Font Awesome 5)

Ich aktualisiere Font Awesome 4 auf Version 5, die sowohl Integrität als auch Crossorigin-Attribute in das <link rel="stylesheet">Markup einführt .

Derzeit verwende ich:

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

Welche Ausgaben als:

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

Mit Font Awesome 5 werden zwei neue Attribute und Werte ( integrityund crossorigin) eingeführt, z.

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

Also habe ich , um herauszufinden , muß , wie ich sowohl die Integrität und crossorigin zu wp_register_style hinzufügen kann, habe ich versucht , aber meine Versuche, den Einsatz wp_style_add_dataversagt haben, so scheint es , dass diese Methode nur unterstützt conditional, rtlund suffix, altund title.

style_loader_tag
style_loader_tag ist eine offizielle WordPress-API. Weitere Informationen finden Sie in der Dokumentation: https://developer.wordpress.org/reference/hooks/style_loader_tag/

apply_filters( 'style_loader_tag', $html, $handle, $href, $media )
Filtert das HTML-Link-Tag eines in die Warteschlange gestellten Stils.

Stellen Sie zuerst Ihr Stylesheet in die Warteschlange, siehe Dokumentation: 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 );

Das $handleist 'font-awesome-5'
ich tun , nullso dass es keine Versionsnummer. Auf diese Weise wird es zwischengespeichert.

Einfacher str_replace
Ein einfacher str_replace reicht aus, um das zu erreichen, was Sie wollen (siehe Beispiel unten)

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

Hinzufügen verschiedener Attribute Im
Folgenden finden Sie ein Beispiel zum Hinzufügen verschiedener Attribute zu (mehreren) verschiedenen Stylesheets

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

Hinzufügen von Attributen zu allen Stilen Im
Folgenden finden Sie ein Beispiel zum Hinzufügen derselben Attribute zu mehr als einem Stylesheet

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
Ich möchte auch den script_loader_tag erklären, da dies ebenfalls praktisch ist, aber diese API funktioniert in Kombination mit wp_enqueue_script .

Die script_loader_tag-API ist fast identisch, nur einige kleine Unterschiede, siehe Dokumentation: https://developer.wordpress.org/reference/hooks/script_loader_tag/

apply_filters( 'script_loader_tag', $tag, $handle, $src )
Filtert das HTML-Skript-Tag eines in die Warteschlange gestellten Skripts.

Unten ein Beispiel zum Verschieben eines einzelnen Skripts

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

Unten ein Beispiel, um mehr als ein Skript aufzuschieben

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

So habe ich sowohl API erklärt style_loader_tagund script_loader_tag. Und ich habe einige Beispiele für beide APIs gegeben. Ich hoffe, dass dies für viele Leute da draußen nützlich ist. Ich habe Erfahrung mit beiden APIs.

UPDATE
@CKMacLeod Vielen Dank für Ihr Update, dies verdeutlicht die Dinge. Wir sind meistens auf der gleichen Seite. Wie gesagt, ich bin ein WordPress-Entwickler und wenn Sie ein Thema und / oder Plugin auf https://wordpress.org veröffentlichen möchten, müssen Sie sich im Wesentlichen an die " WordPress Coding Standards " halten, oder sie lehnen Ihre einfach ab Thema und / oder Plugin.

Deshalb ermutige ich Entwickler da draußen, "den WordPress-Weg" zu verwenden. Ich verstehe, dass es manchmal überhaupt keine Unterschiede gibt, aber es ist auch bequem. Wie Sie selbst sagten, können Sie Font Awesome herunterladen und in Ihr Design und / oder Plugin aufnehmen. Auf diese Weise müssen Sie nur die Funktion style_loader_tag entfernen und Ihre Funktion wp_enqueue_style ändern.

Und eine letzte Sache: In der Vergangenheit (vor 5 Jahren) funktionierten einige Plugins zum Zwischenspeichern, Kombinieren und Minimieren nicht. In den meisten Fällen fand ich heraus, warum die Entwickler, die das Thema erstellt hatten, einfach Dinge in den Kopf des Themas und stellten / oder wiederholte sie. Die meisten Caching-Plugins, die (meistens) auch Optionen zum Kombinieren, Minimieren und Verzögern der Ausführung von Skripten bieten, wurden intelligenter und konnten fehlerhaften Code besser erkennen und umgehen. Dies ist jedoch nicht bevorzugt. Deshalb ermutige ich die Leute, unter Berücksichtigung von Standards / Konventionen zu codieren.

Als Entwickler müssen Sie immer berücksichtigen, was die Benutzer mit Ihrem Code tun können, und dabei die Kompatibilität berücksichtigen. Nehmen Sie also nicht die einfache Lösung, sondern die beste optimale Lösung. Ich hoffe, ich habe meinen Standpunkt klargestellt.

EDIT
@CKMacLeod Vielen Dank für die (technische) Debatte. Ich hoffe, dass Sie erkennen, wie wichtig dies ist (mithilfe von WordPress-APIs in Ihrer eigenen Entwicklung). Wieder habe ich mich umgesehen und selbst jetzt, wenn ich mir die FAQs der beliebtesten Minify-Plugins ansehe, sehe ich das normalerweise so oder so, zum Beispiel:

Frage: Warum werden einige der CSS- und JS-Dateien nicht zusammengeführt?
Antwort: Das Plugin verarbeitet nur JS- und CSS-Dateien, die mit der offiziellen WordPress-API-Methode in die Warteschlange gestellt wurden - https://developer.wordpress.org/themes/basics/including-css-javascript/ -as - sowie Dateien aus derselben Domäne (sofern nicht anders angegeben) auf die Einstellungen).

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

Die Überprüfung von script_ und style_loader_tag durch @Remzi Cavdar ist interessant, aber auf die Gefahr hin, Empörung zu erregen, und in der Hoffnung, dass mich jemand daran erinnern kann, welchen Vorteil die Verwendung der WP-Warteschlange in Fällen wie diesem hätte, ich ' Ich empfehle, den einfachen Ausweg zu wählen und das Stylesheet von Fontawesome über einen Haken zu laden.

/* ADD FONTAWESOME 5.5.0 via action hook */
add_action( 'wp_head', 'sewpd_add_fontawesome' );

function sewpd_add_fontawesome() {

echo '
<!--FONTAWESOME 5.5.0 added via functions.php -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<!--END FONTAWESOME -->
'; 

}

Einige könnten sogar argumentieren, wenn Sie FA nur für einige Symbole in der Themenfußzeile oder in Posts verwenden, sollten Sie es im Hauptteil der Seite niedriger hinzufügen, da es auf diese Weise nicht als angezeigt wird Rendern blockieren, aber ich gebe zu, dass ich das noch nie gemacht habe ... Und ich werde nicht so weit gehen, zu empfehlen, es direkt zu einer header.php oder einer anderen Vorlagendatei hinzuzufügen. Das wäre falsch ;)

AKTUALISIEREN

Remzi Cavdar war so freundlich, auf meine Bitte um eine Erinnerung zu antworten, warum das Hinzufügen eines Fontawesome oder eines ähnlichen Tags über den wp_head () - Hook möglicherweise weniger wünschenswert ist als die Verwendung der WordPress-Warteschlange. Er bezieht sich allgemein auf den Begriff der Best Practices und etwas spezifischer auf die Idee, dass Caching-Plugins möglicherweise über die Warteschlange auf das Stylesheet zugreifen können müssen.

Bevor ich ins Detail gehe, werde ich sagen, dass ich den Ansatz von Genosse Cavdar mag und ihn möglicherweise in Zukunft selbst verwenden werde, obwohl ich keine wesentliche Rechtfertigung kenne, außer dass es sich um eine Art "WordPress-Weg" handelt .

Seine anderen Ansprüche dafür überzeugen mich jedoch nicht. Vielleicht kann er oder jemand anderes ihnen etwas hinzufügen. Wenn ja, bin ich ganz Ohr. Unterm Strich gibt es, soweit ich das beurteilen kann, nach mehr als 20 Tests mit Pingdom und GTMetrix, bei denen "Add via Queue" mit "Add via Head" in einem Testblog verglichen wurde, keinen signifikanten und konsistenten Unterschied in Bezug auf die abgestufte Leistung. Gesamtzahl der Seitenanforderungen oder Ladezeiten (z. B. "First Paint", "First Contentful Paint" und "OnLoad" bei GTMetrix) zwischen den beiden Ansätzen.

In Bezug auf das Caching können Caching-Plugins mit extern gehosteten Dateien nicht viel anfangen, unabhängig davon, ob sie der WP-Warteschlange hinzugefügt wurden oder nicht. Die Dateien selbst bleiben unberührt, und Ihre Seite generiert weiterhin eine Anfrage für jede einzelne.

Im Allgemeinen habe ich eine Vielzahl unterschiedlicher Ansätze zum Laden von Skripten und Stilen gesehen. Einige von ihnen umgehen die WP-Warteschlange teilweise oder vollständig. Es ist sicherlich denkbar, dass es Instanzen geben wird - eine Funktion, die eine Reihe von Stil-Handles verwendet und gleichzeitig verhindert, dass sie beispielsweise auf bestimmten Seiten geladen werden -, bei denen das Einreihen des Fontawesome- oder eines anderen Drittanbieter-Tags nur geringfügig nützlich ist und die erstmalige Bereitstellung von zwei Funktionen - Einreihen und Filtern - werden sich tatsächlich als sparsamer herausstellen, als nur eine zu laden.

Bei FA ist das Stylesheet bereits minimiert und wird über das eigene CDN von FA geladen. Die intrinsischen Auswirkungen auf die Leistung sind minimal. Unabhängig davon, ob sie über wp_head () oder über die Warteschlange geladen werden, werden Fehler an mehreren Stellen von Leistungsbewertungsprogrammen registriert - dieselben wie Google Page Speed ​​Insights und die oben genannten GTMetrix und Pingdom. Dadurch erhalten Sie einen Leistungspunkt, um nicht einige Bytes (nicht einmal Kilobyte) zu speichern und die eine oder andere Bilddatei erneut zu optimieren.

Das Laden über wp_head anstelle der Warteschlange kann eine Überprüfung der "richtigen Reihenfolge von Skripten und Stilen" auslösen (auch wenn Sie von einer anderen Person für das Laden der extern gehosteten Datei nach lokal gehosteten Dateien höher eingestuft werden), aber wenn Sie wirklich über das Laden besorgt sind FA auf die bestmögliche Weise für Ihre Site, dann würden Sie versuchen , die Dateien und Unterdateien lokal zu hosten, sowohl sein Stil als auch die Schriftarten, die sein Stylesheet über @ font-face aufruft. In diesem Fall können Sie das Stylesheet wie jede andere lokale Datei in die Warteschlange stellen, verketten und über ein Optimierungs-Plugin oder direkt "von Hand" kombinieren. Sie können sogar Ihre eigenen fantastischen Modifikationen von Fontawesome vornehmen und diese in Ihr Design-Stylesheet und Ihre Struktur integrieren. Oder (wie bereits kurz erwähnt) Sie können einige exotischere Taktiken zur Leistungsoptimierung ausprobieren, z. B. das Hinzufügen des CSS inline, bevor es in der Struktur einer bestimmten Seite benötigt wird.

Auf jeden Fall müssten Sie sich keine Sorgen um die neuen Tags "Integrität" und "Herkunftsübergreifend" machen, und Sie müssten sich auch keine Sorgen machen, wenn Fontawesome eines Tages vergisst, seine CDN-Rechnung zu bezahlen.

Oder Sie arbeiten an einer Site, die bereits unter der Haube völlig durcheinander ist, mit Stylesheets und Skripten, die auf jede Art und Weise geladen werden, und es ist möglicherweise einfacher, Ihre neueste Ergänzung ganz oben in der Datei functions.php zu haben, also Sie oder Der nächste Entwickler kann es leicht wiederfinden ...