Some optimization methods of guest comment function in WordPress _php example

A few days ago to see a Blog (Forget the name and URL) has a fairly useful comment function. After the guest message, the Data entry box is hidden, as if it were logged in. Visitors can choose to modify the relevant information before commenting. Give visitors a good user experience. Today, I transplanted this feature to my theme, making it easy to share.

Demand

The attentive friend may have noticed: when the Blog is visited again after some WordPress comment, the data will not need to be filled in again, because they are already in the data input box. However, the Data entry box will be empty after you have not commented or cleared the Cookie.

1. When the visitor's profile is already in place, the visitor seldom pays attention to the information itself, and the Data entry box becomes an "eyesore", and we have to find a way to hide it. At the same time, we need to show the visitor's name, otherwise he/she does not know his identity at all.

2. The visitor may have changed the mailbox, or if he or she wants to change the name of a cool one, he/she will definitely want to make changes to that information at this point. So there are some measures that allow visitors to see the data entry box again.

3. For visitors who have never provided information, the Data entry box must be visible to them.

Analysis

As the demand can see, we have to deal with two states of visitors: there is information, no information.
For data, there are two states, the Display Data entry box (display nickname) and the Hidden Data entry box (display nickname).
Visitors with no information are only shown a status in the Data entry box (no nickname).
Okay, we'll have two buttons (change and cancel) for the visitor, one to display the Data entry box and one to hide it.

Ideas

1. How do I write the page? Before coding, we should also take a look at the clue. Use pseudo-code.

if (visitor with information) {
Place Guest Nickname
Place Change button (after click: Hide Change button, show Cancel button, display data entry box)
Place Cancel button (after click: Show Change button, hide Cancel button, hide data entry box)
}
Place a data entry box
if (visitor with information) {
Hide Cancel button
Hide Data Entry Box
}
2. How do I know if a visitor has commented? As already mentioned, the information that has been commented on by the visitor is displayed, that is, the method of obtaining the data has been implemented in the code. Let's find it.

That's it! $comment _author is the nickname of the visitor and when it is empty it indicates that the visitor profile is empty.

3. Some controls show and hide, how do they do it? We don't need to skip the page for this, use JavaScript. We can write a method to set the display of some controls, but it's a very simple way:

/** * Setting the display style of the control * @param ID    control's ID * @param  the status control's display state ("when displayed as ', ' none ' when hidden) */function Setstyledisplay (ID, s Tatus) {document.getElementById (id). style.display = status;}

Coding

What do you do next? Probably can write the code. Look at my ...

 <?php if ($comment _author! = ""):?>
    
 <?php printf (' Welcome back%s. '), $comment _author)?>
  <?php _e (' change» ');?>  
  <?php _e (' close» ');?><?php endif;?>
    <?php _e (' Name ');?> <?php if ($req) _e (' (required) ');?>    <?php _e (' e-mail (won't be published) ');? > <?php if ($req) _e (' (required) ');?>    <?php _e (' Website ');?>   
 <?php if ($comment _author! = ""):?>
 <?php endif;?>

Guest Comments Show welcome message

Key questions: Get visitor information

Take the time to study, but the whole realization process is not complicated. The key point here is how to tell if a visitor has commented recently.

When a guest comments, the reviewer's information is saved in the Cookie. We can use Firebug or Chrome's Developer Tool to view:

>>> Document.cookie "Comment_author_bbfa5b726c6b7a9cf3cda9370be3ee91=helloworld; comment_author_email_bbfa5b726c6b7a9cf3cda9370be3ee91=dangoakachan%40gmail.com; Comment_author_url_bbfa5b726c6b7a9cf3cda9370be3ee91=http%3a%2f%2fexample.com "

From the above you can see three comments related information, which are comment_author,comment_author_url,comment_author_email. But in the middle with the string bbfa5b726c6b7a9cf3cda9370be3ee91, we can look at the default-constants.php code, we can know that this section is called Cookiehash, its value is the MD5 value of the blog URL.

>>> Import hashlib>>> hashlib.md5 (' http://localhost/wordpress '). Hexdigest () ' Bbfa5b726c6b7a9cf3cda9370be3ee91 '

We just need to understand this, because this information WordPress has been in the Comments_template method, through Wp_get_current_commenter for us to parse the visitor information from the Cookie. For example, we can use $comment_author directly in the comment.php file to get the name of the guest that is stored in the Cookie.

Code implementation

The next implementation is simple, and we determine if the visitor has a recent comment (with a Cookie) by judging whether the value of the $comment_author variable is empty.

if (!is_user_logged_in () &&!empty ($comment _author)) {...}

If so, the welcome message is displayed above the comment box:

if (!is_user_logged_in () &&!empty ($comment _author)) {  $welcome _login = '
 '. $comment _author. '.';   Change
';  $comments _args[' comment_field ') = '. $comments _args[' Comment_field '];  $comments _args[' comment_notes_before ') = $welcome _login. '';}

The above code needs to be added to the subject's comment.php file before the Comment_form ($comments _args) method call.

Next, we use Javascript to make changes to the visitor information:

/* Toggle Comment user */$ (' #comments '). On (' Click ', ' #toggle-author ', function () {   $ (' #author-info '). Slidetoggle ( function () {     if ($ (this). Is (': Hidden ')) {/      * Update author name in the Welcome messages *      /$ (' #welcome-login Strong '). HTML ($ (' #author '). Val ());      /* Update the Toggle action name *      /$ (' #toggle-author u '). html (' change ');    } else {/      * update the Toggle action Nam E *      /$ (' #toggle-author u '). html (' hidden ');    }    

This way, if the user needs to update the information, you can click the Change button to the right of the welcome message, and after the modification is complete, the user information will be updated after the comment.

