经常在别的网站上看到这样一个小功能,就是当我切换浏览器标签到别的网页上去的时候,之前浏览的网页会自动改变浏览器的标签,让我回到之前的网页上,这种做法非常有趣也可以在一定程度上减少网站跳出率,增加用户粘性。
我们可以使用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的操作,不过这种功能蛮有趣的。
以下是在我网站上的实现示例:
本文作者:StubbornHuang
版权声明:本文为站长原创文章,如果转载请注明原文链接!
原文标题:WordPress – 切换标签离开页面时修改网站title对用户进行提示
原文链接:https://www.stubbornhuang.com/2626/
发布于:2023年05月24日 10:06:32
修改于:2023年05月24日 10:06:32
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论
51