wake-up-neo.net

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

Ich aktualisiere Font Awesome 4 auf Version 5, die dem <link rel="stylesheet">-Markup sowohl Integritäts- als auch Crossorigin-Attribute hinzufügt.

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 eingeführt (integrity und crossorigin), z. B .:

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

Ich muss also herausfinden, wie ich sowohl die Integrität als auch das Crossorigin zu wp_register_style hinzufügen kann. Ich habe versucht, aber meine Versuche, wp_style_add_data zu verwenden, sind gescheitert. Es scheint, dass diese Methode nur conditional, rtl und suffix, alt und title unterstützt.

7
Pipo

style_loader_tag
style_loader_tag ist eine offizielle WordPress-API, siehe 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 eingereihten Stils.


Rufen Sie zuerst Ihr Stylesheet auf, 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 );

Der $handle ist 'font-awesome-5'
Ich null, damit es keine Versionsnummer gibt. Auf diese Weise wird es zwischengespeichert.

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


Verschiedene Attribute hinzufügen
Nachfolgend 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 );


Attribute zu allen Stilen hinzufügen
Unten ein Beispiel, um die gleichen Attribute zu mehr als einem Stylesheet hinzuzufügen

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 auch 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 Skripts in der Warteschlange.


Nachfolgend ein Beispiel, um ein einzelnes Skript aufzuschieben

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


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

Deshalb habe ich die beiden APIs style_loader_tag und script_loader_tag erklärt. 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 klärt die Dinge. Wir sind meistens auf der gleichen Seite. Wie gesagt, ich bin ein WordPress-Entwickler und wenn Sie ein Theme und/oder ein Plugin unter https://wordpress.org veröffentlichen möchten, müssen Sie im Wesentlichen die " WordPress Coding Standards "oder sie lehnen einfach dein Theme und/oder Plugin ab.

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

Und noch 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 haben, die Dinge einfach in das Kopf in das Thema und/oder wiederholte sie. Die meisten Caching-Plugins, die auch (meistens) 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. Aus diesem Grund ermutige ich die Leute, unter Berücksichtigung von Standards/Konventionen zu programmieren.

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

EDIT
@ CKMacLeod Vielen Dank für die (technische) Debatte, ich hoffe, dass Sie erkennen, wie wichtig dies ist (Verwendung 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 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/ -sowie Dateien aus derselben Domain (sofern in den Einstellungen nicht anders angegeben).

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

13
Remzi Cavdar