WordPress佈景主題製作教學系列(七)-comments模板
此系列將會在新站重構、再製，敬請期待。
當我們製作完single.php之後，就緊接著繼續製作comments評論模板，在這一章節，也將快速的製作一個評論界面，因為通常每個人的評論界面代碼都相同，其主要差異在於CSS的部分。(也越來越多人，直接使用評論外掛 例如:Disqus ，所以在評論這段也就越不受到重視)
廢話就不多說了，直接打開comments.php，將下列直接複製貼上即可擁有一個多層級評論系統!!
<?php $options = get_option(‘S_options’);?>
<?php
if ( post_password_required() ) : ?>
<p><?php _e(‘請輸入密碼才可觀看留言’); ?></p>
<?php return; endif; ?>
<div id=”comments”>
<h2><?php comments_number(__(‘0 留言’), __(‘1 個留言’), __(‘% 個留言’)); ?><?php if ( comments_open() ) : ?><small><a href=”#postcomment” title=”<?php _e(“發表留言”); ?>”>▼</a></small><?php endif; ?></h2>
</div>
<?php if ( $comments ) : ?>
<div class=”comments-nav”>
<?php paginate_comments_links(‘prev_text=上一頁&next_text=下一頁’);?>
</div>
<div class=”commentmetadata”>
<ul class=”commentlist”>
<?php wp_list_comments( array (‘avatar_size’=>57,’type’=>’comment’));?>
</ul>
</div>
<div class=”comments-nav”>
<?php paginate_comments_links(‘prev_text=上一頁&next_text=下一頁’);?>
</div>
<?php else : // If there are no comments yet ?>
<?php endif; ?>
<?php if ( comments_open() ) : ?>
<div class=”commentline”></div>
<h2 id=”post_comment”><?php comment_form_title( ‘發表留言 »’, ‘Leave a Reply to %s’ ); ?></h2>
<div id=”respond”>
<div id=”cancel_comment_reply”><?php cancel_comment_reply_link() ?></div>
<?php if ( get_option(‘comment_registration’) && !$user_ID ) : ?><p><?php printf(__(‘你必須 <a href=”%s”>登入</a> 才能留言’), get_option(‘siteurl’).”/wp-login.php?redirect_to=”.urlencode(get_permalink()));?></p>
<?php else : ?>
<form action=”<?php echo get_option(‘siteurl’); ?>/wp-comments-post.php” method=”post” id=”commentform” name=”commentform”>
<?php if ( $user_ID ) : ?>
<p><?php printf(__(‘登入為 %s.’), ‘<a href=”‘.get_option(‘siteurl’).’/wp-admin/profile.php”>’.$user_identity.'</a>’); ?> <a href=”<?php echo wp_logout_url(get_permalink()); ?>” title=”<?php _e(‘登出此帳戶’) ?>”><?php _e(‘登出 »’); ?></a></p>
<?php else : ?>
<label for=”author”></label>
<span style=”color: #22DDBB;”>姓名</span>:<input type=”text” name=”author” id=”author” value=”<?php echo $comment_author; ?>” size=”30″ tabindex=”1″ /><small><span style=”color: #ff0000;”>(必填*)</span></small><br />
<label for=”email”></label>
<span style=”color: #22DDBB;”>信箱</span>:<input type=”text” name=”email” id=”email” value=”<?php echo $comment_author_email; ?>” size=”30″ tabindex=”2″ /><small><span style=”color: #ff0000;”>(必填*)</span></small><br />
<label for=”url”></label>
<span style=”color: #22DDBB;”>網站</span>:<input type=”text” name=”url” id=”url” value=”<?php echo $comment_author_url; ?>” size=”30″ tabindex=”3″ /><small><span style=”color: #ff0000;”>(必填*)</span></small><br />
<?php endif; ?>
<label for=”comment”></label>
<textarea name=”comment” id=”comment” style=”width: 90%; height: 150px;” tabindex=”4″></textarea><br />
<label for=”submitct”></label>
<input type=”submit” id=”submitct” class=”button” tabindex=”5″ value=”<?php echo attribute_escape(__(‘發表留言 [Ctrl+Enter]’)); ?>” />
<?php comment_id_fields(); ?>
<?php do_action(‘comment_form’, $post->ID); ?>
</form>
<?php endif; // If registration required and not logged in ?>
<script type=”text/javascript”>
<!–//–><![CDATA[//><!–
var commenttextarea = document.getElementById(‘comment’);
commenttextarea.onkeydown = function quickSubmit(e) {
if (!e) var e = window.event;
if (e.ctrlKey && e.keyCode == 13){
document.getElementById(‘submitct’).click();
}
};
//–><!]]>
</script>
</div>
<?php else : // Comments are closed ?>
<p><?php _e(‘很抱歉，此文章關閉留言’); ?></p>
<?php endif; ?>
基本上建議直接複製貼上就好，或是使用評論插件替代，若您真心想了解的話，那我只好簡單的說明一下!!
說明:
預覽圖:
代碼說明:
<?php $options = get_option(‘S_options’);?> //從資料庫取得S_option的資料
//檢查是否需要密碼
<?php
if ( post_password_required() ) : ?>
<p><?php _e(‘請輸入密碼才可觀看留言’); ?></p>
<?php return; endif; ?>
//顯示該篇文章評論數
<div id=”comments”>
<h2><?php comments_number(__(‘0 留言’), __(‘1 個留言’), __(‘% 個留言’)); ?><?php if ( comments_open() ) : ?><small><a href=”#postcomment” title=”<?php _e(“發表留言”); ?>”>▼</a></small><?php endif; ?></h2>
</div>
//設定評論分頁
<div>
<?php paginate_comments_links(‘prev_text=上一頁&next_text=下一頁’);?>
</div>
<div>
<ul>
//設定評論參數
<?php wp_list_comments( array (‘avatar_size’=>57,’type’=>’comment’));?>
</ul>
</div>
//官方說明:
<?php if ( comments_open() ) : ?> //假如開放評論
//顯示(發表留言)的標題
<h2 id=”post_comment”><?php comment_form_title( ‘發表留言 »’, ‘Leave a Reply to %s’ ); ?></h2>
<div id=”respond”> //評論框主體
//取消評論
<div id=”cancel_comment_reply”><?php cancel_comment_reply_link() ?></div>
//判斷登入狀態(應該…)
<?php if ( get_option(‘comment_registration’) && !$user_ID ) : ?><p><?php printf(__(‘你必須 <a href=”%s”>登入</a> 才能留言’), get_option(‘siteurl’).”/wp-login.php?redirect_to=”.urlencode(get_permalink()));?></p>
<?php else : ?>
<form action=”<?php echo get_option(‘siteurl’); ?>/wp-comments-post.php” method=”post” id=”commentform” name=”commentform”>
<?php if ( $user_ID ) : ?>
<p><?php printf(__(‘登入為 %s.’), ‘<a href=”‘.get_option(‘siteurl’).’/wp-admin/profile.php”>’.$user_identity.'</a>’); ?> <a href=”<?php echo wp_logout_url(get_permalink()); ?>” title=”<?php _e(‘登出此帳戶’) ?>”><?php _e(‘登出 »’); ?></a></p>
<?php else : ?>
//整個評論框主體欄位 (姓名欄、信箱欄、網站欄、留言文字框(Textarea)、發表評論按鈕)
<label for=”author”></label>
<span style=”color: #22DDBB;”>姓名</span>:<input type=”text” name=”author” id=”author” value=”<?php echo $comment_author; ?>” size=”30″ tabindex=”1″ /><small><span style=”color: #ff0000;”>(必填*)</span></small><br />
<label for=”email”></label>
<span style=”color: #22DDBB;”>信箱</span>:<input type=”text” name=”email” id=”email” value=”<?php echo $comment_author_email; ?>” size=”30″ tabindex=”2″ /><small><span style=”color: #ff0000;”>(必填*)</span></small><br />
<label for=”url”></label>
<span style=”color: #22DDBB;”>網站</span>:<input type=”text” name=”url” id=”url” value=”<?php echo $comment_author_url; ?>” size=”30″ tabindex=”3″ /><small><span style=”color: #ff0000;”>(必填*)</span></small><br />
<?php endif; ?>
<label for=”comment”></label>
<textarea name=”comment” id=”comment” style=”width: 90%; height: 150px;” tabindex=”4″></textarea><br />
<label for=”submitct”></label>
<input type=”submit” id=”submitct” tabindex=”5″ value=”<?php echo attribute_escape(__(‘發表留言 [Ctrl+Enter]’)); ?>” />
//生成兩個隱藏表單字段用來分辨comment_post_ID和comment_parent。這個標籤必須在comments.php的form表單標籤中
<?php comment_id_fields(); ?>
//執行評論提交的動作
<?php do_action(‘comment_form’, $post->ID); ?>
//假如評論需要登入但未登入
<?php endif; // If registration required and not logged in ?>
<script type=”text/javascript”>
<!–//–><![CDATA[//><!–
var commenttextarea = document.getElementById(‘comment’);
commenttextarea.onkeydown = function quickSubmit(e) {
if (!e) var e = window.event;
if (e.ctrlKey && e.keyCode == 13){
document.getElementById(‘submitct’).click();
}
};
//–><!]]>
</script>
</div>
//當評論關閉留言
<?php else : // Comments are closed ?>
<p><?php _e(‘很抱歉，此文章關閉留言’); ?></p>
<?php endif; ?>
希望這樣的註解可以讓你了解， 原本這章只是要簡單的帶過….沒想到打了這麼長，接下來Page.php和404.php這兩章，就會以比較快速、簡短的方式帶過，因為Page.php跟single和index幾乎一樣，而404為發生錯誤時載入的頁面(不常用到)，所以絕對不是我偷懶!!
WordPress佈景主題製作教學
(一).WordPress佈景主題製作教學系列(一)-開發工具&基本架構 (編寫於2013.06.06)
(二).WordPress佈景主題製作教學系列(二)-Header.php模板製作 (編寫於2013.06.06)
(三).WordPress佈景主題製作教學系列(三)-index.php模板製作 (編寫於2013.06.06)
(四).WordPress佈景主題製作教學系列(四)-footer.php模板製作 (編寫於2013.06.07)
(五).WordPress佈景主題製作教學系列(五)-sidebar.php模板製作 (編寫於2013.06.07)
(六).WordPress佈景主題製作教學系列(六)-single.php模板製作 (編寫於2013.06.07)
(七).WordPress佈景主題製作教學系列(七)-comments.php模板製作 (編寫於2013.06.07)
(八).WordPress佈景主題製作教學系列(八)-page.php模板製作 (編寫於2013.06.07)
(九).WordPress佈景主題製作教學系列(九)-404.php模板製作 (編寫於2013.06.07)
(十).WordPress佈景主題製作教學系列(十)-function.php模板製作 (編寫於2013.06.08)
(十一).WordPress佈景主題製作教學系列(十一)-WP佈景主題最終設定 (編寫於2013.06.09)
高級篇:
(一).WordPress佈景主題製作教學進階系列-WP佈景主題功能表製作(一) (編寫於2013.06.10)
(二).WordPress佈景主題製作教學進階系列-WP佈景主題功能表製作(二) (編寫於2013.06.11)
感謝您的閱讀，請用力地分享讓大家知道吧~~
很抱歉，此文章關閉留言
Hurrah! After all I got a webpage from where I know how to
in fact gett helpful data regarding my study and knowledge.
Hey! Do you know if they make aany plugins to safeguard against hackers?
I’m kiunda paranoid about losing everything I’ve worked hard on. Any suggestions?
I’m a designer and I’ve just come up with a revolutionary social network internet site.
I happen to be looking to find beta evaluators to browse and try it out.
Do you need to opt in? We are able to compensate you.