web-dev-qa-db-ja.com

クロスオリジンと整合性をwp_register_styleに追加するにはどうすればいいですか? (フォント素晴らしい5)

私はFont Awesome 4をバージョン5にアップグレードしています。これは<link rel="stylesheet">マークアップに保全性とcrossorigin属性の両方を導入します。

現在、私は使っています:

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

次のように出力されます。

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

Font Awesome 5では、2つの新しい属性と値(integritycrossorigin)が導入されました。例:

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

それで、私はどうやって整合性とcrossoriginの両方をwp_register_styleに加えることができるかを調べる必要があります、私は試みましたがwp_style_add_dataを使う試みは失敗しました、それはこのメソッドはconditionalrtlそしてsuffixalttitleだけをサポートするようです。

7
Pipo

style_loader_tag
style_loader_tagは公式のWordPress APIです。ドキュメントを参照してください。 https://developer.wordpress.org/reference/hooks/style_loader_tag/

apply_filters( 'style_loader_tag', $html, $handle, $href, $media )
キューに入れられたスタイルのHTMLリンクタグをフィルタリングします。


最初にスタイルシートをエンキューします。ドキュメントを参照してください。 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 );

$handle'font-awesome-5'です
バージョン番号がないようにnullをします。このようにしてキャッシュされます。

単純str_replace
単純なstr_replaceはあなたが望むものを達成するのに十分です。以下の例を参照してください

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


さまざまな属性を追加
以下は、(複数の)異なるスタイルシートに異なる属性を追加する例です。

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


すべてのスタイルに属性を追加します
以下は、同じ属性を複数のスタイルシートに追加する例です。

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
script_loader_tagについても説明したいのですが、これも便利ですが、このAPIは wp_enqueue_script と組み合わせて機能します。

script_loader_tag APIはほとんど同じですが、若干の違いがあります。ドキュメントを参照してください。 https://developer.wordpress.org/reference/hooks/script_loader_tag/

apply_filters( 'script_loader_tag', $tag, $handle, $src )
キューに入れられたスクリプトのHTMLスクリプトタグをフィルタリングします。


単一のスクリプトを延期する例の下

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


複数のスクリプトを延期する例の下

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

だから私は両方のAPIのstyle_loader_tagscript_loader_tagを説明しました。そして、両方のAPIの例をいくつか挙げました。これは、多くの人にとって役に立つことを願っています。私は両方のAPIの経験があります。


_ update _
@ CKMacLeod情報を更新していただきありがとうございます。私たちはほとんど同じページにいます。私が言ったように、私はWordPressの開発者であり、 https://wordpress.org にテーマやプラグインを公開したいのであれば、基本的に " WordPress)を遵守することを余儀なくされます。コーディング規約 "または、彼らは単にあなたのテーマやプラグインを拒否します。

だからこそ、私はそこにいる開発者に "WordPressのやり方"を使うように勧めています。私は時々まったく違いがないことを理解していますが、それも便利です。あなた自身が言ったように、Font Awesomeをダウンロードしてあなたのテーマやプラグインあるいはその両方に含めることができます。この方法ではstyle_loader_tag関数を削除してwp_enqueue_style関数を修正するだけです。

そして最後の1つ、過去(5年前)のプラグインのキャッシング、結合、縮小はうまくいきませんでした。そしてほとんどの場合、テーマを作った開発者たちが単純に物事を整理する理由を見つけました。テーマに向かって、そして/またはそれらをエコーし​​ました。ほとんどのキャッシングプラグインは、(ほとんどの場合)スクリプトの実行を組み合わせ、縮小し、実行を遅らせるオプションを提供しています。しかしこれは好ましくありません。そのため、私は人々が標準や規約を念頭に置いてコードを書くことを推奨します。

開発者として、あなたは常に他の人があなたのコードで何をすることができるのか、そして互換性を念頭に置くことを考慮に入れる必要があります。だから簡単な解決策ではなく、最善の最適な解決策を取ってください。私は自分の見解を明確にしたことを願っています。

_編集_
@ CKMacLeod(技術的)議論をありがとうございます。これが(WordPress APIを自分の開発に使用することで)どれほど重要かを理解していただきたいと思います。繰り返しになりますが、私はよく見ていますが、今でもよく見られるのは、よくあるミニファイプラグインのよくある質問です。たとえば、次のようにします。

質問: 一部のCSSファイルとJSファイルがマージされないのはなぜですか。
回答: このプラグインは、公式のWordPress APIメソッドを使用してエンキューされたJSおよびCSSファイルのみを処理します - https://developer.wordpress.org/themes/basics/including-css- javascript / - 同じドメインからのファイルと同様に(設定で指定されていない限り)。

よくある質問を参照してください。 https://wordpress.org/plugins/fast-velocity-minify /

13
Remzi Cavdar