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( ‘發表留言 &raquo;’, ‘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(‘登出 &raquo;’); ?></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>

//官方說明:

wp_list_comments官方說明


 

<?php if ( comments_open() ) : ?> //假如開放評論

//顯示(發表留言)的標題

<h2 id="post_comment"><?php comment_form_title( ‘發表留言 &raquo;’, ‘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(‘登出 &raquo;’); ?></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)

感謝您的閱讀,請用力地分享讓大家知道吧~~

Aidec Li
學我所見,寫我所學。凡事略懂略懂~~
更多 Aidec Li 的文章...

推薦文章

發表評論