web-dev-qa-db-ja.com

スタイルシートのリンクに追加の属性を追加する方法

Keith Clarksのアドバイスに従う 、私は自分のフォントを非同期にロードしたい。私はそれを追加することによってそれを達成しようとします：

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

私のscripts.phpファイルに追加されましたが、どうやらonload属性がないため、この引数はその関数ではうまく処理されません。 WordPressでそれをどのように正しく行うことができますか？

wp-enqueue-stylestylesheetattribute
4
Anna Oleksiuk

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

ここで属性を追加したいリンク$ handleはfont-awesomeですので、ハンドルの場合はfont-awesome-cssを追加情報に置き換えることができます。

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

私はあなたの両方を本当に理解していますが、次の キース・クラークのアドバイス は別の悪い習慣に従っていることを指摘したいと思います。また、これは2016年に質問および回答され、ほとんどのことが良くも悪くも変わることを理解しています。

スタイルシートを遅らせる必要がある場合は、次のことをお勧めします。

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



完全性とクロスオリジン （
Font Awesome 5を外部から追加する場合は、 integrity および crossorigin を使用することもお勧めします。属性の追加に関する詳細については、他の回答を参照してください。- wp_register_styleにcrossoriginと整合性を追加するには？（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