辣鱼

以下是创建 WordPress 标签页模板 的完整指南，包含代码和分步说明。我们将通过创建自定义页面模板实现标签切换功能。

一、创建标签页模板文件

步骤 1：新建模板文件

在 WordPress 主题目录中（建议使用子主题）创建文件：
wp-content/themes/your-theme/tabs-template.php

<?php
/**
 * Template Name: 标签页模板
 * Description: 支持内容标签切换的页面模板
 */
get_header(); ?>

<div class="tabs-container">
  <!-- 标签导航 -->
  <ul class="tabs-nav">
    <?php
    // 获取页面内容中的标签标题
    preg_match_all('/<h2>(.*?)<\/h2>/', $post->post_content, $matches);
    foreach ($matches[1] as $index => $title) :
    ?>
      <li class="<?php echo $index === 0 ? 'active' : ''; ?>">
        <a href="#tab-<?php echo $index + 1; ?>"><?php echo esc_html($title); ?></a>
      </li>
    <?php endforeach; ?>
  </ul>

  <!-- 标签内容 -->
  <div class="tabs-content">
    <?php
    // 分割内容为多个标签页
    $sections = preg_split('/<h2>.*?<\/h2>/', $post->post_content);
    array_shift($sections); // 移除第一个空元素

    foreach ($sections as $index => $content) :
    ?>
      <div id="tab-<?php echo $index + 1; ?>" class="tab-pane <?php echo $index === 0 ? 'active' : ''; ?>">
        <?php echo apply_filters('the_content', $content); ?>
      </div>
    <?php endforeach; ?>
  </div>
</div>

<?php get_footer(); ?>

二、添加样式和交互脚本

步骤 2：添加 CSS 样式

在主题的 style.css 或独立 CSS 文件中添加：

/* 标签容器 */
.tabs-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 导航样式 */
.tabs-nav {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: flex;
  gap: 15px;
  border-bottom: 2px solid #eee;
}

.tabs-nav li {
  margin: 0;
}

.tabs-nav a {
  display: block;
  padding: 12px 25px;
  background: #f5f5f5;
  color: #333;
  text-decoration: none;
  border-radius: 4px 4px 0 0;
  transition: all 0.3s;
}

.tabs-nav a:hover,
.tabs-nav .active a {
  background: #0073aa;
  color: white;
}

/* 内容区域 */
.tab-pane {
  display: none;
  padding: 20px;
  animation: fadeIn 0.3s;
}

.tab-pane.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

步骤 3：添加 JavaScript

在主题的 js 目录中创建 tabs.js 并添加：

document.addEventListener('DOMContentLoaded', function() {
  // 标签切换功能
  document.querySelectorAll('.tabs-nav a').forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      
      // 移除所有激活状态
      document.querySelectorAll('.tabs-nav li, .tab-pane').forEach(el => {
        el.classList.remove('active');
      });

      // 添加当前激活状态
      this.parentElement.classList.add('active');
      document.querySelector(this.getAttribute('href')).classList.add('active');
    });
  });
});

在 functions.php 中引入脚本：

 function enqueue_tabs_scripts() { wp_enqueue_script( 'tabs-js', get_stylesheet_directory_uri() . '/js/tabs.js', array(), '1.0', true ); } add_action('wp_enqueue_scripts', 'enqueue_tabs_scripts');

三、使用模板

步骤 4：创建标签页内容

1. 新建 WordPress 页面 → 选择 “标签页模板”
2. 按以下格式编辑内容：

<h2>标签1标题</h2>
这里是标签1的内容

<h2>标签2标题</h2>
这里是标签2的内容

<h2>标签3标题</h2>
这里是标签3的内容

四、高级功能扩展

1. 短代码支持（可选）

在 functions.php 中添加：

function tabs_shortcode($atts, $content = null) {
  return '<div class="custom-tabs">' . do_shortcode($content) . '</div>';
}
add_shortcode('tabs', 'tabs_shortcode');

function tab_shortcode($atts, $content = null) {
  $atts = shortcode_atts(array(
    'title' => '标签'
  ), $atts);
  
  return '<div class="tab" data-title="' . esc_attr($atts['title']) . '">' 
         . apply_filters('the_content', $content) 
         . '</div>';
}
add_shortcode('tab', 'tab_shortcode');

使用方式：

[tabs]
  [tab title="标签1"]内容1[/tab]
  [tab title="标签2"]内容2[/tab]
[/tabs]

2. 响应式优化

添加移动端样式：

@media (max-width: 768px) {
  .tabs-nav {
    flex-direction: column;
  }
  
  .tabs-nav a {
    border-radius: 4px;
    margin-bottom: 5px;
  }
}

五、效果展示

注意事项

1. 主题兼容性：确保使用的主题支持自定义模板
2. 内容格式：必须严格使用 <h2> 作为标签分隔符
3. 安全验证：在生产环境中建议添加 nonce 验证
4. 缓存问题：修改模板后可能需要清除缓存

通过以上步骤，你可以创建一个功能完善且美观的 WordPress 标签页模板。如需更复杂的交互，可以考虑集成 Tabby.js 等专用库。