WordPress如何获取单篇文章链接 点击按钮跳转single.php实现问题

错误原因 #

• onclick 属性调用逻辑错误：onclick 需传入可执行的JS代码，直接放跳转链接无法触发跳转动作，需要搭配location.href实现页面跳转
• WordPress 函数未输出：get_permalink()、get_the_post_thumbnail() 均为返回值类型函数，需要加echo才能把内容渲染到前端页面
• 缩略图调用方式错误：get_the_post_thumbnail() 本身返回完整的<img>标签，不能直接填入src属性，需改用get_the_post_thumbnail_url()获取图片地址

修复后完整代码 #

<div class="recepies-search">
    <div class="card m-1" style="width: 18rem;">
        <!-- 修复缩略图调用逻辑 -->
        <img class="card-img-top" src="<?php echo get_the_post_thumbnail_url(); ?>" >
        <div class="card-body">
            <h5 class="card-title"><?php the_title(); ?></h5>
            <!-- 修复按钮跳转逻辑 -->
            <button type="button" class="btn btn-warning" onclick="location.href='<?php echo get_permalink(); ?>'">click</button>
        </div>
    </div>
</div>

可选优化方案 #

如果不需要强制保留button标签，也可以直接用a标签实现跳转，兼容性更好，无需依赖JS执行：

<a href="<?php echo get_permalink(); ?>" class="btn btn-warning">click</a>

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