WordPress中對訪客評論功能的一些最佳化方法,wordpress評論功能_PHP教程

來源:互聯網
上載者:User

WordPress中對訪客評論功能的一些最佳化方法,wordpress評論功能


前幾天見到某 Blog (忘記名字和網址了) 有一個相當實用的評論功能. 訪客留言之後資料輸入框會被隱藏起來, 如同登入了一般. 訪客可以選擇修改相關資料再進行評論. 給予訪客很好的使用者體驗. 今天我將這個功能移植到了自己的主題上, 製作不難, 分享一下吧.

需求

細心的朋友可能已經注意到了: 當在某個 WordPress 發表評論後再次訪問該 Blog, 資料就不需要再次填寫, 因為它們都已經在資料輸入框裡面. 但沒評論過的或者清除了 Cookie 之後, 資料輸入框將空空如也.

1. 當訪客的資料已經存在的情況下, 訪客很少關注資料本身, 那些資料輸入框就會變成 "礙眼的東西", 我們要想辦法將它們隱藏起來. 同時, 我們需要將這位訪客的名字顯示出來, 否則他/她根本不知道自己的身份.

2. 訪客有可能郵箱更換了, 或者就想換個酷點的名字, 此時的他/她肯定想更改一下那些資料. 所以要求有一些措施, 讓訪客可以重新看到資料輸入框.

3. 對於那些從未提供資料的訪客, 資料輸入框必須讓他們看到.

分析

由需求可以看到, 我們要處理的是兩種狀態的訪客: 有資料的, 無資料的.
對於有資料的, 具有顯示資料輸入框 (顯示暱稱) 和 隱藏資料輸入框 (顯示暱稱) 兩種狀態.
而無資料的訪客只有顯示資料輸入框 (沒有暱稱) 一種狀態.
好, 我們就為有資料的訪客配備兩個按鈕 (更改和取消), 一個用來顯示資料輸入框, 一個用來隱藏它.

思路

1. 頁面怎麼寫? 編碼前, 我們還應該理一下頭緒. 用虛擬碼吧.

if (有資料的訪客) {
放置訪客暱稱
放置更改按鈕 (點擊後: 隱藏更改按鈕, 顯示取消按鈕, 顯示資料輸入框)
放置取消按鈕 (點擊後: 顯示更改按鈕, 隱藏取消按鈕, 隱藏資料輸入框)
}
放置資料輸入框
if (有資料的訪客) {
隱藏取消按鈕
隱藏資料輸入框
}
2. 怎麼獲知訪客是否評論過? 前面已經談到, 已評論訪客的資料會在顯示出來, 也就是說, 代碼中已經實現了擷取資料的方法. 那我們找找吧...


就是它! $comment_author 是訪客的暱稱, 當它為空白的時候就說明訪客資料為空白.

3. 有些控制項又顯示又隱藏的, 怎麼弄呢? 我們不需要為此轉跳頁面, 用 JavaScript 吧. 我們可以寫一個方法, 用來設定某些控制項的顯示與否, 只是一個很簡單的方法:

/** * 設定控制項的顯示風格 * @param id    控制項的 ID * @param status  控制項的顯示狀態 (顯示時為 '', 隱藏時為 'none') */function setStyleDisplay(id, status) { document.getElementById(id).style.display = status;}

編碼

接著幹嘛? 大概可以寫代碼了. 看我的...

<?php if ( $comment_author != "" ) : ?>     <?php printf(__('Welcome back %s.'), $comment_author) ?>   <?php _e('Change »'); ?>   <?php _e('Close »'); ?> <?php endif; ?>    <?php _e('Name'); ?> <?php if ($req) _e('(required)'); ?>    <?php _e('E-Mail (will not be published)');?> <?php if ($req) _e('(required)'); ?>    <?php _e('Website'); ?>   <?php if ( $comment_author != "" ) : ?>  <?php endif; ?>


訪客評論顯示歡迎資訊

關鍵問題:擷取訪客資訊

花點時間去研究,其實整個實現過程並不複雜。這裡的關鍵點是,如何判斷訪客已經在近期發表過評論。

當訪客評論時,會在 Cookie 中儲存評論者的資訊。我們可以通過 Firebug 或者 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"

從上面可以看到有三個與評論相關的資訊,它們分別是comment_author,comment_author_url,comment_author_email。不過中間夾雜著字串 bbfa5b726c6b7a9cf3cda9370be3ee91,我們可以看下 default-constants.php 的代碼,就可以知道這一段叫做 COOKIEHASH,它的值是部落格 URL 的 md5值。

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

我們只需要瞭解到這一點就可以了,因為這些資訊 WordPress 已經在comments_template方法中,通過wp_get_current_commenter為我們從 Cookie 中解析了訪客的資訊。例如,我們可以在 comment.php 檔案中,直接用$comment_author來擷取儲存在 Cookie 中的訪客姓名。

代碼實現

接下來的實現就很簡單了,我們通過判斷$comment_author變數值是否為空白,來確定訪客是否在近期有評論(有 Cookie)。

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

如果有,則在評論框上方顯示歡迎資訊:

if (!is_user_logged_in() && !empty($comment_author)) {  $welcome_login = '

歡迎回來, ' . $comment_author . '.'; $welcome_login .= ' 更改

'; $comments_args['comment_field'] = '' . $comments_args['comment_field']; $comments_args['comment_notes_before'] = $welcome_login . '';}

以上代碼,需要添加到主題的 comment.php 檔案 comment_form($comments_args) 方法調用之前。

接下來,我們通過 Javascript 來實現訪客資訊更改:

/* 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 (忘記名字和網址了) 有一個相當實用的評論功能. 訪客留言之...

  • 聯繫我們

    該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

    如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.