WordPress添加文章页面访问次数+美化

2019-07-2716:36:09 8 156

其实这个功能就是在文章侧边栏加入一个统计代码就可以进行实现,去看你博客这里只是将原有的单调统计文字加入图片中美化,下面先看看效果吧!

美化效果

WordPress添加文章页面访问次数+美化

PC端可以直接右侧看效果

博主用的是知更鸟主题,所以只需要将下面的代码放入文章页面的侧边工具栏中即可!

  1. <script type="text/javascript"">
  2.             if(localStorage.pagecount){localStorage.pagecount=Number(localStorage.pagecount)+1}else{localStorage.pagecount=1}document.write("你是第"+localStorage.pagecount+"次打开去看你博客文章页面!"); </script>

以上为简单的统计代码,下面为博主美化后的代码。

  1. <div class="img-group"><img src="https://www.7kanni.cn/wp-content/uploads/2019/07/2019072708133271.jpg"><div class="img-tip"><script type="text/javascript"">
  2.             if(localStorage.pagecount){localStorage.pagecount=Number(localStorage.pagecount)+1}else{localStorage.pagecount=1}document.write("你是第"+localStorage.pagecount+"次打开去看你博客文章页面!"); </script></div></div>
  3. <style type="text/css">
  4. .img-group {  position: relative;  display: inline-block;}        .img-tip {  position: absolute;  bottom: 0;  background: #333;  color: #fff;  opacity: 0.6; width: 100%;  text-align: center;}
  5. </style>

其实需要的朋友还可以用来做其他的扩展,比如:

  1. 给图片加上链接,可以做为“给我投稿”入口
  2. 图片太过于单调,利用图片接口可以每次更换背景图片

博主这里就简单的加入一些样式,做个统计效果就好了 :razz:

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:8   其中:访客  5   博主  3

    • avatar 南瓜IT 谷歌浏览器 Windows 7 0

      这个不错!

        • avatar vijay 博主 QQ浏览器 Windows 10

          @南瓜IT 喜欢就好。

        • avatar 张波博客 谷歌浏览器 Windows 10 2

          我现在使用鸟的原始版了,不作任何修改

            • avatar vijay 博主 Safari浏览器 iPhone iPhone OS 12_2 like Mac OS X) AppleWebKit

              @张波博客 哈哈😄,折腾一下还是不错的。

            • avatar boke112导航 谷歌浏览器 Windows 7 4

              多一个提示也不错,不过作用估计不大,估计投放站内的图片广告会更有用

                • avatar vijay 博主 Safari浏览器 iPhone iPhone OS 12_2 like Mac OS X) AppleWebKit

                  @boke112导航 小站投放广告收益不高,作为一个投稿入口还是可以的

                • avatar wordpress建站吧 谷歌浏览器 Windows 10 4

                  就怕折腾出未知的bug

                  • avatar 值品 谷歌浏览器 Windows 10 2

                    能折腾是好事,知道自己要啥更是重要。