讲师中心 微信公众号
AI工具推荐 视频效率加速

如何禁用 WordPress 区块主题默认的跳转链接(skip-link)输出

雨墨大大_8471

雨墨大大_8471

发布时间:2026-03-31 11:49:03

|

804人浏览过

|

来源于php中文网

原创

如何禁用 WordPress 区块主题默认的跳转链接(skip-link)输出

本文详解如何通过 remove_action() 正确移除 wordpress 区块主题中由 the_block_template_skip_link() 自动注入的跳转链接及其配套样式与脚本,避免重复添加,为自定义跳转链接预留干净环境。

本文详解如何通过 remove_action() 正确移除 wordpress 区块主题中由 the_block_template_skip_link() 自动注入的跳转链接及其配套样式与脚本,避免重复添加,为自定义跳转链接预留干净环境。

在使用 WordPress 区块主题(Block Theme)时,核心函数 the_block_template_skip_link() 会自动在页面底部(wp_footer 钩子)输出一段用于无障碍访问的「跳转到内容」(Skip to Content)功能代码——包括内联 CSS 样式、JavaScript 注入逻辑,以及动态生成的 标签。该机制虽符合 WCAG 标准,但其硬编码结构(如固定 href="#content"、不可配置的文案、无容器包裹)常与主题定制需求冲突。

值得注意的是:该函数并非挂载在 wp_body_open 或 init,而是注册于 wp_footer 钩子。这是许多开发者尝试 remove_action( 'wp_body_open', ... ) 失败的根本原因。其 JavaScript 逻辑会主动查找 .wp-site-blocks 元素,并将生成的

✅ 正确移除方式如下(推荐添加至当前主题的 functions.php):

Wordpress OAuth
Wordpress OAuth

启动并完成 WordPress.com OAuth 认证,通过 REST API 发布文章。适用于需要生成授权链接、交换授权码等场景。

下载
// 在主题 setup 后或 init 晚期移除默认 skip-link 输出
add_action( 'init', function() {
    remove_action( 'wp_footer', 'the_block_template_skip_link' );
}, 20 );

? 为什么是 wp_footer?
查阅 WordPress 官方源码 可知,the_block_template_skip_link() 是通过 add_action( 'wp_footer', 'the_block_template_skip_link' ) 注册的(通常在 wp-includes/template-loader.php 或主题初始化流程中触发)。因此必须对应 wp_footer 钩子才能精准解绑。

移除后,即可安全添加您完全可控的自定义跳转链接,例如:

// 注册自定义 skip-link(建议挂载到 wp_body_open,确保语义位置正确)
add_action( 'wp_body_open', 'custom_skip_link' );
function custom_skip_link() {
    echo '<div class="skip-link-container">';
    echo '<a class="skip-link screen-reader-text" href="#content">Skip to Content</a>';
    echo '</div>';
}

? 关键注意事项:

  • ✅ 必须使用 remove_action( 'wp_footer', 'the_block_template_skip_link' ) —— 其他钩子(如 wp_body_open, init)均无效;
  • ✅ 建议将 remove_action 放在 init 钩子(优先级 ≥11)或更晚时机,确保 WordPress 已完成默认动作注册;
  • ✅ 若同时使用经典主题(非区块主题),该函数不会执行(因依赖 current_theme_supports('block-templates')),无需额外判断;
  • ⚠️ 切勿依赖 jQuery 移除(如 $('a.skip-link').remove()),这属于运行时补救,无法阻止资源加载、影响 LCP 等核心 Web Vitals 指标;
  • ✅ 自定义实现时,请保留 screen-reader-text 类及对应 CSS(或复用 WordPress 默认 .screen-reader-text 规则),确保无障碍兼容性。

总结:掌握 WordPress 钩子的实际注册位置比“视觉表现位置”更重要。通过精准定位 wp_footer 并解除绑定,您既能满足无障碍合规要求,又能获得对跳转链接结构、文案、容器和样式的完整控制权——这是专业主题开发中兼顾标准与灵活性的关键实践。

热门AI工具

更多
Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

码上飞
码上飞 Hot

一款基于自然语言的AI应用开发平台,可根据用户描述自动生成应用程序,帮助个人和团队快速完成应用原型与开发。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

更多
php文件怎么打开
php文件怎么打开

打开php文件步骤:1、选择文本编辑器;2、在选择的文本编辑器中,创建一个新的文件,并将其保存为.php文件;3、在创建的PHP文件中,编写PHP代码;4、要在本地计算机上运行PHP文件,需要设置一个服务器环境;5、安装服务器环境后,需要将PHP文件放入服务器目录中;6、一旦将PHP文件放入服务器目录中,就可以通过浏览器来运行它。

12124

2023.09.01

php怎么取出数组的前几个元素
php怎么取出数组的前几个元素

取出php数组的前几个元素的方法有使用array_slice()函数、使用array_splice()函数、使用循环遍历、使用array_slice()函数和array_values()函数等。本专题为大家提供php数组相关的文章、下载、课程内容,供大家免费下载体验。

6941

2023.10.11

php反序列化失败怎么办
php反序列化失败怎么办

php反序列化失败的解决办法检查序列化数据。检查类定义、检查错误日志、更新PHP版本和应用安全措施等。本专题为大家提供php反序列化相关的文章、下载、课程内容,供大家免费下载体验。

2215

2023.10.11

php怎么连接mssql数据库
php怎么连接mssql数据库

连接方法:1、通过mssql_系列函数;2、通过sqlsrv_系列函数;3、通过odbc方式连接;4、通过PDO方式;5、通过COM方式连接。想了解php怎么连接mssql数据库的详细内容,可以访问下面的文章。

4408

2023.10.23

php连接mssql数据库的方法
php连接mssql数据库的方法

php连接mssql数据库的方法有使用PHP的MSSQL扩展、使用PDO等。想了解更多php连接mssql数据库相关内容,可以阅读本专题下面的文章。

5134

2023.10.23

html怎么上传
html怎么上传

html通过使用HTML表单、JavaScript和PHP上传。更多关于html的问题详细请看本专题下面的文章。php中文网欢迎大家前来学习。

4031

2023.11.03

PHP出现乱码怎么解决
PHP出现乱码怎么解决

PHP出现乱码可以通过修改PHP文件头部的字符编码设置、检查PHP文件的编码格式、检查数据库连接设置和检查HTML页面的字符编码设置来解决。更多关于php乱码的问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

5817

2023.11.09

php文件怎么在手机上打开
php文件怎么在手机上打开

php文件在手机上打开需要在手机上搭建一个能够运行php的服务器环境,并将php文件上传到服务器上。再在手机上的浏览器中输入服务器的IP地址或域名,加上php文件的路径,即可打开php文件并查看其内容。更多关于php相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

4562

2023.11.13

Docker Desktop怎么设置端口映射
Docker Desktop怎么设置端口映射

本专题聚焦Docker Desktop容器端口映射与访问配置,整理从创建容器、设置端口绑定到验证本地服务访问的操作流程。针对端口被占用、映射配置错误、容器服务无法访问等情况,也提供相应的检查方向,方便用户完成端口配置。

0

2026.11.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
如何在 Windows 11 上安装 XAMPP
如何在 Windows 11 上安装 XAMPP

共1课时 | 232人学习

第二十三期_前端开发
第二十三期_前端开发

共98课时 | 12万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn