在網(wǎng)上查資料閑逛，偶然間看到了張戈博客的評(píng)論框有點(diǎn)意思，于是就收走拿到了我的米撲博客。
本文為米撲博客原創(chuàng)：總結(jié)分享 WordPress顯示評(píng)論者IP歸屬地、瀏覽器、終端設(shè)備、電信運(yùn)營(yíng)商

WordPress顯示評(píng)論者IP歸屬地、瀏覽器、終端設(shè)備、電信運(yùn)營(yíng)商，如下圖：

恩，本來(lái)搞定了不打算寫(xiě)博客的，但是想了想原文步驟繁瑣，有些細(xì)節(jié)還沒(méi)有，都是自己一點(diǎn)一點(diǎn)搗鼓出來(lái)的，很多朋友可能用得到，所以還是總結(jié)分享寫(xiě)出來(lái)
張戈博客，WordPress顯示訪客UA信息，共分了兩篇博客：
WordPress顯示訪客UA信息：Show UserAgent純代碼輕度漢化版
分享WordPress顯示評(píng)論者IP的歸屬地及運(yùn)營(yíng)商信息的2種方案

本文，將合并兩篇博客的內(nèi)容，主要合并了兩個(gè)腳本，并對(duì)國(guó)旗、瀏覽器、終端設(shè)備等圖標(biāo)進(jìn)行了美化

插件實(shí)現(xiàn)
1）Show UserAgent 插件 （推薦）
官網(wǎng)： https://wordpress.org/plugins/show-useragent/
下載： show-useragent.1.0.9.zip
效果圖如下：

**2）WP-UserAgent 插件 **（適合老外）
官網(wǎng)：https://wordpress.org/plugins/wp-useragent/
下載： wp-useragent.zip
效果圖如下：

代碼實(shí)現(xiàn)
到這里，請(qǐng)注意，全部是重點(diǎn)，按步驟做就好了
1. 下載zip包
米撲博客整理了圖標(biāo)和文字兩種顯示方式，命名為加強(qiáng)版zip包
**Show UserAgent 加強(qiáng)版： **show-useragent-pro.zip

2. 上傳到主題根目錄
把 show-useragent-pro.zip 上傳到主題的根目錄，注意不是WordPress根目錄
例如，米撲博客使用的主題是 officefolders ，則zip包上傳至 wp-content/themes/officefolders/ 目錄下
上傳后，解壓zip包：
unzip show-useragent-pro.zip
解壓后的文件列表如下：

tree show-useragent -L 1

show-useragent
├── browsers
├── flags
├── ip2c
├── ip2c-qqwry.dat
├── ip2c-text.php
└── show-useragent.php

3. 添加代碼到 functions.php

vim functions.php

在 php 作用域內(nèi)，添加兩行代碼：

include("show-useragent/show-useragent.php");   // 顯示訪客信息
include("show-useragent/ip2c-text.php");        // IP歸屬地和運(yùn)營(yíng)商查詢功能

4. 添加代碼到 xxx-comment.php 模板
這里，我們需要在評(píng)論者用戶后面，添加顯示IP歸屬地、瀏覽器圖標(biāo)等信息，因此需要找到評(píng)論者的位置，查找方法如下：
1）打開(kāi)有評(píng)論的網(wǎng)頁(yè)，按 F12（Mac用戶組合鍵 option + command + i ）進(jìn)入開(kāi)發(fā)者模式，定位到評(píng)論者，例如：陽(yáng)光島主

2）搜索定位的關(guān)鍵詞
在WordPress根目錄下，搜索定位到的關(guān)鍵詞，如上圖中的 "comment-author vcard" ，找到對(duì)應(yīng)的評(píng)論模板文件
一般模板文件在 wp-include/ 目錄下，所以搜索命令為：

# grep "comment-author vcard" wp-includes/ -r | grep -vE ".svn|.git"
wp-includes/class-walker-comment.php:           <div class="comment-author vcard">
wp-includes/class-walker-comment.php:                                   <div class="comment-author vcard">

3）修改評(píng)論模板文件
打開(kāi)步驟2）找到的評(píng)論模板文件

vim wp-includes/class-walker-comment.php

再次搜索關(guān)鍵詞 "comment-author vcard"，定位到在文件中的具體位置，添加代碼如下：

<span id="comment_ua_info" class="comment_ua_info" style="white-space: nowrap;overflow: hidden;display:none;">
<?php echo '   '; CID_print_comment_flag(); echo ' '; CID_print_comment_browser(); ?>
<?php echo "<span id='ua-info-text' style='font-size:14px;font-weight:normal;color:#aaa;'>"; echo convertip(get_comment_author_ip()); echo "</span>"; ?>
</span>

