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

時間 2019-11-18

標籤博客總結分享 wordpress 顯示評論歸屬瀏覽器終端設備電信運營商欄目 Wordpress 简体版

原文原文鏈接

在網上查資料閒逛，偶然間看到了張戈博客的評論框有點意思，因而就收走拿到了個人米撲博客。php

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

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

恩，原本搞定了不打算寫博客的，可是想了想原文步驟繁瑣，有些細節尚未，都是本身一點一點搗鼓出來的，不少朋友可能用獲得，因此仍是總結分享寫出來vim

張戈博客，WordPress顯示訪客UA信息，共分了兩篇博客：瀏覽器

WordPress顯示訪客UA信息：Show UserAgent純代碼輕度漢化版ide

分享WordPress顯示評論者IP的歸屬地及運營商信息的2種方案wordpress

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

插件實現

1）Show UserAgent 插件 （推薦）this

官網： https://wordpress.org/plugins/show-useragent/spa

下載： 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