WordPress设置网站动态标题

前言

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

使用教程

  • 以子比主题最新版为例)在后台主题设置—>自定义代码—>自定义javascript代码把下面的代码添加到里面即可实现。
<div class="enlighter-default enlighter-v-standard enlighter-t-bootstrap4 enlighter-hover enlighter-linenumbers enlighter-overflow-scroll">
<div class="enlighter-toolbar">
<div class="enlighter-btn enlighter-btn-raw">&nbsp;</div>
<div class="enlighter-btn enlighter-btn-copy">&nbsp;</div>
<div class="enlighter-btn enlighter-btn-window">&nbsp;</div>
</div>
<div class="enlighter">
<div class="">
<div><span class="enlighter-c0">//动态标题 </span></div>
</div>
<div class="">
<div><span class="enlighter-k2">var</span><span class="enlighter-text"> OriginTitile = </span><span class="enlighter-k9">document</span><span class="enlighter-text">.</span><span class="enlighter-m3">title</span><span class="enlighter-text">,</span></div>
</div>
<div class="">
<div><span class="enlighter-text">titleTime;</span></div>
</div>
<div class="">
<div><span class="enlighter-k9">document</span><span class="enlighter-text">.</span><span class="enlighter-m3">addEventListener</span><span class="enlighter-g1">(</span><span class="enlighter-s0">"visibilitychange"</span><span class="enlighter-text">,</span></div>
</div>
<div class="">
<div><span class="enlighter-k0">function</span><span class="enlighter-g1">(</span><span class="enlighter-g1">)</span> <span class="enlighter-g1">{</span></div>
</div>
<div class="">
<div><span class="enlighter-k1">if</span> <span class="enlighter-g1">(</span><span class="enlighter-k9">document</span><span class="enlighter-text">.</span><span class="enlighter-m3">hidden</span><span class="enlighter-g1">)</span> <span class="enlighter-g1">{</span></div>
</div>
<div class="">
<div><span class="enlighter-k9">document</span><span class="enlighter-text">.</span><span class="enlighter-m3">title</span><span class="enlighter-text"> = </span><span class="enlighter-s0">"你别走吖 Σ(っ °Д °;)っ"</span><span class="enlighter-text">;</span></div>
</div>
<div class="">
<div><span class="enlighter-m0">clearTimeout</span><span class="enlighter-g1">(</span><span class="enlighter-text">titleTime</span><span class="enlighter-g1">)</span></div>
</div>
<div class="">
<div><span class="enlighter-g1">}</span> <span class="enlighter-k1">else</span> <span class="enlighter-g1">{</span></div>
</div>
<div class="">
<div><span class="enlighter-k9">document</span><span class="enlighter-text">.</span><span class="enlighter-m3">title</span><span class="enlighter-text"> = </span><span class="enlighter-s0">"(/≧▽≦/)你又回来啦! "</span><span class="enlighter-text"> ;</span></div>
</div>
<div class="">
<div><span class="enlighter-text"> titleTime = </span><span class="enlighter-m0">setTimeout</span><span class="enlighter-g1">(</span><span class="enlighter-k0">function</span><span class="enlighter-g1">(</span><span class="enlighter-g1">)</span> <span class="enlighter-g1">{</span></div>
</div>
<div class="">
<div><span class="enlighter-k9">document</span><span class="enlighter-text">.</span><span class="enlighter-m3">title</span><span class="enlighter-text"> = OriginTitile</span></div>
</div>
<div class="">
<div><span class="enlighter-g1">}</span><span class="enlighter-text">,</span></div>
</div>
<div class="">
<div><span class="enlighter-n1">2000</span><span class="enlighter-g1">)</span></div>
</div>
<div class="">
<div><span class="enlighter-g1">}</span></div>
</div>
<div class="">
<div><span class="enlighter-g1">}</span><span class="enlighter-g1">)</span><span class="enlighter-text">;</span></div>
</div>
</div>
</div>

注:代码中“你别走吖 Σ(っ °Д °;)っ”和“(/≧▽≦/)你又回来啦!”可自行修改成自己喜欢的标题文字。

  • 如果你的网站主题设置没有自定义javascript代码这个框的话,若有自定义头部HTML代码的话,把下面的代码添加到里面也可实现。
  • 或者在首页文件位于“</hesd>”标签之前添加下面的代码也可以。
