相关文章

在文章中显示带样式的相关文章列表，并控制输出方式、卡片布局与视觉设计。

概览

相关文章 会根据已建立的内容索引与分类法关系显示相关文章，目的是在读者看完当前页面后，继续引导他们探索网站其他内容。

后台路径：Airygen SEO -> 设置 -> 相关文章

这个模块依赖 链接建议，因为它会使用该模块的内容索引，并且文章类型范围也会与那边同步。

输出方式

相关文章 同时支持手动放置与自动插入。

手动输出

当你希望自行决定显示位置时，请使用手动输出。

  • 当你希望把相关文章放进主题模板时，模板函数 最适合。
  • 当你希望把相关文章放进内容区时，简码 最适合。
  • 当你希望在编辑器中可视化插入时，区块 会提供简码区块包装方式。

模板函数：

<?php if ( function_exists( 'airygen_the_related_posts' ) ) { airygen_the_related_posts(); } ?>

简码：

[airygen_related_posts]

区块：

<!-- wp:shortcode -->
[airygen_related_posts]
<!-- /wp:shortcode -->

自动插入

当你希望符合条件的内容自动出现相关文章时，请使用自动插入。

  • 自动插入切换会把相关文章自动放进符合条件的内容。
  • 插入位置 支持 内容前 与 内容后。

如果你同时使用手动输出与自动插入，请在正式页面确认相关文章没有重复出现。

设置

此页面分为 设置、布局 与 预览。

设置 分页

这个分页用来决定相关文章如何显示，以及允许在哪些内容中输出。

手动输出

  • 手动输出切换可启用简码、区块与模板函数的相关文章输出。
  • 模板函数 最适合放进主题模板。
  • 简码 最适合放进内容区。
  • 区块 提供可插入编辑器的简码区块包装方式。

自动插入

  • 自动插入切换会自动把相关文章放进符合条件的内容。
  • 插入位置 支持 内容前 与 内容后。

区块标题

  • 区块标题控制可让你开启标题、设置标题文字，以及选择标题层级。

范围

  • 要包含的文章类型 会从 链接建议 同步。
  • 这个范围在此页面仅供参考，无法直接在 相关文章 页面中编辑。

布局 分页

这个分页用来控制卡片结构与样式。

网格与卡片排列

  • 2 x 2、3 x 2、4 x 2、4 x 1 与 1 x 4 可设置网格密度。
  • 文章卡片模板 可让你选择 模板 1 或 模板 2。
  • 可见区块可在 标头、主体、左侧边栏 与 页脚 区域之间拖动。
  • 页脚栏数 支持 1 栏、2 栏 与 3 栏。
  • 隐藏区块 用来存放当前不显示的区块。
  • 可用区块包含 特色图片、标题、摘要、作者 与 日期。

主题与样式

  • 主题默认包含 雪板岩、蜂蜜纸、天空微风、薄荷冷静、玫瑰腮红 与 薰衣草雾。
  • 网格样式控制可调整边框宽度、边框样式、圆角、边框颜色、背景色、内距与间距。
  • 文章容器样式控制可调整边框宽度、边框样式、圆角、边框颜色、背景色、内距与间距。
  • 特色图片 设置包含 图片尺寸 与 图片圆角。
  • 标题 设置包含字号、字色，以及粗体或斜体样式。
  • 摘要 设置包含字号、字色、最大字符数、渐隐遮罩、遮罩颜色 与 遮罩高度。
  • 作者与日期 设置包含字号、字色，以及粗体或斜体样式。
  • 标头 标题控制可让你把区块标题样式与卡片本身分开设置。

预览 分页

这个分页可让你在 笔记本电脑、平板电脑 与 手机 预览中检查模块结果。

  • 预览会使用示例卡片与当前的布局设置。
  • 页面也会显示生成的 HTML 与 CSS 示例供参考。

预览与正式输出

预览 会显示示例卡片与你当前的配置，适合先检查布局与样式方向。

  • 预览可让你快速比较不同设备上的卡片密度与文字可读性。
  • 预览反映的是当前布局、卡片模板与样式设置。
  • 预览中的卡片不是你的真实文章，也不代表实际前台一定会找到完全相同的相关文章。

正式网站仍可能与预览不同。

  • 真实输出取决于当前文章是否有足够的相关文章可供显示。
  • 最终外观仍会受到启用中的主题、页面 CSS 与周边布局影响。
  • 如果同时启用手动输出与自动插入，正式页面可能会重复显示相关文章。

保存后请实际检查正式文章页面，确认显示位置、卡片数量、内容相关性与样式都符合预期。

如何使用

  1. 先确认 链接建议 已启用，因为 相关文章 依赖这个模块。
  2. 打开 Airygen SEO -> 设置 -> 相关文章。
  3. 在 设置 分页中，决定要使用手动输出、自动插入，或只保留其中一种方式。
  4. 如果你要手动放置，请复制符合工作流的 模板函数、简码 或 区块 片段。
  5. 如果你要自动放置，请开启自动插入并选择 插入位置。
  6. 如果你希望相关文章列表上方有可见标题，请开启区块标题，并设置文字与标题层级。
  7. 打开 布局，选择一组网格预设与 文章卡片模板。
  8. 在可见区块间拖动 特色图片、标题、摘要、作者 与 日期，并把不需要的项目移到 隐藏区块。
  9. 设置 页脚栏数，再调整主题、容器样式与各卡片元素文字样式。
  10. 打开 预览，切换不同设备，确认布局在小屏幕上仍然清楚易读。
  11. 保存模块后，检查一篇真实文章，确认最终位置与样式。

保存后请确认以下项目：

  • 链接建议 已启用，且当前文章类型在范围内。
  • 正式页面上的相关文章只出现一次。
  • 卡片版型符合你想要的内容密度与设计。
  • 真实相关内容在主题 CSS 载入后仍呈现正确。

SEO 效益

相关文章链接能帮助访客持续探索网站，也能为搜索引擎建立更多语义相关页面之间的内部路径。这会让重要内容更容易被发现，也更容易留在同一主题旅程中。

使用场景

想加强内容回流的出版网站

调整前：读者看完一篇文章后就离开，因为页面中没有清楚的下一步可点。

调整后：相关文章 会加入看起来像经过整理的相关文章组合，让读者更容易继续探索网站内容。

拥有大量 evergreen 文章的大型博客

调整前：旧文章除非编辑手动逐篇加链接，否则很容易被埋没。

调整后：相关文章 会利用已建立的内容关系数据，在每篇文章开头或结尾显示有价值的下一步链接。

常见问题

为什么我的页面没有显示 相关文章？

请检查 链接建议 是否已启用、当前文章类型是否在范围内，以及你是否已选择手动输出或自动插入其中之一。

我可以控制每张卡片元素显示在哪里吗？

可以。布局 分页可让你把 特色图片、标题、摘要、作者 与 日期 拖动到不同区域。

为什么预览和正式页面可能不同？

预览使用的是示例卡片与当前布局设置，但真实页面仍会受主题样式，以及该文章实际找到的相关文章影响。