wp_customize_support_script()
概述
wp_customize_support_script() 函数用于输出一个脚本，以检测 Customizer 是否被支持，并根据结果向 body 标签添加相应的 CSS 类。
关键要点
- 该函数必须在 body 标签内部调用，建议在 body 标签打开后立即调用，以避免未样式内容的闪烁。
- 默认情况下，建议在 body 标签中添加 "no-customize-support" 类。
- 函数通过比较 admin_url() 和 home_url() 的域名来判断是否跨域，并据此输出脚本。
代码示例
function wp_customize_support_script() {
$admin_origin = parse_url( admin_url() );
$home_origin = parse_url( home_url() );
$cross_domain = ( strtolower( $admin_origin['host'] ) !== strtolower( $home_origin['host'] ) );
ob_start();
?>
<script>
(function() {
var request, args = {};
if ( 'postMessage' === parent.window.name ) {
args['message'] = 'ready';
args['origin'] = '<?php echo esc_js( $cross_domain ? admin_url( 'admin-ajax.php' ) : home_url( '/' ) ); ?>';
}
try {
request = parent.window.postMessage ? 'postMessage' : 'message';
} catch( e ) {
request = 'message';
}
if ( 'postMessage' === request ) {
parent.window.postMessage( args, '*' );
} else if ( 'message' === request ) {
parent.window.location = args.origin + '?' + $.param( args );
}
})();
</script>
<?php
$output = ob_get_clean();
if ( $cross_domain ) {
echo $output;
} else {
wp_add_inline_script( 'customize-support', $output );
}
}注意事项
- 从 WordPress 5.5.0 版本开始，不再支持 IE8 及更旧版本；4.7.0 版本通过条件注释明确移除了对 IE8 及以下版本的支持。
- 函数在 3.4.0 版本中引入。
Prints a script to check whether or not the Customizer is supported, and apply either the no-customize-support or customize-support class to the body.
Description
This function MUST be called inside the body tag.
Ideally, call this function immediately after the body tag is opened.
This prevents a flash of unstyled content.
It is also recommended that you add the “no-customize-support” class to the body tag by default.
Source
function wp_customize_support_script() {
$admin_origin = parse_url( admin_url() );
$home_origin = parse_url( home_url() );
$cross_domain = ( strtolower( $admin_origin['host'] ) !== strtolower( $home_origin['host'] ) );
ob_start();
?>
<script>
(function() {
var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\s+)(no-)?'+cs+'(\s+|$)');
<?php if ( $cross_domain ) : ?>
request = (function(){ var xhr = new XMLHttpRequest(); return ('withCredentials' in xhr); })();
<?php else : ?>
request = true;
<?php endif; ?>
b[c] = b[c].replace( rcs, ' ' );
// The customizer requires postMessage and CORS (if the site is cross domain).
b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
}());
</script>
</pre><p class="wporg-dot-link-list"><a href="https://developer.wordpress.org/reference/files/wp-includes/theme.php/">View all references</a> <a href="https://core.trac.wordpress.org/browser/tags/6.9.4/src/wp-includes/theme.php#L3808">View on Trac</a> <a href="https://github.com/WordPress/wordpress-develop/blob/6.9.4/src/wp-includes/theme.php#L3808-L3831">View on GitHub</a></p></section>
<section class="wp-block-wporg-code-reference-related" data-nosnippet="true"><h2 id="related" class="is-toc-heading wp-block-heading has-heading-5-font-size" tabindex="-1" ><a href="#related">Related</a></h2> <section style="margin-top:var(--wp--preset--spacing--20)" class="wp-block-wporg-code-table" id="uses"><figure class="wp-block-table "><table><thead><tr><th scope="col">Uses</th><th scope="col">Description</th></tr></thead><tbody><tr class=""><td><a href="https://developer.wordpress.org/reference/functions/wp_remove_surrounding_empty_script_tags/">wp_remove_surrounding_empty_script_tags()</a><code>wp-includes/script-loader.php
Removes leading and trailing _empty_ script tags.
wp_print_inline_script_tag()wp-includes/script-loader.php
Prints an inline script tag.
admin_url()wp-includes/link-template.php
Retrieves the URL to the admin area for the current site.
home_url()wp-includes/link-template.php
Retrieves the URL for the current site where the front end is accessible.