AI摘要

本文介绍了在WordPress网站(以子比主题为例)设置动态标题的方法,通过在后台自定义JS框、头部HTML或首页文件中添加一段JavaScript代码,即可实现用户离开和返回页面时显示不同提示文字的效果,且文字可自行修改。

前言

我们经常逛别人的网站,有些网站当我们离开该页面浏览其他页面的时候,我们在离开的页面上面会看到比如本站的“歪,你去哪里了?”这样的字样,当我们点回来的时候页面上面会看到“(/≧▽≦/)咦,又回来了!”的字样。那么我们如何实现呢?其实很简单,只需一句javascript语句即可实现。请看下面的教程。

美化效果


(以子比主题最新版为例)在后台主题设置—>自定义代码—>自定义javascript代码把下面的代码添加到里面即可实现。

[hidecontent type="reply"]
//动态标题 
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        document.title = "歪,你去哪里了?";
        clearTimeout(titleTime)
    } else {
        document.title = "(/≧▽≦/)咦,又回来了! " ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
});
  • 如果你的网站主题设置没有自定义javascript代码这个框的话,若有自定义头部HTML代码的话,把下面的代码添加到里面理论也可实现。
  • 或者在首页文件位于“</hesd>”标签之前添加下面的代码也可以。
<script type="text/javascript">
      /*  动态标题*/
     var OriginTitile = document.title,
      titleTime;
     document.addEventListener("visibilitychange",
     function() {
      if (document.hidden) {
        document.title = "歪,你去哪里了?";
        clearTimeout(titleTime)
    } else {
        document.title = "(/≧▽≦/)咦,又回来了!" ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
    });
    </script>

注:代码中“歪,你去哪里了?”和“(/≧▽≦/)咦,又回来了!”可自行修改成自己喜欢的标题文字。

[/hidecontent]