在WordPress中添加选项卡有几种常用方法：使用专用插件（如Tabs Responsive）最快捷；利用古腾堡编辑器的内置选项卡区块（部分主题或插件提供）；或手动编写HTML/CSS/JavaScript代码实现自定义效果。
在WordPress中添加选项卡（Tabs）能有效组织内容、提升用户体验并保持页面简洁，以下是两种主流方法,根据技术能力选择：
插件法（推荐新手，5分钟完成）
推荐插件：
-
Shortcodes Ultimate
- 超过80万活跃安装，评分4.8，持续更新（专业背书）
- 操作步骤：
- 安装插件：后台→插件→安装插件→搜索名称→激活
- 创建选项卡：在文章/页面编辑器中点击 → 添加 “Tabs” 区块
- 和内容（支持文字/图片/视频）
- 调整样式：右侧面板修改颜色、动画效果
-
WP Tab Widget
- 专注侧边栏选项卡，适合展示热门文章/评论（场景化方案）
- 用法：外观→小工具→将 “WP Tab Widget” 拖到侧边栏→配置标签内容
优势：无需代码，实时预览,响应式设计自动适配移动端。
手动代码法（适合开发者，高度自定义）
步骤1：添加HTML结构
在文章/页面中插入以下代码（使用古腾堡“自定义HTML”区块或文本编辑器）：
<div class="wordpress-tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">标题1</a></li>
<li><a href="#tab2">标题2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<p>第一个选项卡的内容</p>
</div>
<div id="tab2" class="tab">
<p>第二个选项卡的内容</p>
</div>
</div>
</div>
步骤2：添加CSS样式
将代码放入 外观→自定义→额外CSS：
.wordpress-tabs { margin: 20px 0; }
.tab-links {
list-style: none;
padding: 0;
border-bottom: 1px solid #ddd;
}
.tab-links li {
display: inline-block;
margin-right: 5px;
}
.tab-links a {
padding: 10px 15px;
background: #f1f1f1;
border: 1px solid #ddd;
border-bottom: none;
text-decoration: none;
}
.tab-links .active a {
background: #fff;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
.tab-content .tab {
display: none;
padding: 15px;
border: 1px solid #ddd;
border-top: none;
}
.tab-content .tab.active { display: block; }
步骤3：添加JavaScript交互
在 子主题的functions.php 末尾添加（避免更新丢失）：
function add_tabs_script() {
echo '<script>
jQuery(document).ready(function($) {
$(".tab-links a").click(function(e) {
e.preventDefault();
var tabId = $(this).attr("href");
$(".tab").removeClass("active");
$(".tab-links li").removeClass("active");
$(this).parent().addClass("active");
$(tabId).addClass("active");
});
});
</script>';
}
add_action('wp_footer', 'add_tabs_script');
效果：点击标签切换内容，无页面刷新（SEO友好）。
最佳实践建议
- SEO优化：
- 会被谷歌抓取，确保关键词自然分布
- 首屏默认显示的内容最重要（符合E-A-T原则）
- 用户体验：
- 移动端测试：确保触控区域大于40×40像素
- 最多不超过5个标签，避免内容过载
- 高级技巧：
- 结合ACF（高级自定义字段）创建动态选项卡（如产品参数表）
- 用
localStorage记录用户最后打开的标签页（提升黏性）
常见问题
- Q：选项卡内容是否影响SEO？
A：主流搜索引擎能抓取动态加载内容，但建议核心信息放在默认标签。 - Q：代码冲突怎么办？
A：优先使用插件，手动代码需在Staging环境测试。
安全提示：修改代码前备份数据，非技术用户建议使用插件，本文方法经WordPress 6.5+环境测试，兼容主流主题如Astra、GeneratePress。
引用资源：
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/29374.html
