如何在WordPress中实现带图片的前后页导航按钮？

方法1：利用原生函数参数自定义输出 #

WordPress的previous_post_link()和next_post_link()支持自定义链接内容，直接把图片作为链接主体即可，不用额外嵌套<a>标签避免结构冲突：

<div class="post-navigation">
    <?php
    // 上一篇文章导航：替换为你的图标URL和alt文本
    previous_post_link(
        '<div class="nav-item nav-prev">%link</div>',
        '<img src="你的上一页图标路径" alt="上一篇文章" class="nav-icon">'
    );
    // 下一篇文章导航
    next_post_link(
        '<div class="nav-item nav-next">%link</div>',
        '<img src="你的下一页图标路径" alt="下一篇文章" class="nav-icon">'
    );
    ?>
</div>

这里的%link会被WordPress自动替换为包含正确文章链接的<a>标签，仅需将第二个参数设置为图片标签即可。

方法2：手动获取文章信息构建链接 #

如果需要更灵活的结构控制，可直接获取前后文章的ID和链接，手动搭建导航：

<div class="post-navigation">
    <?php
    $prev_post = get_previous_post();
    if (!empty($prev_post)) {
        echo '<a href="' . get_permalink($prev_post->ID) . '" class="nav-item nav-prev">';
        echo '<img src="你的上一页图标路径" alt="上一篇文章" class="nav-icon">';
        echo '</a>';
    }

    $next_post = get_next_post();
    if (!empty($next_post)) {
        echo '<a href="' . get_permalink($next_post->ID) . '" class="nav-item nav-next">';
        echo '<img src="你的下一页图标路径" alt="下一篇文章" class="nav-icon">';
        echo '</a>';
    }
    ?>
</div>

样式优化（可选） #

添加CSS调整布局和交互效果：

.post-navigation {
    display: flex;
    justify-content: space-between;
    margin: 2rem 0;
}
.nav-icon {
    width: 40px;
    height: 40px;
    transition: opacity 0.3s ease;
}
.nav-icon:hover {
    opacity: 0.7;
}

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