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

10

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.

Pipo
quelle
Danke @JacobPeattie, die Frage ist etwas anders, aber die Antwort könnte in diesem Fall zutreffen. Wie auch immer, es stammt aus dem Jahr 2016, vielleicht gibt es jetzt einen Weg, der weniger hackig erscheint ...
Pipo
@Pipo Ich bin ein WordPress-Entwickler und habe ein paar WordPress-Plugins erstellt. Ich verwende style_loader_tag und script_loader_tag häufig, um benutzerdefinierte Ladevorgänge durchzuführen. Sogar das Hinzufügen von Defer und Async zu meinen Skript-Tags. Sehen Sie eines meiner Open-Source-Plugins: github.com/Remzi1993/wp-jquery-manager
Remzi Cavdar
@Pipo Du hattest auch recht. Der andere Beitrag ist veraltet und das würde nicht mehr funktionieren. In meinem ersten Beispiel habe ich gezeigt, wie Sie dies mit einem einfachen String-Ersatz tun können. Ich habe auch ein bisschen mehr Informationen
eingegeben
@JacobPeattie Könnten Sie einen Blick darauf werfen? Ich könnte einige Grammatikfehler haben, Englisch ist meine zweite Sprache
Remzi Cavdar

Antworten:

15

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/

Remzi Cavdar
quelle
@Pipo Gern geschehen :)
Remzi Cavdar
RC - Ich denke, Ihre Antwort könnte insgesamt eine bessere WordPress-Praxis sein als meine (obwohl ich mehr Nachforschungen über das Einreihen von extern gehosteten Skripten und Dateien anstellen möchte). Dennoch denke ich, wir sollten uns über unsere Rechtfertigungen im Klaren sein und sie nicht überbieten und auch anerkennen, dass die richtige Antwort für die Einbeziehung von Diensten Dritter in verschiedenen Kontexten variieren kann. In diesem Sinne ist die andere Antwort, die übrigens keiner von uns in Betracht gezogen hat, die Verwendung eines guten Plug-Ins - wie Better Font Awesome für FA, da sie möglicherweise Aktualisierungen und andere Aufgaben gut erledigen.
CK MacLeod
Ja, Sie haben Recht mit der Verwendung eines Plugins für FA. Ich weiß nur nicht, ob dies auch bevorzugt wird, wenn Entwickler ein WP-Thema erstellen. Normalerweise möchten Sie alles in Ihr Thema aufnehmen und so viele Plugins wie möglich verwenden.
Remzi Cavdar
Überprüfen Sie diese Lösungen, stackoverflow.com/questions/44827134/…
Gnanasekaran Loganathan
0

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 ...

CK MacLeod
quelle
Ich bin auch neugierig, was ist der Nachteil, wenn man es so macht oder es direkt einer Themendatei hinzufügt?
Jersh
Vielen Dank für Ihren Standpunkt. Das einzige ist, dass Ihre Lösung viele Minify- und Caching-Plugins vereiteln wird. Wie: wordpress.org/plugins/fast-velocity-minify , wordpress.org/plugins/wp-fastest-cache und etca ....
Remzi Cavdar
1
Die anderen Plugins können die Stylesheets und Skripte bearbeiten, wenn sie ordnungsgemäß in die Warteschlange gestellt wurden. Wenn Sie Ihren Code direkt in den Kopf einfügen, können diese Plugins keinen Cache mit der richtigen Reihenfolge minimieren, kombinieren und erstellen.
Remzi Cavdar
Remzi Cavdar: Vielen Dank für Ihre Antwort, aber bevor ich meine Antwort bearbeite und die von Ihnen aufgeworfenen Fragen ausführlich anspreche, frage ich mich, ob Sie Beispiele dafür speziell in Bezug auf Fontawesome oder allgemein in Bezug auf andere Stylesheets wie dieses haben bereits minimiert und extern gehostet.
CK MacLeod
1
Der "WordPress-Weg" gewährleistet maximale Kompatibilität mit Plugins. Egal, ob Sie Dinge von CDN abrufen oder den Link für bestimmte Seiten entfernen möchten, es wird auf Ihre Weise einfach nicht möglich sein, ohne den Code tatsächlich zu bearbeiten. +1 für das Stehen für Ihre Überzeugungen, aber als Antwort hier ist es ein -1
Mark Kaplun