Some optimization methods for visitor comment function in WordPress, wordpress comment function_PHP tutorial

Some optimization methods for the visitor comment function in WordPress, wordpress comment function

I saw a blog a few days ago (forgot the name and URL) that has a very practical comment function . After the visitor leaves a message, the information input box will be hidden, as if logged in. The visitor can choose to modify the relevant information before commenting. It gives the visitor a good user experience. Today I transplanted this function to my own theme, and it is not difficult to make. , share it.

Requirements

Careful friends may have noticed: When you visit the Blog again after posting a comment in WordPress, the information does not need to be filled in again, because they are already in the information input box. But those who have not commented or have cleared their cookies After that, the data input box will be empty.

1. When the visitor's information already exists, the visitor rarely pays attention to the information itself, and those information input boxes will become "eyesores". We have to find ways to hide them. At the same time, we need to The visitor's name is displayed, otherwise he/she would not know his/her identity.

2. The visitor may have changed his/her email address, or may want to change his/her name to a cooler one. At this time, he/she definitely wants to change those information. Therefore, some measures are required to allow the visitor to see the information input box again.

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

Analysis

As you can see from the requirements, we have to deal with visitors in two states: those with information and those without information.
For those who have information, there are two states: display the information input box (display nickname) and hide the information input box (display nickname).
Visitors without information will only have the information input box (without nickname) displayed.
Okay, we will equip visitors with data with two buttons (change and cancel), one to display the data input box and one to hide it.

Thoughts

1. How to write the page? Before coding, we should also sort out the clues. Let’s use pseudo code.

if (visitor with information) {
Place visitor nickname
Place the change button (after clicking: hide the change button, show the cancel button, show the data input box)
Place a cancel button (after clicking: show change button, hide cancel button, hide data input box)
}
Place data input box
if (visitor with information) {
Hide cancel button
Hide data input box
}
2. How to know whether a visitor has commented? As mentioned before, the information of visitors who have commented will be displayed. In other words, the method of obtaining information has been implemented in the code. Let's find out...

<input type="text" name="author" id="author" value="<&#63;php echo $comment_author; &#63;>" tabindex="1" />

That’s it! $comment_author is the visitor’s nickname. When it is empty, it means the visitor information is empty.

3. Some controls are shown and hidden at the same time, how to do it? We don’t need to jump to the page for this, use JavaScript. We can write a method to set whether certain controls are shown or not, just a Very simple method:

/**
 * 设定控件的显示风格
 * @param id    控件的 ID
 * @param status  控件的显示状态 (显示时为 '', 隐藏时为 'none')
 */
function setStyleDisplay(id, status) {
 document.getElementById(id).style.display = status;
}

Encoding

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

<!-- 有资料的访客 -->
<&#63;php if ( $comment_author != "" ) : &#63;>
 <!--
 转换显示状态用的 JavaScript
 Q1: 为什么这段代码放在这里呢&#63;
 A1: 因为只有当访客有资料时, 它才被用上, 这样可以减少无资料访客下载页面时的开销.
 Q2: 为什么不用外部文件将 JavaScript 放起来&#63; 也许那样维护起来更方便.
 A2: 因为它只在这个地方用到了. 而且加载文件的数量也会影响页面下载速度, 为了这么点字节的代码, 不值得新开一个文件.
 -->
 <script type="text/javascript">function setStyleDisplay(id, status){document.getElementById(id).style.display = status;}</script>
 <div class="form_row small">
 <!-- 访客昵称 (随便欢迎一下) -->
 <&#63;php printf(__('Welcome back <strong>%s</strong>.'), $comment_author) &#63;>
 
 <!-- 更改按钮 (点击后: 隐藏更改按钮, 显示取消按钮, 显示资料输入框) -->
 <span id="show_author_info"><a href="javascript:setStyleDisplay('author_info','');setStyleDisplay('show_author_info','none');setStyleDisplay('hide_author_info','');"><&#63;php _e('Change &raquo;'); &#63;></a></span>
 
 <!-- 取消按钮 (点击后: 显示更改按钮, 隐藏取消按钮, 隐藏资料输入框) -->
 <span id="hide_author_info"><a href="javascript:setStyleDisplay('author_info','none');setStyleDisplay('show_author_info','');setStyleDisplay('hide_author_info','none');"><&#63;php _e('Close &raquo;'); &#63;></a></span>
 </div>
