将属性添加到通过 wp_register_style 生成的 link 标记？

Question

我原来的问题在这里得到了回答：Google Fonts giving: No 'Access-Control-Allow-Origin' header is present on the requested resource.

有没有办法将 data-noprefix 属性添加到我的 Google 字体 link 标签中？

我的 functions.php 看起来像这样：

wp_register_script( 'prefixfree', get_template_directory_uri().'/js/prefixfree.min.js', array( 'jquery' ) );
wp_enqueue_script( 'prefixfree' );

wp_register_style( 'google-fonts', 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic', '', '', 'all' );
wp_enqueue_style( 'google-fonts' );

Answer 1

这对我有用：

add_filter( 'style_loader_tag', 'add_noprefix_attribute', 10, 2 );

function add_noprefix_attribute($link, $handle) {
    if( $handle === 'google-fonts' ) {
        $link = str_replace( '/>', 'data-noprefix />', $link );
    }
    return $link;
}

Answer 2

style_loader_tag 是官方的 WordPress API，参见文档：https://developer.wordpress.org/reference/hooks/style_loader_tag/

apply_filters( 'style_loader_tag', $html, $handle, $href, $media )
Filters the HTML link tag of an enqueued style.

首先，将样式表加入队列
有关详细信息，请参阅文档：https://developer.wordpress.org/reference/functions/wp_enqueue_style/

function add_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( 'wp_enqueue_scripts', 'add_styles' );

$handle是'font-awesome-5'
我做 null 所以没有版本号。这样它将被缓存。

简单字符串替换
一个简单的 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 )
Filters the HTML script tag of an enqueued script.

下面是一个延迟单个脚本的示例

function add_defer_jquery( $tag, $handle ) {
    if ( 'jquery' === $handle ) {
        return str_replace( "src", "defer src", $tag );
    }
    return $tag;
}
add_filter( 'style_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_tag 和 script_loader_tag。我为两个 API 都提供了一些示例，我希望这对很多人都有用。我有两个 API 的经验。

将属性添加到通过 wp_register_style 生成的 link 标记？

Add attribute to link tag that's generated through wp_register_style?

css

php

wordpress

prefixfree