未醒的梦 發表於 2023-7-16 00:00:00

WordPress中对访客评论功能的一些优化方法

<p>
前几天见到某 Blog (忘记名字和网址了) 有一个相当实用的评论功能. 访客留言之后资料输入框会被隐藏起来, 如同登录了一般. 访客可以选择修改相关资料再进行评论. 给予访客很好的用户体验. 今天我将这个功能移植到了自己的主题上, 制作不难, 分享一下吧.</p>
<p>
<img style="max-width:100%!important;height:auto!important;"title="WordPress中对访客评论功能的一些优化方法" alt="WordPress中对访客评论功能的一些优化方法" src="https://zhuji.jb51.net/uploads/img/202305/90976514a86400976a41819f8e1fc018.jpg"></p>
<p>
需求</p>
<p>
细心的朋友可能已经注意到了: 当在某个 WordPress 发表评论后再次访问该 Blog, 资料就不需要再次填写, 因为它们都已经在资料输入框里面. 但没评论过的或者清除了 Cookie 之后, 资料输入框将空空如也.</p>
<p>
1. 当访客的资料已经存在的情况下, 访客很少关注资料本身, 那些资料输入框就会变成 "碍眼的东西", 我们要想办法将它们隐藏起来. 同时, 我们需要将这位访客的名字显示出来, 否则他/她根本不知道自己的身份.</p>
<p>
2. 访客有可能邮箱更换了, 或者就想换个酷点的名字, 此时的他/她肯定想更改一下那些资料. 所以要求有一些措施, 让访客可以重新看到资料输入框.</p>
<p>
3. 对于那些从未提供资料的访客, 资料输入框必须让他们看到.</p>
<p>
<strong>分析</strong></p>
<p>
由需求可以看到, 我们要处理的是两种状态的访客: 有资料的, 无资料的.<br>
对于有资料的, 具有显示资料输入框 (显示昵称) 和 隐藏资料输入框 (显示昵称) 两种状态.<br>
而无资料的访客只有显示资料输入框 (没有昵称) 一种状态.<br>
好, 我们就为有资料的访客配备两个按钮 (更改和取消), 一个用来显示资料输入框, 一个用来隐藏它.</p>
<p>
<strong>思路</strong></p>
<p>
1. 页面怎么写? 编码前, 我们还应该理一下头绪. 用伪代码吧.</p>
<p>
if (有资料的访客) {<br>
    放置访客昵称<br>
    放置更改按钮 (点击后: 隐藏更改按钮, 显示取消按钮, 显示资料输入框)<br>
    放置取消按钮 (点击后: 显示更改按钮, 隐藏取消按钮, 隐藏资料输入框)<br>
}<br>
放置资料输入框<br>
if (有资料的访客) {<br>
    隐藏取消按钮<br>
    隐藏资料输入框<br>
}<br>
2. 怎么获知访客是否评论过? 前面已经谈到, 已评论访客的资料会在显示出来, 也就是说, 代码中已经实现了获取资料的方法. 那我们找找吧...</p>
<div>
<div>
<div id="highlighter_101763">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
<td>
<div>
<div>
<code>&lt;input type=</code><code>"text"</code> <code>name=</code><code>"author"</code> <code>id=</code><code>"author"</code> <code>value=</code><code>"&lt;?php echo $comment_author; ?&gt;"</code> <code>tabindex=</code><code>"1"</code> <code>/&gt;</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
就是它! $comment_author 是访客的昵称, 当它为空的时候就说明访客资料为空.</p>
<p>
3. 有些控件又显示又隐藏的, 怎么弄呢? 我们不需要为此转跳页面, 用 JavaScript 吧. 我们可以写一个方法, 用来设定某些控件的显示与否, 只是一个很简单的方法:</p>
<div>
<div>
<div id="highlighter_715162">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
</td>
<td>
<div>
<div>
<code>/**</code>
</div>
<div>
<code> </code><code>* 设定控件的显示风格</code>
</div>
<div>
<code> </code><code>* @param id    控件的 ID</code>
</div>
<div>
<code> </code><code>* @param status  控件的显示状态 (显示时为 '', 隐藏时为 'none')</code>
</div>
<div>
<code> </code><code>*/</code>
</div>
<div>
<code>function</code> <code>setStyleDisplay(id, status) {</code>
</div>
<div>
<code> </code><code>document.getElementById(id).style.display = status;</code>
</div>
<div>
<code>}</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
<strong>编码</strong></p>
<p>
接着干嘛? 大概可以写代码了. 看我的...</p>
<div>
<div>
<div id="highlighter_768262">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div>
13</div>
<div>
14</div>
<div>
15</div>
<div>
16</div>
<div>
17</div>
<div>
18</div>
<div>
19</div>
<div>
20</div>
<div>
21</div>
<div>
22</div>
<div>
23</div>
<div>
24</div>
<div>
25</div>
<div>
26</div>
<div>
27</div>
<div>
28</div>
<div>
29</div>
<div>
30</div>
<div>
31</div>
<div>
32</div>
<div>
33</div>
<div>
34</div>
<div>
35</div>
<div>
36</div>
<div>
37</div>
<div>
38</div>
<div>
39</div>
<div>
40</div>
<div>
41</div>
<div>
42</div>
<div>
43</div>
<div>
44</div>
</td>
<td>
<div>
<div>
<code>&lt;!-- 有资料的访客 --&gt;</code>
</div>
<div>
<code>&lt;?php </code><code>if</code> <code>( </code><code>$comment_author</code> <code>!= </code><code>""</code> <code>) : ?&gt;</code>
</div>
<div>
<code> </code><code>&lt;!--</code>
</div>
<div>
<code> </code><code>转换显示状态用的 JavaScript</code>
</div>
<div>
<code> </code><code>Q1: 为什么这段代码放在这里呢?</code>
</div>
<div>
<code> </code><code>A1: 因为只有当访客有资料时, 它才被用上, 这样可以减少无资料访客下载页面时的开销.</code>
</div>
<div>
<code> </code><code>Q2: 为什么不用外部文件将 JavaScript 放起来? 也许那样维护起来更方便.</code>
</div>
<div>
<code> </code><code>A2: 因为它只在这个地方用到了. 而且加载文件的数量也会影响页面下载速度, 为了这么点字节的代码, 不值得新开一个文件.</code>
</div>
<div>
<code> </code><code>--&gt;</code>
</div>
<div>
<code> </code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code><code>function</code> <code>setStyleDisplay(id, status){document.getElementById(id).style.display = status;}&lt;/script&gt;</code>
</div>
<div>
<code> </code><code>&lt;div </code><code>class</code><code>=</code><code>"form_row small"</code><code>&gt;</code>
</div>
<div>
<code> </code><code>&lt;!-- 访客昵称 (随便欢迎一下) --&gt;</code>
</div>
<div>
<code> </code><code>&lt;?php printf(__(</code><code>'Welcome back &lt;strong&gt;%s&lt;/strong&gt;.'</code><code>), </code><code>$comment_author</code><code>) ?&gt;</code>
</div>
<div>
<code> </code>
</div>
<div>
<code> </code><code>&lt;!-- 更改按钮 (点击后: 隐藏更改按钮, 显示取消按钮, 显示资料输入框) --&gt;</code>
</div>
<div>
<code> </code><code>&lt;span id=</code><code>"show_author_info"</code><code>&gt;&lt;a href=</code><code>"javascript:setStyleDisplay('author_info','');setStyleDisplay('show_author_info','none');setStyleDisplay('hide_author_info','');"</code><code>&gt;&lt;?php _e(</code><code>'Change &amp;raquo;'</code><code>); ?&gt;&lt;/a&gt;&lt;/span&gt;</code>
</div>
<div>
<code> </code>
</div>
<div>
<code> </code><code>&lt;!-- 取消按钮 (点击后: 显示更改按钮, 隐藏取消按钮, 隐藏资料输入框) --&gt;</code>
</div>
<div>
<code> </code><code>&lt;span id=</code><code>"hide_author_info"</code><code>&gt;&lt;a href=</code><code>"javascript:setStyleDisplay('author_info','none');setStyleDisplay('show_author_info','');setStyleDisplay('hide_author_info','none');"</code><code>&gt;&lt;?php _e(</code><code>'Close &amp;raquo;'</code><code>); ?&gt;&lt;/a&gt;&lt;/span&gt;</code>
</div>
<div>
<code> </code><code>&lt;/div&gt;</code>
</div>
<div>
<code>&lt;?php </code><code>endif</code><code>; ?&gt;</code>
</div>
<div>
<code> </code>
</div>
<div>
<code>&lt;!-- 资料输入框 --&gt;</code>
</div>
<div>
<code>&lt;div id=</code><code>"author_info"</code><code>&gt;</code>
</div>
<div>
<code> </code><code>&lt;div </code><code>class</code><code>=</code><code>"form_row"</code><code>&gt;</code>
</div>
<div>
<code> </code><code>&lt;input type=</code><code>"text"</code> <code>name=</code><code>"author"</code> <code>id=</code><code>"author"</code> <code>value=</code><code>"&lt;?php echo $comment_author; ?&gt;"</code> <code>tabindex=</code><code>"1"</code> <code>/&gt;</code>
</div>
<div>
<code> </code><code>&lt;label </code><code>for</code><code>=</code><code>"author"</code> <code>class</code><code>=</code><code>"small"</code><code>&gt;&lt;?php _e(</code><code>'Name'</code><code>); ?&gt; &lt;?php </code><code>if</code> <code>(</code><code>$req</code><code>) _e(</code><code>'(required)'</code><code>); ?&gt;&lt;/label&gt;</code>
</div>
<div>
<code> </code><code>&lt;/div&gt;</code>
</div>
<div>
<code> </code><code>&lt;div </code><code>class</code><code>=</code><code>"form_row"</code><code>&gt;</code>
</div>
<div>
<code> </code><code>&lt;input type=</code><code>"text"</code> <code>name=</code><code>"email"</code> <code>id=</code><code>"email"</code> <code>value=</code><code>"&lt;?php echo $comment_author_email; ?&gt;"</code> <code>tabindex=</code><code>"2"</code> <code>/&gt;</code>
</div>
<div>
<code> </code><code>&lt;label </code><code>for</code><code>=</code><code>"email"</code> <code>class</code><code>=</code><code>"small"</code><code>&gt;&lt;?php _e(</code><code>'E-Mail (will not be published)'</code><code>);?&gt; &lt;?php </code><code>if</code> <code>(</code><code>$req</code><code>) _e(</code><code>'(required)'</code><code>); ?&gt;&lt;/label&gt;</code>
</div>
<div>
<code> </code><code>&lt;/div&gt;</code>
</div>
<div>
<code> </code><code>&lt;div </code><code>class</code><code>=</code><code>"form_row"</code><code>&gt;</code>
</div>
<div>
<code> </code><code>&lt;input type=</code><code>"text"</code> <code>name=</code><code>"url"</code> <code>id=</code><code>"url"</code> <code>value=</code><code>"&lt;?php echo $comment_author_url; ?&gt;"</code> <code>tabindex=</code><code>"3"</code> <code>/&gt;</code>
</div>
<div>
<code> </code><code>&lt;label </code><code>for</code><code>=</code><code>"url"</code> <code>class</code><code>=</code><code>"small"</code><code>&gt;&lt;?php _e(</code><code>'Website'</code><code>); ?&gt;&lt;/label&gt;</code>
</div>
<div>
<code> </code><code>&lt;/div&gt;</code>
</div>
<div>
<code> </code>
</div>
<div>
<code>&lt;/div&gt;</code>
</div>
<div>
<code> </code>
</div>
<div>
<code>&lt;!-- 有资料的访客 --&gt;</code>
</div>
<div>
<code>&lt;?php </code><code>if</code> <code>( </code><code>$comment_author</code> <code>!= </code><code>""</code> <code>) : ?&gt;</code>
</div>
<div>
<code> </code><code>&lt;!-- 隐藏取消按钮, 隐藏资料输入框 --&gt;</code>
</div>
<div>
<code> </code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;setStyleDisplay(</code><code>'hide_author_info'</code><code>,</code><code>'none'</code><code>);setStyleDisplay(</code><code>'author_info'</code><code>,</code><code>'none'</code><code>);&lt;/script&gt;</code>
</div>
<div>
<code>&lt;?php </code><code>endif</code><code>; ?&gt;</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
<br><strong>访客评论显示欢迎信息</strong></p>
<p>
<img style="max-width:100%!important;height:auto!important;"title="WordPress中对访客评论功能的一些优化方法" alt="WordPress中对访客评论功能的一些优化方法" src="https://zhuji.jb51.net/uploads/img/202305/7d5b0080ba24bb131f20180bb7d6a5b1.jpg"></p>
<p>
关键问题：获取访客信息</p>
<p>
花点时间去研究，其实整个实现过程并不复杂。这里的关键点是，如何判断访客已经在近期发表过评论。</p>
<p>
当访客评论时，会在 Cookie 中保存评论者的信息。我们可以通过 Firebug 或者 Chrome 的 Developer Tool 来查看：</p>
<div>
<div>
<div id="highlighter_67457">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
</td>
<td>
<div>
<div>
<code>&gt;&gt;&gt; document.cookie</code>
</div>
<div>
<code>"comment_author_bbfa5b726c6b7a9cf3cda9370be3ee91=helloworld; comment_author_email_bbfa5b726c6b7a9cf3cda9370be3ee91=dangoakachan%40gmail.com; comment_author_url_bbfa5b726c6b7a9cf3cda9370be3ee91=http%3A%2F%2Fexample.com"</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
从上面可以看到有三个与评论相关的信息，它们分别是comment_author，comment_author_url，comment_author_email。不过中间夹杂着字符串 bbfa5b726c6b7a9cf3cda9370be3ee91，我们可以看下 default-constants.php 的代码，就可以知道这一段叫做 COOKIEHASH，它的值是博客 URL 的 md5值。</p>
<div>
<div>
<div id="highlighter_988705">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
</td>
<td>
<div>
<div>
<code>&gt;&gt;&gt; import hashlib</code>
</div>
<div>
<code>&gt;&gt;&gt; hashlib.md5(</code><code>'http://localhost/wordpress'</code><code>).hexdigest()</code>
</div>
<div>
<code>'bbfa5b726c6b7a9cf3cda9370be3ee91'</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
我们只需要了解到这一点就可以了，因为这些信息 WordPress 已经在comments_template方法中，通过wp_get_current_commenter为我们从 Cookie 中解析了访客的信息。例如，我们可以在 comment.php 文件中，直接用$comment_author来获取保存在 Cookie 中的访客姓名。</p>
<p>
代码实现</p>
<p>
接下来的实现就很简单了，我们通过判断$comment_author变量值是否为空，来确定访客是否在近期有评论（有 Cookie）。</p>
<div>
<div>
<div id="highlighter_399805">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
</td>
<td>
<div>
<div>
<code>if</code> <code>(!is_user_logged_in() &amp;&amp; !</code><code>empty</code><code>(</code><code>$comment_author</code><code>)) {</code>
</div>
<div>
<code>...</code>
</div>
<div>
<code>}</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
如果有，则在评论框上方显示欢迎信息：</p>
<div>
<div>
<div id="highlighter_713185">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
</td>
<td>
<div>
<div>
<code>if</code> <code>(!is_user_logged_in() &amp;&amp; !</code><code>empty</code><code>(</code><code>$comment_author</code><code>)) {</code>
</div>
<div>
<code>  </code><code>$welcome_login</code> <code>= </code><code>'&lt;p id="welcome-login"&gt;&lt;span&gt;欢迎回来, &lt;strong&gt;'</code> <code>. </code><code>$comment_author</code> <code>. </code><code>'&lt;/strong&gt;.&lt;/span&gt;'</code><code>;</code>
</div>
<div>
<code>  </code><code>$welcome_login</code> <code>.= </code><code>' &lt;span id="toggle-author"&gt;&lt;u&gt;更改&lt;/u&gt; &lt;i&gt;&lt;/i&gt;&lt;/span&gt;&lt;/p&gt;'</code><code>;</code>
</div>
<div>
 </div>
<div>
<code>  </code><code>$comments_args</code><code>[</code><code>'comment_field'</code><code>] = </code><code>'&lt;/div&gt;'</code> <code>. </code><code>$comments_args</code><code>[</code><code>'comment_field'</code><code>];</code>
</div>
<div>
<code>  </code><code>$comments_args</code><code>[</code><code>'comment_notes_before'</code><code>] = </code><code>$welcome_login</code> <code>. </code><code>'&lt;div id="author-info"&gt;'</code><code>;</code>
</div>
<div>
<code>}</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
以上代码，需要添加到主题的 comment.php 文件 comment_form($comments_args) 方法调用之前。</p>
<p>
接下来，我们通过 Javascript 来实现访客信息更改：</p>
<div>
<div>
<div id="highlighter_226513">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div>
13</div>
<div>
14</div>
<div>
15</div>
</td>
<td>
<div>
<div>
<code>/* Toggle comment user */</code>
</div>
<div>
<code>$(</code><code>'#comments'</code><code>).on(</code><code>'click'</code><code>, </code><code>'#toggle-author'</code><code>, </code><code>function</code> <code>() { </code>
</div>
<div>
<code>  </code><code>$(</code><code>'#author-info'</code><code>).slideToggle(</code><code>function</code> <code>() { </code>
</div>
<div>
<code>    </code><code>if</code> <code>($(</code><code>this</code><code>).is(</code><code>':hidden'</code><code>)) {</code>
</div>
<div>
<code>      </code><code>/* Update author name in the welcome messages */</code>
</div>
<div>
<code>      </code><code>$(</code><code>'#welcome-login strong'</code><code>).html($(</code><code>'#author'</code><code>).val());</code>
</div>
<div>
 </div>
<div>
<code>      </code><code>/* Update the toggle action name */</code>
</div>
<div>
<code>      </code><code>$(</code><code>'#toggle-author u'</code><code>).html(</code><code>'更改'</code><code>);</code>
</div>
<div>
<code>    </code><code>} </code><code>else</code> <code>{</code>
</div>
<div>
<code>      </code><code>/* Update the toggle action name */</code>
</div>
<div>
<code>      </code><code>$(</code><code>'#toggle-author u'</code><code>).html(</code><code>'隐藏'</code><code>);</code>
</div>
<div>
<code>    </code><code>}  </code>
</div>
<div>
<code>  </code><code>}); </code>
</div>
<div>
<code>}); </code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
这样，如果用户需要更新信息时，可以点击欢迎信息右侧的更改按钮；修改完成之后，用户信息会在评论后更新。</p>
頁: [1]
查看完整版本: WordPress中对访客评论功能的一些优化方法