<&#63;php endif; &#63;>
 
<!-- 资料输入框 -->
<div id="author_info">
 <div class="form_row">
 <input type="text" name="author" id="author" value="<&#63;php echo $comment_author; &#63;>" tabindex="1" />
 <label for="author" class="small"><&#63;php _e('Name'); &#63;> <&#63;php if ($req) _e('(required)'); &#63;></label>
 </div>
 <div class="form_row">
 <input type="text" name="email" id="email" value="<&#63;php echo $comment_author_email; &#63;>" tabindex="2" />
 <label for="email" class="small"><&#63;php _e('E-Mail (will not be published)');&#63;> <&#63;php if ($req) _e('(required)'); &#63;></label>
 </div>
 <div class="form_row">
 <input type="text" name="url" id="url" value="<&#63;php echo $comment_author_url; &#63;>" tabindex="3" />
 <label for="url" class="small"><&#63;php _e('Website'); &#63;></label>
 </div>
 
</div>
 
<!-- 有资料的访客 -->
<&#63;php if ( $comment_author != "" ) : &#63;>
 <!-- 隐藏取消按钮, 隐藏资料输入框 -->
 <script type="text/javascript">setStyleDisplay('hide_author_info','none');setStyleDisplay('author_info','none');</script>
<&#63;php endif; &#63;>

Visitor comments display welcome message

Key issue: Obtaining visitor information

Take some time to research. In fact, the entire implementation process is not complicated. The key point here is how to tell if the visitor has commented recently.

When a visitor leaves a comment, the commenter's information will be saved in the cookie. We can check it through Firebug or Chrome’s Developer Tool:

>>> document.cookie
"comment_author_bbfa5b726c6b7a9cf3cda9370be3ee91=helloworld; comment_author_email_bbfa5b726c6b7a9cf3cda9370be3ee91=dangoakachan%40gmail.com; comment_author_url_bbfa5b726c6b7a9cf3cda9370be3ee91=http%3A%2F%2Fexample.com"

As you can see from the above, there are three pieces of information related to comments, which are comment_author, comment_author_url, and comment_author_email. However, there is a string bbfa5b726c6b7a9cf3cda9370be3ee91 in the middle. We can look at the code of default-constants.php and we can know that this section is called COOKIEHASH, and its value is the md5 value of the blog URL.

>>> import hashlib
>>> hashlib.md5('http://localhost/wordpress').hexdigest()
'bbfa5b726c6b7a9cf3cda9370be3ee91'

We only need to know this, because this information WordPress has already parsed the visitor's information from the cookie for us through wp_get_current_commenter in the comments_template method. For example, we can use $comment_author directly in the comment.php file to get the visitor's name stored in the cookie.

Code implementation

The next implementation is very simple. We determine whether the visitor has commented recently (with cookies) by judging whether the $comment_author variable value is empty.

if (!is_user_logged_in() && !empty($comment_author)) {
...
}

If available, display a welcome message above the comment box:

if (!is_user_logged_in() && !empty($comment_author)) {
  $welcome_login = '<p id="welcome-login"><span>欢迎回来, <strong>' . $comment_author . '</strong>.</span>';
  $welcome_login .= ' <span id="toggle-author"><u>更改</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 theme’s comment.php file before the comment_form($comments_args) method is called.

Next, we use Javascript to change 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('更改');
    } else {
      /* Update the toggle action name */
      $('#toggle-author u').html('隐藏');
    }  
  }); 
}); 

这样，如果用户需要更新信息时，可以点击欢迎信息右侧的更改按钮；修改完成之后，用户信息会在评论后更新。

http://www.bkjia.com/PHPjc/1075081.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/1075081.htmlTechArticleWordPress中对访客评论功能的一些优化方法，wordpress评论功能 前几天见到某 Blog (忘记名字和网址了) 有一个相当实用的评论功能. 访客留言之...