相关文章推荐：引导访客继续阅读

功能简介

相关文章推荐会在单篇文章结尾自动追加一个「相关推荐」区块，按当前文章的标签 / 分类匹配出若干篇相似文章，并以卡片形式展示，引导访客继续阅读。

如何开启

进入 WordPress 后台 → 「Vela主题设置」页面的「功能开关」分区 → 找到「相关文章推荐」→ 勾选启用并保存。

效果与适用场景

• 优先按标签匹配，标签不足时回退到同分类。
• 默认展示 6 篇，无相关文章时自动隐藏。
• 有效提升页面停留时间与内链权重。

备注

仅在单篇文章页追加；关闭开关后不再输出推荐区块。

实现代码

以下为「相关文章推荐」的核心实现（取自 modules/related.php 与 features.css）。

<?php
/**
 * 相关文章推荐模块（modules/related.php）
 * 在单篇文章末尾追加按标签 / 分类匹配的相关文章卡片。
 */
add_filter('the_content', 'vela_related_posts_append');
function vela_related_posts_append($content) {
    if (!vela_feature_enabled('related')) {
        return $content;
    }
    if (!is_singular('post')) {
        return $content;
    }

    $post_id = get_the_ID();
    $tags    = wp_get_post_tags($post_id, array('fields' => 'ids'));
    $cat_ids = wp_get_post_categories($post_id, array('fields' => 'ids'));

    $args = array(
        'post_type'           => 'post',
        'posts_per_page'      => 6,
        'post__not_in'        => array($post_id),
        'ignore_sticky_posts' => true,
        'orderby'             => 'rand',
    );
    if (!empty($tags)) {
        $args['tag__in'] = $tags;
    } elseif (!empty($cat_ids)) {
        $args['category__in'] = $cat_ids;
    } else {
        return $content;
    }

    $query = new WP_Query($args);
    if (!$query->have_posts()) {
        wp_reset_postdata();
        return $content;
    }

    $fallback = 'data:image/svg+xml;utf8,' . urlencode('<svg xmlns="http://www.w3.org/2000/svg" width="300" height="160"><rect width="100%" height="100%" fill="#eef1f6"/></svg>');
    $html = '<div class="vela-related"><div class="vela-related__title">相关推荐</div><div class="vela-related__grid">';
    while ($query->have_posts()) {
        $query->the_post();
        $id    = get_the_ID();
        $thumb = get_the_post_thumbnail_url($id, 'medium');
        $html .= '<a class="vela-related__item" href="' . esc_url(get_permalink()) . '">';
        $html .= '<img class="vela-related__thumb" src="' . esc_url($thumb ? $thumb : $fallback) . '" alt="' . esc_attr(get_the_title()) . '">';
        $html .= '<div class="vela-related__name">' . esc_html(get_the_title()) . '</div>';
        $html .= '</a>';
    }
    wp_reset_postdata();
    $html .= '</div></div>';

    return $content . $html;
}

/* 相关文章推荐（features.css 片段） */
.vela-related { margin: 32px 0 8px; padding: 20px; background: #f7f9fc; border-radius: 12px; }
.vela-related__title { font-size: 17px; font-weight: 600; margin-bottom: 14px; color: #222; }
.vela-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vela-related__item {
    display: block; background: #fff; border: 1px solid #eee; border-radius: 10px;
    overflow: hidden; text-decoration: none; color: #333;
    transition: box-shadow .2s ease, transform .2s ease;
}
.vela-related__item:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .1); transform: translateY(-2px); }
.vela-related__thumb { width: 100%; height: 120px; object-fit: cover; background: #eef1f6; display: block; }
.vela-related__name { padding: 10px 12px; font-size: 13px; line-height: 1.5; }
@media (max-width: 768px) { .vela-related__grid { grid-template-columns: repeat(2, 1fr); } }

通过 the_content 过滤器在正文后追加卡片；优先按标签、回退按分类匹配，无相关文章时直接返回原文。