VicJuan’s 再也不是好人的好站 » Blog Archive » 在Wordpress中使用AJAX技術即時產生留言

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

May 11th, 2007 vicjuan

今天看了這篇文章
發覺他的內容還蠻有趣的
所以就照著網頁的指示做
目前看來成效還不錯
這篇文章主要是教大家如何利用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，在

<?php wp_head(); ?>

之前插入以下程式碼

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

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

<ol class="commentlist">

替換成

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

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

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

放置在這個程式碼之前

<?php if ($comments) : ?>

也就是要改寫成

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

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

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

<?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post->comment_status) : ?>
<?php else : // comments are closed ?>
<p class="nocomments">Comments are closed.</p>
<?php endif; ?>

替換成

<?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post->comment_status) : ?>
<li id="hidelist" style="display:none"></li>
</ol>
<p id="nocomment">No comments yet</p>
<?php else : // comments are closed ?>
<li style="display:none"></li>
</ol>
<p>Comments are closed.</p>
<?php endif; ?>

8. 找到下列程式碼

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

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

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

9. 找到下列程式碼

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

更改成

<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

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

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

歷史上的今天...

優人神鼓兩廳院戶外廣場紀念公演 - 2008
系際盃女籃冠軍賽 - 2005

This entry was posted on Friday, May 11th, 2007 at 8:39 pm and is filed under web, wordpress, 文字日記, tagged with AJAX, wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. View blog reactions.