小鹿学院 > SEM营销 > 资讯正文
wordpress免插件实现添加留言者国家,操作系统,浏览器等信息(自用详细教程)
2018-01-11 17:46 小鹿推广

小鹿系列竞价软件覆盖百度、360、搜狗、神马四大搜索平台,采用独创的竞价算法,智能精准出价,一键批量查排名,根据关键词位置实时调整出价,降低出价虚高,稳定排名,节省企业预算。

小鹿竞价软件专题介绍:https://www.xiaolutg.com/bidding/fengchao?ref=menu

看别人博客的时候,留言者后面会显示留言者的国家,操作系统,浏览器等信息,感觉特别酷,所以搬来个免插件实现添加留言者国家,操作系统,浏览器等信息的教程。

(自用)方法一:

第一步:下载文件

隐藏的内容

密码:wmtk

蓝奏云:https://www.lanzous.com/i18ay6j

第二步:上传

将下载好的文件打开,里面会有两个压缩包,分别解压,并上传两个解压好的文件到主题目录下。

第三步:引用文件

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

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

第四步:添加显示位置

现在我们只需要将以下代码放到指定位置,就可以显示了。本站使用的知更鸟,在begin/inc/function/comment-template文件内(这里顺便补充一下,那个“博主”的位置在begin/inc/function/function.php里面),找到

  1. <spanclass=“comment-metacommentmetadata”>

在其下添加以下代码就可以了

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

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

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

通过以上几步就简单的实现了免插件实现添加留言者国家,操作系统,浏览器等信息。

方法二:

分享WordPress显示评论者IP的归属地及运营商信息的2种方案

(自用)方法三:(根据方法一的基础上优化,增加鼠标悬浮隐藏效果,优化调整留言者系统浏览器和运营商位置)

跟方法一的前三步是一样的,

一、添加显示位置

现在我们只需要将以下代码放到指定位置,就可以显示了。本站使用的知更鸟,在begin/inc/function/comment-template文件内,找到

  1. <spanclass=“comment-metacommentmetadata”>

在其下添加以下代码就可以了

  1. <spanid=“comment_ua_info”class=“comment_ua_info”style=“white-space:nowrap;overflow:hidden;display:none;”>
  2. <?phpecho‘&nbsp;&nbsp;&nbsp;’;CID_print_comment_flag();echo‘‘;CID_print_comment_browser();?>
  3. <?phpecho“<spanid=’ua-info-text’style=’font-size:14px;font-weight:normal;color:#aaa;’>”;echoconvertip(get_comment_author_ip());echo“</span>”;?>
  4. </span>

简单解释:

<span id=”comment_ua_info” … > 包含IP归属地、浏览器,以及文本信息等,目的是为后面鼠标悬浮显示时使用,js实现显示和隐藏效果

CID_print_comment_flag()显示IP归属地的国旗

CID_print_comment_browser()显示浏览器和用户设备

convertip(get_comment_author_ip()) 显示IP归属地的文本信息

至此,显示评论者信息已经实现了

如果想看效果,先把id=”comment_ua_info”中的样式display:none;去掉,就可以看到效果了

二. 添加代码到 footer.php

初看步骤4的效果还不错,但是看上去信息会很多,颜色等有点乱,于是想追求极致,还需要继续努力

为了实现鼠标悬浮在评论框才显示的效果,我们需要结合js实现,添加js代码到主题下的footer.php中

footer.php

添加js代码

[reply]

  1. <!–commentua-info–>
  2. <script>
  3. jQuery(‘.comment-body’).hover(
  4. function(){
  5. jQuery(this).find(‘span.comment_ua_info’).show();
  6. },
  7. function(){
  8. jQuery(this).find(‘span.comment_ua_info’).hide();
  9. });
  10. jQuery(‘.comment-body’).click(
  11. function(){
  12. jQuery(this).find(‘span.comment_ua_info’).show();
  13. });
  14. </script>

[/reply]

如果显示和隐藏效果相反,则在在对应主题style.css文件内或自定义CSS处,加以下css代码调整

  1. .ua-info{
  2. display:none;/*设置隐藏*/
  3. margin-left:8px;
  4. }

说明:

1)jQuery(‘.comment-body’).hover 悬浮事件,主要用于PC电脑端,但是手机端没有悬浮事件

2)jQuery(‘.comment-body’).click 点击事件,主要用于手机端,点击可以显示,但需要注意click事件里不要加hide,否则在电脑端与hover相冲突

3)span.comment_ua_info 标签,是在步骤1中特别说明的,记得要把id=”comment_ua_info”中的样式设置为display:none;默认不显示ua-info信息

至此,评论者IP归属地等信息默认是隐藏了,只有当鼠标悬浮在评论框时才会显示出来。

到这里就可以结束了。

还有一种效果就是按钮显示评论也加上:

按钮显示评论所有IP

上面的功能,在一些博客里都已实现,我的米扑博客只是把人家的效果,用代码实现分享出来

最后,奉献一点小创新,个人感觉还是比较实用的,就是添加一个按钮,能够一键显示所有IP

恩,你说的对,步骤4早已经实现了,折腾出步骤5的隐藏IP,现在步骤6又整出一键显示所有IP,闲的蛋疼,哈

恩,蛋疼也好,折腾也罢,也要搞出来,微创新嘛,直接上代码和步骤啦

1) 修改评论文件 comments.php(或者这个comment-template)

进入主题目录,修改评论文件 comments.php

comments.php(或者这里

  1. <spanclass=“comment-metacommentmetadata”>

添加一行用于显示的按钮按钮放哪儿,由你自己决定了)

  1. <spanid=“comment_show_ip”class=“comment_show_ip”style=“color:blue;font-size:14px;”>显示评论IP</span>

2) 添加js代码到 footer.php

进入主题目录,修改页脚文件 footer.php

footer.php

添加js代码如下:

  1. <script>
  2. jQuery(“.comment_show_ip”).click(function(){
  3. if(jQuery(“.comment_show_ip”).text()==“显示评论IP”){
  4. jQuery(“.comment_ua_info”).show();
  5. jQuery(“.comment_show_ip”).html(“隐藏评论IP”);
  6. }
  7. else{
  8. jQuery(“.comment_ua_info”).hide();
  9. jQuery(“.comment_show_ip”).html(“显示评论IP”);
  10. }
  11. });
  12. </script>

3)检阅成果

a)点击“显示评论IP”,则显示全部评论IP,并把按钮置为“隐藏评论IP”,如下图

b)点击“隐藏评论IP”,则隐藏全部评论IP,并把按钮置为“显示评论IP”,如下图

好了,折腾完了,到底蛋闲不闲疼不疼。

卧龙

百度

点睛

搜狗

标签: 小鹿运营推广
<< 上一篇

wordpress个人博客网站折腾记录

下一篇 >>

百度推广建立账户结构

相关资讯

关注公众号 获取更多干货资讯

400-998-8026