<div class="enlighter-default enlighter-v-standard enlighter-t-bootstrap4 enlighter-hover enlighter-linenumbers enlighter-overflow-scroll">
<div class="enlighter-toolbar">
<div class="enlighter-btn enlighter-btn-raw">&nbsp;</div>
<div class="enlighter-btn enlighter-btn-copy">&nbsp;</div>
<div class="enlighter-btn enlighter-btn-window">&nbsp;</div>
</div>
<div class="enlighter">
<div class="">
<div><span class="enlighter-text">&lt;script type=</span><span class="enlighter-s0">"text/javascript"</span><span class="enlighter-text">&gt;</span></div>
</div>
<div class="">
<div><span class="enlighter-c1">/* 动态标题*/</span></div>
</div>
<div class="">
<div><span class="enlighter-k2">var</span><span class="enlighter-text"> OriginTitile = </span><span class="enlighter-k9">document</span><span class="enlighter-text">.</span><span class="enlighter-m3">title</span><span class="enlighter-text">,</span></div>
</div>
<div class="">
<div><span class="enlighter-text"> titleTime;</span></div>
</div>
<div class="">
<div><span class="enlighter-k9">document</span><span class="enlighter-text">.</span><span class="enlighter-m3">addEventListener</span><span class="enlighter-g1">(</span><span class="enlighter-s0">"visibilitychange"</span><span class="enlighter-text">,</span></div>
</div>
<div class="">
<div><span class="enlighter-k0">function</span><span class="enlighter-g1">(</span><span class="enlighter-g1">)</span> <span class="enlighter-g1">{</span></div>
</div>
<div class="">
<div><span class="enlighter-k1">if</span> <span class="enlighter-g1">(</span><span class="enlighter-k9">document</span><span class="enlighter-text">.</span><span class="enlighter-m3">hidden</span><span class="enlighter-g1">)</span> <span class="enlighter-g1">{</span></div>
</div>
<div class="">
<div><span class="enlighter-k9">document</span><span class="enlighter-text">.</span><span class="enlighter-m3">title</span><span class="enlighter-text"> = </span><span class="enlighter-s0">"你别走吖 Σ(っ °Д °;)っ"</span><span class="enlighter-text">;</span></div>
</div>
<div class="">
<div><span class="enlighter-m0">clearTimeout</span><span class="enlighter-g1">(</span><span class="enlighter-text">titleTime</span><span class="enlighter-g1">)</span></div>
</div>
<div class="">
<div><span class="enlighter-g1">}</span> <span class="enlighter-k1">else</span> <span class="enlighter-g1">{</span></div>
</div>
<div class="">
<div><span class="enlighter-k9">document</span><span class="enlighter-text">.</span><span class="enlighter-m3">title</span><span class="enlighter-text"> = </span><span class="enlighter-s0">"(/≧▽≦/)你又回来啦!"</span><span class="enlighter-text"> ;</span></div>
</div>
<div class="">
<div><span class="enlighter-text"> titleTime = </span><span class="enlighter-m0">setTimeout</span><span class="enlighter-g1">(</span><span class="enlighter-k0">function</span><span class="enlighter-g1">(</span><span class="enlighter-g1">)</span> <span class="enlighter-g1">{</span></div>
</div>
<div class="">
<div><span class="enlighter-k9">document</span><span class="enlighter-text">.</span><span class="enlighter-m3">title</span><span class="enlighter-text"> = OriginTitile</span></div>
</div>
<div class="">
<div><span class="enlighter-g1">}</span><span class="enlighter-text">,</span></div>
</div>
<div class="">
<div><span class="enlighter-n1">2000</span><span class="enlighter-g1">)</span></div>
</div>
<div class="">
<div><span class="enlighter-g1">}</span></div>
</div>
<div class="">
<div><span class="enlighter-g1">}</span><span class="enlighter-g1">)</span><span class="enlighter-text">;</span></div>
</div>
<div class="">
<div><span class="enlighter-text"> &lt;/script&gt;</span></div>
</div>
</div>
</div>

注:代码中“你别走吖 Σ(っ °Д °;)っ”和“(/≧▽≦/)你又回来啦!”可自行修改成自己喜欢的标题文字。

效果截图就不演示了

温馨提示:本文最后更新于2021-07-28 11:45:18,某些文章具有时效性,若有错误或已失效,请在下方留言或联系Dream Fly
© 版权声明
THE END
喜欢就支持一下吧
点赞5
评论 抢沙发
Dream Fly的头像|Dream Fly

昵称

取消
昵称