訪客信息自動(dòng)填寫(xiě)即是利用cookie來(lái)記錄訪客第一次評(píng)論時(shí)填寫(xiě)的信息,這樣以后再評(píng)論時(shí)實(shí)現(xiàn)一個(gè)自動(dòng)填寫(xiě),這里我們以WordPress為例展示jQuery實(shí)現(xiàn)頁(yè)面評(píng)論欄中訪客信息自動(dòng)填寫(xiě)功能的方法:
首先簡(jiǎn)單說(shuō)一說(shuō)仿登陸的具體操作,用戶第一次登陸時(shí)會(huì)出現(xiàn)用于填寫(xiě)評(píng)論者資料的框,當(dāng)用戶評(píng)論完成后,將會(huì)以 cookie 的方式記錄評(píng)論者資料,一年后 cookie 自動(dòng)清除,當(dāng)用戶再次評(píng)論時(shí)填寫(xiě)評(píng)論者資料的 div 將會(huì)隱藏,當(dāng)用戶點(diǎn)擊“ Change ”時(shí)可以再次編輯評(píng)論者資料,同時(shí) Change 字樣會(huì)改為“ Finish ” ,點(diǎn)擊 Finish 時(shí)填寫(xiě)評(píng)論者資料的 div 將會(huì)再次隱藏,同時(shí) Change 字樣將會(huì)改為 Change Again 。
以下是分步敘述如何使用 jQuery 實(shí)現(xiàn)以上效果,如果只想實(shí)現(xiàn)效果的童鞋可以直接看代碼。
1.加載 jQuery 庫(kù),這是必須的。
2.把 comments.php 的評(píng)論者資料框代碼和評(píng)論框代碼按如下修改:
<?php if(isset($_COOKIE['comment_author_email_'.COOKIEHASH]) && isset($_COOKIE['comment_author_'.COOKIEHASH])) : ?>
<div class="commentwelcome">
<?php printf(__('歡迎發(fā)表評(píng)論! <strong>%1s</strong> '), $comment_author); ?><a id="edit_profile" title="重新填寫(xiě)資料" href="javascript:void(0);"><span>Change</span></a>
</div>
<?php endif; ?>
<div class="<?php echo $comment_author_email ? 'hidden' : 'profile'; ?>">
<!-- 評(píng)論者資料框代碼 -->
</div>
<!-- 評(píng)論框代碼 -->
在上面的代碼中,會(huì)以 cookie 的方式記錄評(píng)論者資料,并把評(píng)論者資料框的 div 賦予“ hidden ”的 class ,因此對(duì)于曾評(píng)論的訪客,需要先隱藏起評(píng)論者資料框的 div ,可以使用 jQuery 的hide()事件隱藏該 div ,如果 jQuery 加載速度較慢,會(huì)出現(xiàn)打開(kāi)頁(yè)面時(shí)先出現(xiàn) div ,片刻后再突然隱藏 div 的情況,這樣顯然不利用戶體驗(yàn),因此也可以直接寫(xiě)一條 css ——.hidden {display: none; }。
$('.hidden').hide();
3.然后再使用toggle()事件,slideUp()和slideDown()動(dòng)畫(huà)實(shí)現(xiàn)編輯評(píng)論者資料的功能。
$('#edit_profile').toggle(function(){
$('.hidden').slideDown();
},function(){
$('.hidden').slideUp();
});
4.為了提高用戶體驗(yàn),還需要使用text()方法在點(diǎn)擊“Change”時(shí)把 Change 的字樣改為“ Finish ”,當(dāng)點(diǎn)擊 Finish 時(shí)再把 Finish 字樣改為“ Change Again ”。把以上代碼整合,完整的 jQuery 代碼如下:
jQuery(document).ready(function($){
$('.hidden').hide();
$('#edit_profile').toggle(function(){
$('.hidden').slideDown();
$('#edit_profile span').text("Finish");
},function(){
$('.hidden').slideUp();
$('#edit_profile span').text("Change Again");
});
});
PS:訪客評(píng)論顯示歡迎信息
我們通過(guò)判斷$comment_author變量值是否為空,來(lái)確定訪客是否在近期有評(píng)論(有 Cookie)。
if (!is_user_logged_in() && !empty($comment_author)) {
...
}
如果有,則在評(píng)論框上方顯示歡迎信息:
if (!is_user_logged_in() && !empty($comment_author)) {
$welcome_login = '<p id="welcome-login"><span>歡迎回來(lái), <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">';
}
以上代碼,需要添加到主題的 comment.php 文件 comment_form($comments_args) 方法調(diào)用之前。
接下來(lái),我們通過(guò) Javascript 來(lái)實(shí)現(xiàn)訪客信息更改:
/* 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('隱藏');
}
});
});
這樣,如果用戶需要更新信息時(shí),可以點(diǎn)擊歡迎信息右側(cè)的更改按鈕;修改完成之后,用戶信息會(huì)在評(píng)論后更新。