WordPress自定义主题如何按最佳实践添加Read More按钮

失效原因排查 #

你提供的代码无输出，90%以上的概率是放置位置不符合WordPress模板逻辑：

• 代码没有放在文章主循环内部，get_permalink()必须在have_posts()的循环结构中调用才能获取到当前文章的链接
• 代码被添加到了单文章模板single.php中，单篇文章页本身不需要跳转链接，即使输出也没有意义
• 你自定义的.r_more类被CSS设置了隐藏，可以通过浏览器开发者工具检查DOM是否存在对应元素

符合WordPress规范+Bootstrap 5样式的最佳实现 #

方案1：全局过滤器配置（推荐，无需修改多个模板文件） #

直接在主题的functions.php中添加如下代码，全局适配the_content()自带的more标签逻辑，自动适配Bootstrap 5按钮样式：

add_filter( 'the_content_more_link', 'custom_bs5_read_more', 10, 2 );
function custom_bs5_read_more( $more_link, $more_link_text ) {
    // 可自行修改btn后的类名切换Bootstrap按钮样式，比如btn-secondary、btn-outline-primary
    return sprintf(
        '<a href="%s" class="btn btn-primary r_more" target="_blank">Read More...</a>',
        esc_url( get_permalink() )
    );
}

配置后直接在列表模板的循环内调用the_content( 'Read More' )即可自动渲染按钮，同时支持编辑器中插入<!--more-->自定义截断位置。

方案2：模板内手动插入 #

如果你使用the_excerpt()输出摘要，直接在循环内the_excerpt()调用后添加如下代码即可：

<?php if ( ! is_single() ) : ?>
    <a href="<?php echo esc_url( get_permalink() ); ?>" class="btn btn-primary r_more" target="_blank">Read More...</a>
<?php endif; ?>

额外注意事项 #

• 所有输出的URL必须用esc_url()做转义，符合WordPress编码安全规范，避免XSS漏洞
• 可以直接复用Bootstrap原生的按钮类，无需额外编写基础样式，如需自定义效果再补充.r_more的CSS规则即可

内容的提问来源于stack exchange，提问作者Anpace