米撲博客：總結分享 WordPress顯示評論者IP歸屬地、瀏覽器、終端設備、電信運營商

在網上查資料閒逛，偶然間看到了張戈博客的評論框有點意思，因而就收走拿到了個人米撲博客。
本文爲米撲博客原創：總結分享 WordPress顯示評論者IP歸屬地、瀏覽器、終端設備、電信運營商

WordPress顯示評論者IP歸屬地、瀏覽器、終端設備、電信運營商，以下圖：

米撲博客評論演示效果： https://blog.mimvp.com/donate/#comments

恩，原本搞定了不打算寫博客的，可是想了想原文步驟繁瑣，有些細節尚未，都是本身一點一點搗鼓出來的，不少朋友可能用獲得，因此仍是總結分享寫出來
張戈博客，WordPress顯示訪客UA信息，共分了兩篇博客：
WordPress顯示訪客UA信息：Show UserAgent純代碼輕度漢化版
分享WordPress顯示評論者IP的歸屬地及運營商信息的2種方案

本文，將合併兩篇博客的內容，主要合併了兩個腳本，並對國旗、瀏覽器、終端設備等圖標進行了美化

插件實現
1）Show UserAgent 插件 （推薦）
官網： https://wordpress.org/plugins/show-useragent/
下載： show-useragent.1.0.9.zip
效果圖以下：

2）WP-UserAgent 插件 （適合老外）
官網：https://wordpress.org/plugins/wp-useragent/
下載： wp-useragent.zip
效果圖以下：

代碼實現
到這裏，請注意，所有是重點，按步驟作就行了
1. 下載zip包
米撲博客整理了圖標和文字兩種顯示方式，命名爲增強版zip包
Show UserAgent 增強版： 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 做用域內，添加兩行代碼：

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

4. 添加代碼到 xxx-comment.php 模板
這裏，咱們須要在評論者用戶後面，添加顯示IP歸屬地、瀏覽器圖標等信息，所以須要找到評論者的位置，查找方法以下：
1）打開有評論的網頁，按 F12（Mac用戶組合鍵 option + command + i ）進入開發者模式，定位到評論者，例如：陽光島主

2）搜索定位的關鍵詞
在WordPress根目錄下，搜索定位到的關鍵詞，如上圖中的 "comment-author vcard" ，找到對應的評論模板文件
通常模板文件在 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）修改評論模板文件
打開步驟2）找到的評論模板文件

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

再次搜索關鍵詞 "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>

添加後的效果：

簡單解釋：
<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; 去掉，就能夠看到效果了

5. 添加代碼到 footer.php
初看步驟4的效果還不錯，可是看上去信息會不少，顏色等有點亂，因而想追求極致，還須要繼續努力
爲了實現鼠標懸浮在評論框才顯示的效果，咱們須要結合js實現，添加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>

說明：
1）jQuery('.comment-body').hover 懸浮事件，主要用於PC電腦端，可是手機端沒有懸浮事件
2）jQuery('.comment-body').click 點擊事件，主要用於手機端，點擊能夠顯示，但須要注意click事件裏不要加hide，不然在電腦端與hover相沖突
3）span.comment_ua_info 標籤，是在步驟4中特別說明的，記得要把 id="comment_ua_info" 中的樣式設置爲 display:none; 默認不顯示ua-info信息

至此，評論者IP歸屬地等信息默認是隱藏了，只有當鼠標懸浮在評論框時纔會顯示出來
演示效果，請見米撲博客：https://blog.mimvp.com/donate/#comments

6. 按鈕顯示評論全部IP
上面的功能，在一些博客裏都已實現，個人米撲博客只是把人家的效果，用代碼實現分享出來
最後，奉獻一點小創新，我的感受仍是比較實用的，就是添加一個按鈕，可以一鍵顯示全部IP
恩，你說的對，步驟4早已經實現了，折騰出步驟5的隱藏IP，如今步驟6又整出一鍵顯示全部IP，閒的蛋疼，哈
恩，蛋疼也好，折騰也罷，也要搞出來，微創新嘛，直接上代碼和步驟啦
1） 修改評論文件 comments.php
進入主題目錄，修改評論文件 comments.php

vim comments.php

添加一行用於顯示的按鈕（按鈕放哪兒，由你本身決定了）

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

2） 添加js代碼到 footer.php
進入主題目錄，修改頁腳文件 footer.php

vim footer.php

添加js代碼以下：

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

3）檢閱成果
a）點擊「顯示評論IP」，則顯示所有評論IP，並把按鈕置爲「隱藏評論IP」，以下圖

b）點擊「隱藏評論IP」，則隱藏所有評論IP，並把按鈕置爲「顯示評論IP」，以下圖

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