WordPress – 切换标签离开页面时修改网站title对用户进行提示

经常在别的网站上看到这样一个小功能，就是当我切换浏览器标签到别的网页上去的时候，之前浏览的网页会自动改变浏览器的标签，让我回到之前的网页上，这种做法非常有趣也可以在一定程度上减少网站跳出率，增加用户粘性。

我们可以使用document.addEventListener监听visibilitychange事件，当当前网页被隐藏时就修改title提示用户赶紧回来。

具体的实现方案是在当前主题的footer.php的</body>标签前加入以下的js代码，或者使用wp_footer钩子挂载。

<script>
    document.addEventListener('visibilitychange', function () {
    if (document.visibilityState == 'hidden') {
        normal_title = document.title;
        document.title = '别走，快回来！';//替换为你想要的即可
    } else document.title = normal_title;
});
</script>

使用wp_footer挂载的方式如下

add_action('wp_footer', function() {
  ?>
  <script>
    document.addEventListener('visibilitychange', function () {
    if (document.visibilityState == 'hidden') {
        normal_title = document.title;
        document.title = '别走，快回来！';//替换为你想要的即可
    } else document.title = normal_title;
  });
  </script>

 <?php
}, );

这一种的比较简单，当离开当前网页页被隐藏时显示别走，快回来，当网页正常显示时就实现正常的title。

还有一个更加复杂的方案，

var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        document.title = '大佬，快回来~ ' + OriginTitile;
        clearTimeout(titleTime);
    }
    else {
        document.title = '大佬，想死你了~ ' + OriginTitile;
        titleTime = setTimeout(function() {
            document.title = OriginTitile;
        }, 2000);
    }
});

当离开当前网页页被隐藏时显示大佬，快回来~，当网页重新显示时先显示两秒大佬，想死你了~ ，然后再显示正常的title。

这种功能说到底还是js的操作，不过这种功能蛮有趣的。

以下是在我网站上的实现示例：