打造更强文章导航体验！WordPress 页面添加“目录 + 标签云”组合展示教程

2025-06-15
9:33 上午
高级教程

在内容为王的时代，一篇高质量的 WordPress 文章页面，不仅要有扎实的内容，还需要优质的阅读体验。而“目录 + 标签云”的组合展示，无疑是提升用户体验的绝佳利器：

📚目录帮助读者快速定位阅读章节，提升浏览效率
☁️标签云则增强了文章关联性与站内探索的可能性

今天这篇教程将教你如何在 WordPress 页面中，实现“目录 + 标签云”的双剑合璧，让你的内容更具结构、更富探索性！

🎯为什么要在页面中加入“目录+标签云”？

✅目录（Table of Contents）好处：

提高长篇文章的可读性
增强 SEO（搜索引擎喜欢有结构的内容）
支持锚点跳转，提升跳出率指标

✅标签云（Tag Cloud）好处：

展示热门话题，鼓励用户探索
提升内部链接结构，间接提高 SEO
适合聚合专题，便于用户在站内快速获取更多内容

🛠实现方式概览

我们将通过以下几步实现该功能：

安装目录插件或自定义目录结构
使用 WordPress 原生 wp_tag_cloud() 展示标签云
创建一个专属页面或模板，融合两者内容
优化样式 & 响应式布局

1️⃣ 添加目录功能（TOC）

2️⃣ 显示标签云

标签云的代码非常简单，你可以在页面模板或使用代码块插入以下内容：

<?php
wp_tag_cloud([
    'smallest'  => 10,
    'largest'   => 22,
    'unit'      => 'px',
    'number'    => 30,
    'format'    => 'flat',
    'orderby'   => 'count',
    'order'     => 'DESC',
    'taxonomy'  => 'post_tag',
]);
?>

🔧提示：你可以通过 CSS 为标签云加上 hover 效果、颜色分级等视觉样式，提升吸引力。

3️⃣ 在 WordPress 页面中组合展示

✅方式一：短代码组合（适合非开发者）

页面编辑器中插入：

<!-- 插入目录 -->
[lwptoc]

<!-- 插入标签云 -->
<?php echo do_shortcode('[your_tag_cloud_shortcode]'); ?>

注意：部分主题或编辑器可能不支持 PHP 代码，推荐借助插件如 Insert PHP Code Snippet。

✅方式二：自定义页面模板（适合开发者）

你可以创建一个新的模板文件如 page-toc-tags.php：

<?php
/* Template Name: 目录标签页面 */
get_header();
?>

<div class="container">
  <h1><?php the_title(); ?></h1>

  <!-- 输出目录 -->
  <?php echo do_shortcode('[lwptoc]'); ?>

  <!-- 输出页面内容 -->
  <div class="page-content">
    <?php while (have_posts()) : the_post(); the_content(); endwhile; ?>
  </div>

  <!-- 输出标签云 -->
  <div class="tag-cloud">
    <h2>热门标签</h2>
    <?php wp_tag_cloud([
        'smallest'  => 10,
        'largest'   => 20,
        'number'    => 40,
        'orderby'   => 'count',
        'order'     => 'DESC'
    ]); ?>
  </div>
</div>

<?php get_footer(); ?>

然后在后台新建一个页面，选择“目录标签页面”模板即可。

💡样式优化建议（可选）

你可以加上一些简单的 CSS 来优化标签云的样式：

.tag-cloud a {
  display: inline-block;
  margin: 6px;
  padding: 4px 8px;
  background: #f3f4f6;
  color: #111827;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-decoration: none;
}
.tag-cloud a:hover {
  background: #2563eb;
  color: #fff;
}