添加后的效果：

至此，顯示評(píng)論者信息已經(jīng)實(shí)現(xiàn)了
如果想看效果，先把 id="comment_ua_info" 中的樣式 display:none; 去掉，就可以看到效果了

5. 添加代碼到 footer.php
初看步驟4的效果還不錯(cuò)，但是看上去信息會(huì)很多，顏色等有點(diǎn)亂，于是想追求極致，還需要繼續(xù)努力
為了實(shí)現(xiàn)鼠標(biāo)懸浮在評(píng)論框才顯示的效果，我們需要結(jié)合js實(shí)現(xiàn)，添加js代碼到主題下的footer.php中

vim footer.php

添加js代碼

<!-- comment ua-info -->
<script>
jQuery('.comment-body').hover(     
    function(){
        jQuery(this).find('span.comment_ua_info').show();
    },
    function(){
        jQuery(this).find('span.comment_ua_info').hide();
    });
jQuery('.comment-body').click(     
    function(){
        jQuery(this).find('span.comment_ua_info').show();
    });
</script>

說(shuō)明：
1）jQuery('.comment-body').hover 懸浮事件，主要用于PC電腦端，但是手機(jī)端沒(méi)有懸浮事件
2）jQuery('.comment-body').click 點(diǎn)擊事件，主要用于手機(jī)端，點(diǎn)擊可以顯示，但需要注意click事件里不要加hide，否則在電腦端與hover相沖突
3）span.comment_ua_info 標(biāo)簽，是在步驟4中特別說(shuō)明的，記得要把 id="comment_ua_info" 中的樣式設(shè)置為 display:none; 默認(rèn)不顯示ua-info信息

至此，評(píng)論者IP歸屬地等信息默認(rèn)是隱藏了，只有當(dāng)鼠標(biāo)懸浮在評(píng)論框時(shí)才會(huì)顯示出來(lái)
演示效果，請(qǐng)見(jiàn)米撲博客：https://blog.mimvp.com/donate/#comments

6. 按鈕顯示評(píng)論所有IP
上面的功能，在一些博客里都已實(shí)現(xiàn)，我的米撲博客只是把人家的效果，用代碼實(shí)現(xiàn)分享出來(lái)
最后，奉獻(xiàn)一點(diǎn)小創(chuàng)新，個(gè)人感覺(jué)還是比較實(shí)用的，就是添加一個(gè)按鈕，能夠一鍵顯示所有IP
恩，你說(shuō)的對(duì)，步驟4早已經(jīng)實(shí)現(xiàn)了，折騰出步驟5的隱藏IP，現(xiàn)在步驟6又整出一鍵顯示所有IP，閑的蛋疼，哈
恩，蛋疼也好，折騰也罷，也要搞出來(lái)，微創(chuàng)新嘛，直接上代碼和步驟啦
1） 修改評(píng)論文件 comments.php
進(jìn)入主題目錄，修改評(píng)論文件 comments.php

vim comments.php

添加一行用于顯示的按鈕（按鈕放哪兒，由你自己決定了）

<span id="comment_show_ip" class="comment_show_ip" style="color:blue; font-size:14px;">顯示評(píng)論IP</span>

2） 添加js代碼到 footer.php
進(jìn)入主題目錄，修改頁(yè)腳文件 footer.php

vim footer.php

添加js代碼如下：

<script>
jQuery(".comment_show_ip").click(function(){
    if(jQuery(".comment_show_ip").text() == "顯示評(píng)論IP") {
        jQuery(".comment_ua_info").show();
        jQuery(".comment_show_ip").html("隱藏評(píng)論IP");
    }
    else {
        jQuery(".comment_ua_info").hide();
        jQuery(".comment_show_ip").html("顯示評(píng)論IP");
    }
});
</script>

3）檢閱成果
a）點(diǎn)擊“顯示評(píng)論IP”，則顯示全部評(píng)論IP，并把按鈕置為“隱藏評(píng)論IP”，如下圖

b）點(diǎn)擊“隱藏評(píng)論IP”，則隱藏全部評(píng)論IP，并把按鈕置為“顯示評(píng)論IP”，如下圖

好了，折騰完了，到底蛋閑不閑疼不疼，看看米撲博客的效果再說(shuō)吧 ??
米撲博客：https://blog.mimvp.com/donate/#comments