在WordPress中使用AJAX技術即時產生留言

今天看了這篇文章
發覺他的內容還蠻有趣的
所以就照著網頁的指示做
目前看來成效還不錯
這篇文章主要是教大家如何利用AJAX技術改造自己的Worpress
使得訪客留言之後可以立即產生在頁面上而不必重新讀取網頁
由於作者是拿Wordpress的預設佈景主題改造
所以如果不是用這佈景主題的人可能要多花點時間尋找對應的code

我就稍微幫大家翻譯一下
同時也是為了自己以後若不幸需要重新開始的話
姑且還能照著自己寫的文章來做 😛

1. 下載ajax-comment.zip

2. 把comments-ajax.php放在佈景主題的目錄下 (/wp-content/themes/your_theme/)

3. 在佈景主題目錄下新建目錄js,並且把壓縮黨內三個javascript檔案都放到js目錄 (/wp-content/themes/your_theme/js/)

4. 打開header.php,在

  1. <?php wp_head(); ?>

之前插入以下程式碼

  1. <?php if (is_single() and ('open' == $post-> comment_status) or ('comment' == $post-> comment_type) ) { ?>
  2.         <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js.php"></script>
  3.         <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/effects.js.php"></script>
  4.         <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/ajax_comments.js"></script>
  5. <?php } ?>

5. 打開comments.php (直到最後一步都是編輯這個檔案),將

  1. <ol class="commentlist">

替換成

  1. <ol class="commentlist" id="commentlist">

6. 把前一步更正的程式碼

  1. <ol class="commentlist" id="commentlist">

放置在這個程式碼之前

  1. <?php if ($comments) : ?>

也就是要改寫成

  1. <ol class="commentlist" id="commentlist">
  2. <?php if ($comments) : ?>

這跟原始版本的順序剛好互換
如果照原始版本擺放
那留言就不會即時產生了

7. 這有點長,在回覆表單之前,找到下列程式碼

  1. <?php else : // this is displayed if there are no comments so far ?>
  2.  
  3.   <?php if ('open' == $post->comment_status) : ?>
  4.                 <!-- If comments are open, but there are no comments. -->
  5.  
  6.          <?php else : // comments are closed ?>
  7.                 <!-- If comments are closed. -->
  8.                 <p class="nocomments">Comments are closed.</p>
  9.  
  10.         <?php endif; ?>

替換成

  1. <?php else : // this is displayed if there are no comments so far ?>
  2. <?php if ('open' == $post->comment_status) : ?>
  3. <!-- If comments are open, but there are no comments. -->
  4. <li id="hidelist" style="display:none"></li>
  5. </ol>
  6. <p id="nocomment">No comments yet</p>
  7. <?php else : // comments are closed ?>
  8. <!-- If comments are closed. -->
  9. <li style="display:none"></li>
  10. </ol>
  11. <p>Comments are closed.</p>
  12. <?php endif; ?>

8. 找到下列程式碼

  1. <?php if ('open' == $post->comment_status) : ?>

在這行之後(原文是寫Before OR after that line,我發現兩者效果似乎不同,所以我選擇之後)放置以下程式碼

  1. <div id="loading" style="display: none;">Posting your comment.</div>
  2. <div id="errors"></div>

9. 找到下列程式碼

  1. <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

更改成

  1. <form id="commentform" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" onsubmit="new Ajax.Updater({success: 'commentlist'}, '<?php bloginfo('stylesheet_directory') ?>/comments-ajax.php', {asynchronous: true, evalScripts: true, insertion: Insertion.Bottom, onComplete: function(request){complete(request)}, onFailure: function(request){failure(request)}, onLoading: function(request){loading()}, parameters: Form.serialize(this)}); return false;">

很長
但是務必要塞在同一行內
這樣一來就算使用者關閉javascript功能
還是可以用原始的方法傳送留言

10. 最後,檢查submit按鈕是不是有給予id

  1. <input name="submit" type="submit" id="submit" value="Submit" />

如果上面的步驟都打對了
那麼就可以擁有一個會即時產生留言的功能了 😀

歷史上的今天...

Powered by

4 關於 “在WordPress中使用AJAX技術即時產生留言” 的評論

發表迴響