WordPress評論滑動/拉鍊解鎖myQaptcha修改為自動提交的方法
自從肉牛、鋼材等垃圾評論氾濫，很多朋友都用上了各種評論驗證方案，其中一個比較惹眼的就是張戈部落格目前在用的 myQaptcha 滑動解鎖。
很久之前張戈部落格已經分享了這個滑動解鎖的程式碼部署教程。不過還是有很多朋友眼饞張戈目前在用的滑動後自動提交評論的方案，各種留言求分享。
其實，這個功能的想法是從無主題部落格小武那“剽竊”過來的，小武第一個想到滑動後自動提交，才能進一步提高使用者體驗，畢竟少了一步操作嘛！稍微會折騰的朋友，其實分析一下就能自己寫程式碼了，根本用不到分享。
原理很簡單：先用 css 隱藏評論提交按鈕，然後將評論提交動作繫結到滑動解鎖上即可。
好吧，張戈好人做到底，整理一下詳細的做法（發現很多朋友都喜歡看張戈羅裡吧嗦。。。）
一、下載程式碼
為了省去如何修改程式碼洋洋灑灑的幾百字，張戈決定直接將修改好的程式碼打包分享出來：
下載解壓後，將得到的 myqaptcha 資料夾整體上傳到 WordPress 主題目錄下備用。
二、部署程式碼
部署很簡單，編輯 WordPress 主題目錄下的 functions.php，在<?php 之後新增如下程式碼儲存即可：
include("myqaptcha/myQaptcha.php");
三、修改程式碼
①、評論框
為了配合這個自動提交，我們必須修改一下評論框的提交按鈕程式碼。
開啟 WordPress 的評論模板，一般是 comments.php ，找到如下類似
<input id="submit" class="submit" name="submit" type="submit" tabindex="5" value="提交評論"/> 、
<?php comment_id_fields(); do_action('comment_form', $post->ID); ?>然後修改為：
<div id="autosubmit"></div> <p style="display:none;"> <!-- 目的就是為了隱藏提交按鈕 --> <input id="submit" class="submit" name="submit" type="submit" tabindex="5" value="提交評論"/> <?php comment_id_fields(); do_action('comment_form', $post->ID); ?> </p>
Ps：每個主題寫的程式碼可能會不一樣，但是評論提交的按鈕程式碼是類似的（submit），這也不會找的話建議不要折騰這個花哨的功能了。
②、ajax 程式碼
可以看出來，張戈部落格這個滑動自動提交和 Ajax 評論提交是絕配。如果你部落格的評論不是 ajax 模式（即點選提交評論頁面會重新整理），那麼 ajax 程式碼這一步就不用做啦！
使用 ajax 評論模式的網站，絕大部分會用到 comments-ajax.js 這個 js 檔案。
為了配合這個自動提交，我們需要簡單的改造一下這個 js。目的是為了滑動模組後，不管是評論提交成功還是失敗，模組都應該恢復到未拉動的狀態，以備再次評論！總不能滑動評論一次就不能評論了吧？
修改很簡單：
編輯 comments-ajax.js 找到如下程式碼：
/** Ajax */
$.ajax( {
url: ajax_php_url,
data: $(this).serialize(),
type: $(this).attr('method'),
error: function(request) {
$('#loading').slideUp();
$('#error').slideDown().html('<img src="' + pic_no + '" style="vertical-align:middle;" alt=""/> ' + request.responseText);
setTimeout(function() {$submit.attr('disabled', false).fadeTo('slow', 1); $('#error').slideUp();}, 3000);
},
success: function(data) {
$('#loading').hide();
comm_array.push($('#comment').val());
$('textarea').each(function() {this.value = ''});
var t = addComment, cancel = t.I('cancel-comment-reply-link'), temp = t.I('wp-temp-form-div'), respond = t.I(t.respondId), post = t.I('comment_post_ID').value, parent = t.I('comment_parent').value;然後如下修改即可：
/** Ajax */
$.ajax( {
url: ajax_php_url,
data: $(this).serialize(),
type: $(this).attr('method'),
error: function(request) {
$('#loading').slideUp();
$('#error').slideDown().html('<img src="' + pic_no + '" style="vertical-align:middle;" alt=""/> ' + request.responseText);
setTimeout(function() {$submit.attr('disabled', false).fadeTo('slow', 1); $('#error').slideUp();}, 3000);
$(".QapTcha").html('');$(".QapTcha").QapTcha();//新增重新整理模組程式碼
},
success: function(data) {
$('#loading').hide();
comm_array.push($('#comment').val());
$('textarea').each(function() {this.value = ''});
var t = addComment, cancel = t.I('cancel-comment-reply-link'), temp = t.I('wp-temp-form-div'), respond = t.I(t.respondId), post = t.I('comment_post_ID').value, parent = t.I('comment_parent').value;
$(".QapTcha").html('');$(".QapTcha").QapTcha();//新增重新整理模組程式碼很明顯，也就新增了 2 行 JS 程式碼，作用就是為了在 aja 評論成功或失敗後，復原滑動模組，讓滑動模組可以再次使用！
另外，張戈也在下載包裡提供了自用 comments-ajax.js，不會修改的可以參考或直接替換即可。
Ps：如果部落格用了 CDN，請編輯 comments-ajax.js ，找到 如下程式碼，自行修改下：
//js_url = js_url.replace('res.zhangge.net','zhangge.net'); 若是用到CDN，請自行修改下此行，並取消註釋四、更多吐槽
①、不顯示？
部署完之後，如果發現滑動模組不顯示了怎麼辦？很可能你用的就不是張戈提供的程式碼，而是直接在原版外掛啥修改而成。這時候請編輯 myQaptcha.php 這個檔案，找到如下語句：
function myQaptcha_wp_footer() {
if (is_singular() && !is_user_logged_in()) {然後去掉登陸判斷，如下修改即可：
function myQaptcha_wp_footer() {
if (is_singular()) {Ps：原因就是原版外掛並不是替換提交按鈕，所以已登入使用者並不需要滑動解鎖！如果在原版基礎上修改成滑動提交，那麼不管是否登陸這個滑動模組都應該顯示才行！！！
②、整站暗鏈
知更鳥博主鳥哥，在分享這個他修改版的滑動解鎖外掛時，提到了這個外掛會往評論框寫入一個隱藏的 a 標籤（不得不說作者三十歲還是動了一點歪腦筋的）。
不過汗顏的是，當初張戈分享這個外掛的時候，鬼使神差的將這個暗鏈改成了我自己的部落格地址（哈哈）。當時其實是看不太懂 JS 程式碼的，只是看到了別人的網址不爽，就下意識的改成了自己的部落格地址，然後還分享出去了。。。。
其實吧，這是一個廢暗鏈，毫無作用。因為用到但是 JS 輸出的方式，搜尋引擎並不會解析這個程式碼。。
這次張戈分享的程式碼，已經註釋掉了這個小聰明，大夥可以放心使用。
③、不動腦筋
自動提交的原理很簡單，說白了就是將原有的提交按鈕用 css 樣式隱藏掉，然後在滑動動作繫結一個點選隱藏的提交按鈕的機制，這樣使用者滑動模組，就會自動點選那個隱藏的提交按鈕了，從而實現自動提交！
並不高明的技術，但是很多朋友就是不理解，部署起來，只要遇到小問題就卡死衚衕了。完全不會自己去學習一下網站的基礎技術，比如簡單的 js、css 等。總是把希望寄託在他人身上，殊不知他人也是從小白過來的，和你最大的區別也就是比你動的腦筋多一些而已。
折騰網站這種事，適合喜歡動腦筋的勤快人，那些既不會技術又不願意想事情的人，建議不要折騰這些花哨無用的功能，還是專注內容比較好！
再囉嗦一個例子：
張戈部落格早期的文章《WordPress 評論滑動/拉鍊解鎖 myQaptcha 程式碼版及部署方法》已經分享了程式碼部署的方法。
這篇文章中提到了因 Jquery 版本問題導致無法滑動。完了問題來了，很多朋友各種提問，Jquery 版本是怎麼升級或怎麼降級的？我擦，這問題實在是太那啥了！你實在搞不清楚怎麼升級 Jquery，你就不會檢視張戈部落格的網頁原始碼，從裡面找到 JQ 的連線，然後下載走麼？？？
我估計 Jquery 是什麼都不清楚吧，可是為啥不百度呢？
另外，部署後若發現位置錯亂的請自行解決，程式碼是不可能相容每個主題的 CSS 樣式和佈局。
好了，這些分享的包應該已經解決了這個 JQ 版本不相容問題，感謝知更鳥博主鳥哥提供的方案。