wordpress知更鸟主题添加评论者操作系统、浏览器和运营商信息

一般来说,想显示评论者的操作系统和浏览器只需要一个插件WP-UserAgent即可,但是很多用户不仅足于只显示这两个,同时还想要有运营商的信息,本文将做介绍。效果如下图

wordpress知更鸟主题添加评论者操作系统、浏览器和运营商信息

第一步、部署文件

1、下载show-useragent文件

链接:http://pan.baidu.com/s/1jIDlahK 密码: fj7e

 

2、解压压缩包,将里面的show-useragent文件夹一并上传到正在用的WordPress主题目录;

 

3、下载ip2c文件

链接: http://pan.baidu.com/s/1jHASQTg 密码: gmgs

 

4、解压压缩包,将里面的show-useragent文件夹一并上传到正在用的WordPress主题目录;

 

第二步、引用文件

将以下代码放到主题目录下的functions.php

  1. include("ip2c/ip2c.php"); //IP归属地和运营商查询功能
  2. include("show-useragent/show-useragent.php");  //显示国籍、系统、浏览器信息

 

第三步、显示位置添加

现在我们只需要将以下代码放到指定位置,他就能显示了。就知更鸟begin主题而言,在begin/inc/function/comment-template文件内(这里顺便补充一下,那个“博主”的位置在begin/inc/function/function.php,大家找位置的时候可以通过一些专业的编程工具,比如phpstorm),找到

  1. <span class="comment-meta commentmetadata">

在它的下面添加以下代码

  1. <span  class="ua-info">
  2.     <?php
  3.             CID_print_comment_flag();/*国籍*/
  4.             echo ' ';/*空格*/
  5.             CID_print_comment_browser();/*浏览器*/
  6.             echo convertip(get_comment_author_ip());/*运营商*/
  7.      ?>
  8. </span>

如图

wordpress知更鸟主题添加评论者操作系统、浏览器和运营商信息

 

如果你的图标显示位置不是很好,可以加以下两行css代码调整

  1. /*调整留言者系统浏览器和运营商位置*/
  2. .ua-info {
  3.     margin-left30px;
  4. }
  5. .WB-OS img {
  6.     vertical-align: -3px;
  7. }

 

至此我们已经完美配置成功,再次感谢张戈博客提供资源。

如果下载链接失效,请在下方留言,或者联系博主,我会在第一时间更新链接

 

本文地址永久更新:http://liuyanzhao.com/3128.html

转载请注明

 

  • 微信
  • 赶快加我聊天吧
  • weinxin
  • 博客交流群
  • 海纳百川,大家来水
  • weinxin
言曌

发表评论

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

目前评论:15   其中:访客  12   博主  3

    • avatar 木禾谷

      你好,我安装的主题没有评论功能有办法解决吗??亲 :grin:

      • avatar 492487176

        方法可用,谢谢

        • avatar 蚁贼君

          不知道为什么,这个运营商什么的一直出错,无法显示

            • avatar 言曌  博主

              @蚁贼君 代码加的不对,不要完全复制我那个代码,要根据div的id或者class来改

                • avatar 蚁贼君

                  @言曌 不是样式的问题,是代码错误了,在那个位置之后是一串错误代码

              • avatar 游歌

                博主厉害!

                • avatar 福利吧

                  完全技术 宅啊!!!!厉害!!!

                  • avatar a949404480

                    看看

                    • avatar 凌枫

                      学习一下,这评论也很酷炫啊 – –

                      • avatar 朱曙明博客

                        之前弄了许久 没用弄成功~~借用你和这个试试

                        • avatar fnenlen

                          自定义CSS
                          #cms-widget-two
                          .hot_article ul {
                          padding:10px 15px
                          }
                          .about-img img {
                          width:110px
                          }
                          .WB-OS img {
                          width:14px;
                          height:auto;
                          vertical-align:-6%
                          }
                          .flags {
                          display:none
                          }

                          @media screen and (min-width:900px) {
                          .comment-body:hover
                          .flags {
                          display:inline;
                          animation:fade-in;
                          animation-duration:.3s;
                          -webkit-animation:fade-in .3s
                          }
                          }

                          改成

                          • avatar 吃货小栈

                            这个感觉只有鸟哥的主题用起来最般配了!