WordPress Display reviewer IP attribution, browser, terminal equipment, telecom operators

On the internet to look at the information loitering, occasionally saw the Zhanggo blog comment box A bit of meaning, so I took away to get my rice flutter blog.

WordPress Display reviewer IP attribution, browser, terminal equipment, telecommunications operators, such as:

Rice Flutter Blog Review demo effect: https://blog.mimvp.com/donate/#comments

Well, originally did not intend to write a blog, but think of the original steps to be cumbersome, some details have not, are their own 1.1 points out, many friends may use to get, so or summarize share write

Zhanggo Blog, wordpress display visitors UA Information, a total of two blog posts:

WordPress Display Visitor UA info: Show useragent Pure code mild Chinese version

2 ways to share WordPress display the attribution of the reviewer IP and operator information

This article, will merge two blog content, the main merge two script, and the flag, browser, terminal equipment and other icons to beautify

plug-in implementation

1) Show useragent plugin ( recommended )

Official website: https://wordpress.org/plugins/show-useragent/

Download: Show-useragent.1.0.9.zip

As follows:

2) wp-useragent plug-in (suitable for foreigners)

Official website: https://wordpress.org/plugins/wp-useragent/

Download: Wp-useragent.zip

As follows:

Code implementation

Here, please note that all is the focus, just follow the steps.

1. Download the ZIP package

Rice flutter Blog organized the icon and text two display methods, named as the enhanced version of the ZIP package

Show useragent-enhanced version: Show-useragent-pro.zip

2. Upload to the theme root directory

Upload show-useragent-pro.zip to the root of the theme, note that it is not the WordPress root directory

For example, the theme used by the Officefolders blog is to upload the zip package to the wp-content/themes/officefolders/directory

After uploading, unzip the ZIP package:

Unzip Show-useragent-pro.zip

The list of extracted files is as follows:

# Tree Show-useragent-l 1
Show-useragent
├──browsers
├──flags
├──ip2c
├──ip2c-qqwry.dat
├──ip2c-text.php
└──show-useragent.php

3. Add code to functions.php

Vim functions.php

Within the PHP scope, add two lines of code:

Include ("show-useragent/show-useragent.php");   Show visitor information include ("show-useragent/ip2c-text.php");        IP attribution and operator query capabilities

4. Add code to the xxx-comment.php template

Here, we need to add information such as IP attribution, browser icon, etc. after the reviewer user, so we need to find the location of the reviewer, and find the following method:

1) Open a page with comments, press F12 (Mac user key option + COMMAND + i) into the developer mode and target the reviewer, for example: Sun Island Master

2) Search for target keywords

In the WordPress root directory, search for keywords that are located, such as "Comment-author vcard" in, find the corresponding comment template file

The generic template file is in the wp-include/directory, so the search command is:

# 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) Modify the comment template file

Open Step 2) Find the comment template file

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

Search again for the keyword "comment-author vcard", navigate to the exact location in the file and add the code as follows:

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

The effect after adding:

Simple explanation:

<span id= "Comment_ua_info" ... > contains IP attribution, browser, and text information, etc., the purpose is to use after the mouse hover display, JS to achieve the display and hide the effect

Cid_print_comment_flag () displays the flag of the IP attribution place

cid_print_comment_browser () display browser and user device

Convertip (Get_comment_author_ip ()) displays text information for IP attribution

This shows that the reviewer information has been implemented

If want to see effect, first put id= "Comment_ua_info" in the style Display:none; Get rid of it, you can see the effect.

5. Add code to footer.php

First look at step 4 of the effect is good, but looks like a lot of information, color and so a bit messy, so want to pursue the ultimate, but also need to continue efforts

In order to realize the mouse hover in the comment box to show the effect, we need to combine JS implementation, add JS code to the subject of the footer.php

Vim footer.php

Add JS Code

<!--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>

Description

1) jQuery ('. Comment-body '). Hover suspension event, mainly used for PC computer, but no hover event on the phone side

2) JQuery ('. Comment-body '). Click on the event, mainly for the mobile phone side, click can display, but need to be aware of the Click event do not add hide, otherwise at the computer side and hover conflict

3) Span.comment_ua_info label, is in step 4 specifically described, remember to id= "Comment_ua_info" in the style set to Display:none; Ua-info information is not displayed by default

At this point, the reviewer IP attribution and other information is hidden by default, only when the mouse hover in the comment box will be displayed

Demo effect, see Rice Flutter blog: https://blog.mimvp.com/donate/#comments

6. button to show comments all IP

The above features, in some blogs have been implemented, my rice Flutter blog is just the effect of others, with the code to share out

Finally, the dedication of a little innovation, personal feeling is more practical, is to add a button, to display all the IP in one click

Well, you're right, step 4 has already been implemented, toss out step 5 of the hidden IP, now step 6 and the whole of a button to display all IP, idle egg pain, ha

Well, egg pain or, toss it, also to get out, micro-innovation, directly on the code and steps

1) Modify the comment file comments.php

Go to the theme directory and edit the comment file comments.php

Vim comments.php

Add a row for the button to be displayed (where the button is placed, you decide)

<span id= "comment_show_ip" class= "Comment_show_ip" style= "color:blue; font-size:14px; " > Show Comments Ip</span></p></div>

2) Add JS code to footer.php

Go to the theme directory and modify the footer file footer.php

Vim footer.php

Add the JS code as follows:

<script>jquery (". Comment_show_ip"). Click (function () {    if (JQuery (". Comment_show_ip"). Text () = = "Show Comment IP") {        jQuery (". Comment_ua_info"). Show ();        JQuery (". Comment_show_ip"). HTML ("Hide comment ip");    }    else {        jQuery (". Comment_ua_info"). Hide ();        JQuery (". Comment_show_ip"). HTML ("show comment IP");}    ); </script>

3) Inspection Results

A) Click " Show Comment IP", then display all comments IP, and set the button to " Hide comment ip", such as

b) Click " Hide Comment ip", then hide all comments IP, and set the button to " Show comment IP", such as

Well, toss it over, the end of the egg is not busy pain, see the effect of the blog of the rice to say??

Rice Flutter Blog: https://blog.mimvp.com/donate/#comments

WordPress Display reviewer IP attribution, browser, terminal equipment, telecom operators