WordPress实现页面加载数秒后跳转首页如何正确调用home_url()

API 探路者

2026-10-7

问题原因

home_url()是WordPress的服务端PHP函数，无法直接在客户端运行的JavaScript代码中调用，浏览器不能识别该PHP函数，所以无法正确获取到首页地址。

解决方法

分两种常用实现场景：

场景1：直接在页面模板中嵌入JS代码

把以下代码添加到你需要生效的WordPress页面模板（如page.php、自定义页面模板，或者主题的页脚模板footer.php）中即可：

<script type="text/javascript">
function Redirect() {
    // 通过PHP输出转义后的首页地址给JS调用
    window.location.href = '<?php echo esc_js(home_url()); ?>';
}
// 监听页面加载完成事件后再启动计时器
window.addEventListener('load', function() {
    // 4000为延迟毫秒数，对应4秒，可自行修改数值调整延迟时长
    setTimeout(Redirect, 4000);
});
</script>

场景2：在独立JS文件中实现该功能

如果需要把跳转逻辑写在独立的JS文件中，需要先通过WordPress的变量本地化方法把PHP生成的首页地址传给JS：

先在主题的functions.php文件中添加以下代码，注册脚本并传递参数：

function custom_redirect_script_loader() {
    // 注册独立JS文件，示例路径为主题目录下的/js/redirect.js，可自行修改路径
    wp_enqueue_script('custom-redirect-script', get_template_directory_uri() . '/js/redirect.js', array(), '1.0', true);
    // 把首页地址作为变量传递给JS
    wp_localize_script('custom-redirect-script', 'custom_site_params', array(
        'home_url' => esc_url(home_url())
    ));
}
add_action('wp_enqueue_scripts', 'custom_redirect_script_loader');

然后在对应的redirect.js文件中写跳转逻辑：

function Redirect() {
    window.location.href = custom_site_params.home_url;
}
window.addEventListener('load', function() {
    setTimeout(Redirect, 4000);
});