摘要：在網上查資料閑逛，偶然間看到了張戈博客的評論框有點意思，于是就收走拿到了我的米撲博客。

在網上查資料閑逛，偶然間看到了張戈博客的評論框有點意思，于是就收走拿到了我的米撲博客。
本文為米撲博客原創：總結分享 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
解壓后的文件列表如下：

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: ? ? ? ? ? 

wp-includes/class-walker-comment.php: ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 

3）修改評論模板文件
打開步驟2）找到的評論模板文件

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

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

"; echo convertip(get_comment_author_ip()); echo ""; ?>

添加后的效果：

簡單解釋：
包含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代碼

說明：
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

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

顯示評論IP

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

vim footer.php

添加js代碼如下：

3）檢閱成果
a）點擊“顯示評論IP”，則顯示全部評論IP，并把按鈕置為“隱藏評論IP”，如下圖

b）點擊“隱藏評論IP”，則隱藏全部評論IP，并把按鈕置為“顯示評論IP”，如下圖

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