云策 WordPress 开发者社区

钩子文档

style_loader_tag

查看官方原文 ↗
💡 云策文档标注

概述

style_loader_tag 是一个 WordPress 过滤器，用于修改已入队样式表的 HTML link 标签。它允许开发者自定义样式标签的属性或内容，例如添加子资源完整性检查或调整加载行为。

关键要点

  • 过滤器名称：style_loader_tag，用于过滤样式表的 link 标签。
  • 参数：$tag（标签字符串）、$handle（样式句柄）、$href（样式表 URL）、$media（媒体属性）。
  • 用途：可修改样式标签以优化性能、增强安全性或适应特定需求。
  • 版本历史：从 WordPress 2.6.0 引入，4.3.0 添加 $href 参数，4.5.0 添加 $media 参数。

代码示例

// 示例1：移除特定样式标签的 HTTPS 协议
add_filter( 'style_loader_tag', 'wpdocs_remove_https_styles', 10, 2 );
function wpdocs_remove_https_styles( $html, $handle ) {
    $handles = array( 'twentysixteen-fonts', 'open-sans' );
    if ( in_array( $handle, $handles ) ) {
        $html = str_replace( 'https:', '', $html );
    }
    return $html;
}

// 示例2：延迟加载非关键 CSS
function prefix_defer_css_rel_preload( $html, $handle, $href, $media ) {
    if ( ! is_admin() ) {
        $html = '<link rel="preload" as="style" href="' . $href . '" media="' . $media . '" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="' . $href . '" media="' . $media . '"></noscript>';
    }
    return $html;
}
add_filter( 'style_loader_tag', 'prefix_defer_css_rel_preload', 10, 4 );

// 示例3：添加子资源完整性检查
function wpdocs_style_subresource_integrity( string $html, string $handle ): string {
    if ( 'select2' !== $handle ) {
        return $html;
    }
    $tags = new WP_HTML_Tag_Processor( $html );
    if ( false === $tags->next_tag( 'link' ) ) {
        return $html;
    }
    $tags->set_attribute( 'integrity', 'sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==' );
    $tags->set_attribute( 'crossorigin', 'anonymous' );
    return $tags->get_updated_html();
}
add_filter( 'style_loader_tag', 'wpdocs_style_subresource_integrity', 10, 2 );

注意事项

  • 使用此过滤器时需注意参数顺序和数量，确保回调函数正确接收参数。
  • 在修改样式标签时，应避免破坏原有功能，如确保 URL 和媒体属性正确。
  • 对于安全性增强（如 SRI），需确保哈希值准确且来源可靠。
📄 原文内容

Filters the HTML link tag of an enqueued style.

Parameters

$tagstring
The link tag for the enqueued style.
$handlestring
The style’s registered handle.
$hrefstring
The stylesheet’s source URL.
$mediastring
The stylesheet’s media attribute.

Source

$tag = apply_filters( 'style_loader_tag', $tag, $handle, $href, $media );

View all references View on Trac View on GitHub

Used by Description
WP_Styles::do_item()wp-includes/class-wp-styles.php

Processes a style dependency.

Changelog

Version Description
4.5.0 Introduced the $media parameter.
4.3.0 Introduced the $href parameter.
2.6.0 Introduced.

User Contributed Notes

  1. Skip to note 4 content


    Muhammad Usama Masood


    You must log in to vote on the helpfulness of this noteVote results for this note: 2You must log in to vote on the helpfulness of this note

    This simple change will make your browser call the Google Font page in the applicable mode (HTTP vs HTTPS) with wp_enqueue_style.

    add_filter( 'style_loader_tag', 'wpdocs_remove_https_styles', 10, 2 );
function wpdocs_remove_https_styles( $html, $handle ) {
	$handles = array( 'twentysixteen-fonts', 'open-sans' );
	if ( in_array( $handle, $handles ) ) {
		$html = str_replace( 'https:', '', $html );
	}
	return $html;
}

  2. Skip to note 5 content


    Geoffrey Brossard


    You must log in to vote on the helpfulness of this noteVote results for this note: 1You must log in to vote on the helpfulness of this note

    To defer loading of non-critical CSS :

    function prefix_defer_css_rel_preload( $html, $handle, $href, $media ) {
    if ( ! is_admin() ) {
        $html = '<link rel="preload" href="' . $href . '" as="style" id="' . $handle . '" media="' . $media . '" onload="this.onload=null;this.rel='stylesheet'">'
            . '<noscript>' . $html . '</noscript>';
    }
    return $html;
}
add_filter( 'style_loader_tag', 'prefix_defer_css_rel_preload', 10, 4 );

  3. Skip to note 6 content


    Matt Radford


    You must log in to vote on the helpfulness of this noteVote results for this note: 1You must log in to vote on the helpfulness of this note

    If you want to harden your website against supply chain attacks, you can use this filter to add Subresource integrity checking to an enqueued style.

    For example, for Select2 style v4.0.9 from cdnjs.com, you would copy the SRI hash from https://cdnjs.com/libraries/select2/4.0.9, and add it as an attribute to the style. Then check for the select2 handle and that it’s a link, before adding the SRI attributes.

    This function uses the WP_HTML_Tag_Processor class introduced in WordPress 6.2.

    You can add SRI to an enqueued script in a similar way: https://developer.wordpress.org/reference/hooks/wp_script_attributes/#comment-6783

    /**
 * Add Subresource Integrity check to CDNJS style.
 *
 * @param string  $html   Style  html.
 * @param string  $handle WordPress style handle.
 *
 * @return string $html   Style  html.
 */
function wpdocs_style_subresource_integrity( string $html, string $handle ): string {
	if ( 'select2' !== $handle ) {
		return $html;
	}

	$tags = new WP_HTML_Tag_Processor( $html );

	if ( false === $tags->next_tag( 'link' ) ) {
		return $html;
	}

	$tags->set_attribute( 'integrity', 'sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==' );
	$tags->set_attribute( 'crossorigin', 'anonymous' );

	return $tags->get_updated_html();
}
add_filter( 'style_loader_tag', 'wpdocs_style_subresource_integrity', 10, 2 );