摘要:在網(wǎng)上查資料閑逛,偶然間看到了張戈博客的評(píng)論框有點(diǎn)意思,于是就收走拿到了我的米撲博客。
在網(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)商,如下圖:
米撲博客評(píng)論演示效果: https://blog.mimvp.com/donate/#comments
恩,本來(lái)搞定了不打算寫(xiě)博客的,但是想了想原文步驟繁瑣,有些細(xì)節(jié)還沒(méi)有,都是自己一點(diǎn)一點(diǎn)搗鼓出來(lái)的,很多朋友可能用得到,所以還是總結(jié)分享寫(xiě)出來(lái)
張戈博客,WordPress顯示訪(fǎng)客UA信息,共分了兩篇博客:
WordPress顯示訪(fǎng)客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
解壓后的文件列表如下:
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"); // 顯示訪(fǎng)客信息 include("show-useragent/ip2c-text.php"); // IP歸屬地和運(yùn)營(yíng)商查詢(xún)功能
4. 添加代碼到 xxx-comment.php 模板
這里,我們需要在評(píng)論者用戶(hù)后面,添加顯示IP歸屬地、瀏覽器圖標(biāo)等信息,因此需要找到評(píng)論者的位置,查找方法如下:
1)打開(kāi)有評(píng)論的網(wǎng)頁(yè),按 F12(Mac用戶(hù)組合鍵 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: ? ? ? ? ?相關(guān)文章
收集整理適用博客建站免費(fèi)開(kāi)源Wordpress主題-簡(jiǎn)約好看的WP主題
摘要:最重要的就是找一個(gè)適合自己的主題了。事實(shí)上,免費(fèi)主題也非常多,而且很多的免費(fèi)主題在功能上和界面美觀上已經(jīng)大大超過(guò)了付費(fèi)的主題。加上這些主題都是開(kāi)源的,基本上可以在上找得到源碼,安全性是沒(méi)有問(wèn)題,主題的作者也在不斷更新當(dāng)中。WordPress最重要的就是找一個(gè)適合自己的主題了。好一點(diǎn)的WordPress主題基本上都是要收費(fèi)的,而且價(jià)格還不便宜,這導(dǎo)致了不少的新手朋友們很為難。而有時(shí)我們僅僅根據(jù)...
電信流量卡套餐介紹(北京電信校園卡)- 月費(fèi)20元 20GB全國(guó)流量+30GB定向流量 500分鐘通
摘要:如果我們也有需要電信流量卡套餐的話(huà),可以選擇當(dāng)前正在進(jìn)行的北京電信校園卡。每月都包含全國(guó)通用流量全國(guó)定向流量分鐘通話(huà)。這個(gè)渠道是官方的,直接在北京電信官網(wǎng)渠道申請(qǐng)?jiān)谙忍峤恍畔⒌?。我們每個(gè)月的手機(jī)流量夠用嗎?由于各種特殊的原因我們很多朋友常年用的主卡肯定是不能更換的,畢竟綁定各種賬戶(hù)信息,如果注銷(xiāo)重新辦理的話(huà)確實(shí)是比較麻煩。于是運(yùn)營(yíng)商也正是抓住這個(gè)特點(diǎn),我們的原手機(jī)卡可能每月需要幾十元或者一百...
IT,互聯(lián)網(wǎng),科技,技術(shù)博客網(wǎng)站推薦
摘要:科技博客很多,但質(zhì)量高的不多,發(fā)現(xiàn)質(zhì)量高的,但又記不住,所以索性把它們都記下來(lái)。促進(jìn)軟件開(kāi)發(fā)領(lǐng)域知識(shí)與創(chuàng)新的傳播是創(chuàng)意工作者們的社區(qū)。 科技博客很多,但質(zhì)量高的不多,發(fā)現(xiàn)質(zhì)量高的,但又記不住,所以索性把它們都記下來(lái)。 米撲博客,深耕寫(xiě)博客近十年,總結(jié)了許多好博客,主要偏向互聯(lián)網(wǎng)、科技資訊、技術(shù)分享 本文原文,來(lái)自于米撲博客分享:IT,互聯(lián)網(wǎng),科技,技術(shù)博客網(wǎng)站推薦 國(guó)內(nèi)科技博客 極客公...
IT,互聯(lián)網(wǎng),科技,技術(shù)博客網(wǎng)站推薦
摘要:科技博客很多,但質(zhì)量高的不多,發(fā)現(xiàn)質(zhì)量高的,但又記不住,所以索性把它們都記下來(lái)。促進(jìn)軟件開(kāi)發(fā)領(lǐng)域知識(shí)與創(chuàng)新的傳播是創(chuàng)意工作者們的社區(qū)。 科技博客很多,但質(zhì)量高的不多,發(fā)現(xiàn)質(zhì)量高的,但又記不住,所以索性把它們都記下來(lái)。 米撲博客,深耕寫(xiě)博客近十年,總結(jié)了許多好博客,主要偏向互聯(lián)網(wǎng)、科技資訊、技術(shù)分享 本文原文,來(lái)自于米撲博客分享:IT,互聯(lián)網(wǎng),科技,技術(shù)博客網(wǎng)站推薦 國(guó)內(nèi)科技博客 極客公...
發(fā)表評(píng)論
0條評(píng)論
閱讀 2168·2021-11-24 10:28
閱讀 1220·2021-10-12 10:12
閱讀 3428·2021-09-22 15:21
閱讀 749·2021-08-30 09:44
閱讀 2007·2021-07-23 11:20
閱讀 1207·2019-08-30 15:56
閱讀 1847·2019-08-30 15:44
閱讀 1539·2019-08-30 13:55
3)修改評(píng)論模板文件
打開(kāi)步驟2)找到的評(píng)論模板文件
再次搜索關(guān)鍵詞 "comment-author vcard",定位到在文件中的具體位置,添加代碼如下:
"; ?>
添加后的效果:
簡(jiǎn)單解釋?zhuān)?br> 包含IP歸屬地、瀏覽器,以及文本信息等,目的是為后面鼠標(biāo)懸浮顯示時(shí)使用,js實(shí)現(xiàn)顯示和隱藏效果
CID_print_comment_flag() 顯示IP歸屬地的國(guó)旗
CID_print_comment_browser() 顯示瀏覽器和用戶(hù)設(shè)備
convertip(get_comment_author_ip()) 顯示IP歸屬地的文本信息
至此,顯示評(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中
添加js代碼
說(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
添加一行用于顯示的按鈕(按鈕放哪兒,由你自己決定了)
顯示評(píng)論IP
2) 添加js代碼到 footer.php
進(jìn)入主題目錄,修改頁(yè)腳文件 footer.php
添加js代碼如下:
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
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/30671.html