当前位置：首页 > CMS教程 > 正文

WordPress如何添加选项卡？

admin
CMS教程
2025-06-18
2673

在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友好）。