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 a guest message, the Data entry box will be hidden as if logged in. Visitors can choose to modify the relevant information before commenting. Give visitors a good user experience. Today I'm porting this feature to my theme, making it easy to share.

Demand

Careful friends may have noticed: when a comment on a WordPress blog again, the data will not need to fill in again, because they are already in the Data entry box. But without comment or after the Cookie has been erased, the data entry box will be empty.

1. When the visitor's information is already in place, the visitor pays little attention to the material itself, and the data entry boxes become "unsightly things" and we have to find a way to hide them. At the same time, we need to show the visitor's name, otherwise he or she doesn't know who he is.

2. A visitor may have changed his or her email address, or would like to change the name of a cool one. So there are some steps required to 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 you can see from the demand, we are dealing with two kinds of state visitors: the information, the information.
For data, there are two states of the Display Data entry box (display nickname) and the Hidden Data entry box (show nickname).
Visitors with no data only display a state of the Data entry box (no nickname).
Well, we'll have two buttons (change and cancellation) for the visitor, one to display the Data entry box, and one to hide it.

Ideas

1. How to write the page? Before coding, we should also have a clue. Let's use pseudo code.

If (visitors with information) {
Place a guest nickname
Place Change button (after clicked: Hide Change button, show Cancel button, display data input box)
Place the Cancel button (after clicked: Show Change button, hide Cancel button, hide data input box)
}
Place data input Box
If (visitors with information) {
Hide Cancel button
Hide Data Entry Box
}
2. How do you know if the visitor commented? As already mentioned, the information that has been commented on the visitor is displayed, that is, the method of obtaining the data has been implemented in the code. Let's look for it ...

<input type= "text" name= "author" id= "author" value= "<?php echo $comment _author;?>" tabindex= "1"/>

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

3. Some controls are displayed and hidden, how do you get them? We don't need to jump the page for this, use JavaScript. We can write a method that sets the display of some controls, but it's a simple way to do this:

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

Coding

What do you do next? You can probably write code. Look at my ...

<!--visitors with information--> <?php if ($comment _author!= ""):?> <!--convert JavaScript Q1 for display status: Why is this code here?
 A1: Because it is used only when the visitor has the data, it reduces the overhead of having no data visitor downloading the page. Q2: Why not use external files to put JavaScript up?
 Perhaps that would be easier to maintain. A2: Because it's only used in this place.
 and the number of loading files will also affect the speed of the page download, for such a bit of byte code, it is not worth opening a new file. --> <script type= "Text/javascript" >function setstyledisplay (ID, status) {document.getElementById (ID). Style.display = status;} </script> <div class= "Form_row small" > <!--visitor Nickname (casual welcome)--> <?php printf (' Welcome back <st Rong>%s</strong>. '), $comment _author)?> <!--Change button (click: Hide Change button, show Cancel button, display data entry box)--> <span id= "s How_author_info "><a href=" Javascript:setstyledisplay (' author_info ', '); Setstyledisplay (' Show_author_info ' , ' none '); Setstyledisplay (' Hide_author_info ', '); " ><?php _e (' change» ');?></a></span> <!--Cancel button (click: Show Change button, hide Cancel button, hide data entry box)--> <span Id= "Hide_author_info" ><a href= "javascript:setstyledisplay (' AUThor_info ', ' none '); Setstyledisplay (' Show_author_info ', '); Setstyledisplay (' Hide_author_info ', ' none '); " ><?php _e (' close» ');?></a></span> </div> <?php endif;?> <!--data entry box--> <di V id= "Author_info" > <div class= "Form_row" > <input type= "text" name= "author" id= "author" value= "<?php Ech  o $comment _author?> "tabindex=" 1 "/> <label for=" Author "class=" Small "><?php _e (' Name ');?> <?php if ($req) _e (' (required) ');?></label> </div> <div class= "Form_row" > <input type= "text" Name= " Email "id=" email "value=" <?php echo $comment _author_email?> "tabindex=" 2 "/> <label for=" email "class=" SMA ll "><?php _e (' e-mail (won't be published) ');? > <?php if ($req) _e (' (required) ');?></label> </div> <div class= "Form_row" > <input type= "Text" name= "url" id= "url" value= "<?php echo $comment _author_url;?>" tabindex= "3"/> <label for= "url" class= "Small" ><?php _e (' Website ')?></label> </div> </div> <!--information for visitors--> P if ($comment _author!= ""):?> <!--hide Cancel button, hide data entry box--> <script type= "Text/javascript" &GT;SETSTYLEDISPL

 Ay (' hide_author_info ', ' none '); Setstyledisplay (' Author_info ', ' none ');</script> <?php; endif

Visitor Reviews Show Welcome information

Key questions: Getting guest information

Take some time to study, but the whole implementation process is not complicated. The key point here is how to tell if a visitor has made a recent comment.

When a visitor reviews, the reviewer's information is saved in a Cookie. We can view them through Firebug or Chrome Developer Tool:

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

There are three information related to comments from above, respectively, Comment_author,comment_author_url,comment_author_email. But the middle is mixed with string bbfa5b726c6b7a9cf3cda9370be3ee91, we can look at the code of default-constants.php, can know this paragraph 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 already been in the Comments_template method, through Wp_get_current_commenter for us to parse the visitor's information from the Cookie. For example, in the comment.php file, we can use $comment_author directly to get the names of the visitors saved in the Cookie.

Code implementation

The next implementation is simple, and we determine whether the visitor has a recent comment (with a Cookie) by determining whether the $comment_author variable value 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 = ' <p id= ' Welcome-login ' >< Span> Welcome back, <strong> '. $comment _author. ' </strong>.</span> ';
  $welcome _login. = ' <span id= ' toggle-author ' ><u> change </u> <i class= ' icon-signout ' ></i> </span></p> ';

  $comments _args[' comment_field '] = ' </div> '. $comments _args[' Comment_field '];
  $comments _args[' comment_notes_before ' = $welcome _login. ' <div id= ' author-info ' class= ' hide ' > ';
}

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

Next, we use Javascript to implement guest information changes:

/* Toggle Comment User *
/$ (' #comments '). On (' Click ', ' #toggle-author ', function () { 
  $ (' #author-info '). Slidetoggle (function () { 
    if ($ (). Is (': Hidden ')) {/
      * Update author name in the Welcome messages
      /$ (' #we Lcome-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, they can click on the Change button to the right of the welcome information, and after the modification is complete, the user information will be updated after the comment.