WordPress顯示評論者IP歸屬地、瀏覽器、終端裝置、電信電訊廠商

標籤：pac   方式   com   顯示   解壓   上傳   folders   function   weight   

在網上查資料閑逛，偶然間看到了張戈部落格的評論框有點意思，於是就收走拿到了我的米撲部落格。

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 ‘&nbsp;&nbsp;&nbsp;‘; 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></p></div>

 

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

 

 

WordPress顯示評論者IP歸屬地、瀏覽器、終端裝置、電信電訊廠商