函数文档

wp_enqueue_block_template_skip_link()

💡 云策文档标注

概述

wp_enqueue_block_template_skip_link() 函数用于在块主题中注册并排队跳过链接的脚本和样式,以增强可访问性。它仅在块主题和块模板条件下执行,并处理样式和脚本的注册与内联添加。

关键要点

  • 函数用于排队跳过链接的脚本和样式,支持块主题的可访问性功能。
  • 执行前检查条件:确保 the_block_template_skip_link 动作存在、当前主题支持 block-templates、且 $_wp_current_template_content 不为空。
  • 通过 wp_register_style 和 wp_add_inline_style 注册并添加内联 CSS 样式,定义跳过链接的视觉行为。
  • 使用 wp_register_script 和 wp_add_inline_script 注册并添加内联 JavaScript 脚本,处理跳过链接的交互逻辑。
  • 相关函数包括 wp_register_style、wp_add_inline_style、wp_enqueue_style、wp_register_script、wp_add_inline_script、wp_enqueue_script 等。

代码示例

// 示例:在块主题中调用此函数以启用跳过链接
if ( function_exists('wp_enqueue_block_template_skip_link') ) {
    wp_enqueue_block_template_skip_link();
}

注意事项

  • 此函数仅在 WordPress 6.4.0 及以上版本可用,引入于该版本。
  • 如果插件通过移除 the_block_template_skip_link 动作禁用了功能,函数会提前返回。
  • 样式和脚本通过内联方式添加,避免额外 HTTP 请求,但需注意 CSS 和 JavaScript 代码的维护。

📄 原文内容

Enqueues the skip-link script & styles.

Source

function wp_enqueue_block_template_skip_link() {
	global $_wp_current_template_content;

	// Back-compat for plugins that disable functionality by unhooking this action.
	if ( ! has_action( 'wp_footer', 'the_block_template_skip_link' ) ) {
		return;
	}
	remove_action( 'wp_footer', 'the_block_template_skip_link' );

	// Early exit if not a block theme.
	if ( ! current_theme_supports( 'block-templates' ) ) {
		return;
	}

	// Early exit if not a block template.
	if ( ! $_wp_current_template_content ) {
		return;
	}

	$skip_link_styles = '
		.skip-link.screen-reader-text {
			border: 0;
			clip-path: inset(50%);
			height: 1px;
			margin: -1px;
			overflow: hidden;
			padding: 0;
			position: absolute !important;
			width: 1px;
			word-wrap: normal !important;
		}

		.skip-link.screen-reader-text:focus {
			background-color: #eee;
			clip-path: none;
			color: #444;
			display: block;
			font-size: 1em;
			height: auto;
			left: 5px;
			line-height: normal;
			padding: 15px 23px 14px;
			text-decoration: none;
			top: 5px;
			width: auto;
			z-index: 100000;
		}';

	$handle = 'wp-block-template-skip-link';

	/**
	 * Print the skip-link styles.
	 */
	wp_register_style( $handle, false );
	wp_add_inline_style( $handle, $skip_link_styles );
	wp_enqueue_style( $handle );

	/**
	 * Enqueue the skip-link script.
	 */
	ob_start();
	?>
	<script>
	( function() {
		var skipLinkTarget = document.querySelector( 'main' ),
			sibling,
			skipLinkTargetID,
			skipLink;

		// Early exit if a skip-link target can't be located.
		if ( ! skipLinkTarget ) {
			return;
		}

		/*
		 * Get the site wrapper.
		 * The skip-link will be injected in the beginning of it.
		 */
		sibling = document.querySelector( '.wp-site-blocks' );

		// Early exit if the root element was not found.
		if ( ! sibling ) {
			return;
		}

		// Get the skip-link target's ID, and generate one if it doesn't exist.
		skipLinkTargetID = skipLinkTarget.id;
		if ( ! skipLinkTargetID ) {
			skipLinkTargetID = 'wp--skip-link--target';
			skipLinkTarget.id = skipLinkTargetID;
		}

		// Create the skip link.
		skipLink = document.createElement( 'a' );
		skipLink.classList.add( 'skip-link', 'screen-reader-text' );
		skipLink.id = 'wp-skip-link';
		skipLink.href = '#' + skipLinkTargetID;
		skipLink.innerText = '<?php /* translators: Hidden accessibility text. Do not use HTML entities ( , etc.). */ esc_html_e( 'Skip to content' ); ?>';

		// Inject the skip link.
		sibling.parentElement.insertBefore( skipLink, sibling );
	}() );
	</script>
	 true ) );
	wp_add_inline_script( $script_handle, $skip_link_script );
	wp_enqueue_script( $script_handle );
}

Changelog

Version Description
6.4.0 Introduced.