構建一個Bootstrap WordPress主題#13 開啓評論功能

我們要做的最後一件事是在我們的文章詳情頁面添加一些評論功能:

  1. 打開 single.php 文件,我們要在類名爲panel-body的div底部再添加一個評論模板, 添加comments_template() 方法:
<?php endif; ?>
<?php comments_template(); ?>
</div>
  1. 創建一個名爲 comments.php 的新文件,在文件內輸入TEST,保存並刷新頁面。

comments.php

  1. 接下來在comments.php 文件中添加評論模板結構:
<div class="comments">
<?php if(have_comments()): ?>
	<h3 class="comments-title">
	<?php echo get_comments_number(). ' 條評論'; ?>
	</h3>
	<ul class="row comment-list">
	<?php wp_list_comments(array('avatar_size' => 90, 'callback' => 'add_theme_comments'));?>
	</ul>
	<?php if(!comments_open() && '0' != get_comments_number() && post_type_supports(get_post_type(), 'comments')) : ?>
	<p class="no-comments">
		<?php _e('Comments are closed.', 'dazzling'); ?>
	</p>
	<?php endif; ?>
<?php endif; ?>
</div>

這部分代碼是最外圍一個類名爲comments的div和<?php if(have_comments()): ?>,內部包含了h3,ul,和p標籤三部分。上面的代碼將檢查評論功能是否已關閉,如果是,那麼我們可以留下一點註釋。

  1. 接下來我們在這個div下方放置一條橫線, 然後我們需要創建我們的註釋參數,然後創建表單:
<hr>
<?php
$comments_args = array(
// change the title of send button
'label_submit'=>'發佈',
// change the title of the reply section
'title_reply'=>'寫下評論',
// remove "Text or HTML to be displayed after the set of comment
//fields"
'comment_notes_after'=>'',
// redefine your own textarea (the comment body)
'comment_field'=>'<p class="comment-form-comment">
<label for="comment">' ._x('Comment', 'noun') . '</label><br/>
<textarea class="form-control" id="comment" name="comment"
aria-required="true">
</textarea></p>',
);
comment_form($comments_args);

保存代碼,刷新前端頁面:

報錯了

提示無法找到回調函數 add_theme_comments,問題出在這裏:

<?php
    wp_list_comments(array(
        'avatar_size' => 90,
        'callback' => 'add_theme_comments'
    ));
?>

打開 functions.php 文件,添加下面的代碼:

// Add Comments
function add_theme_comments($comment, $args, $depth){
    $GLOBALS['comment'] = $comment;
    extract($args, EXTR_SKIP);
    if('div' == $args['style']){
    $tag = 'div';
    $add_below = 'comment';
    } else {
    $tag = 'li class="well comment-item"';
    $add_below = 'div-comment';
    } ?>

現在我們有一個名爲add_theme_comments()的函數,它和我們的回調相匹配。 然後我們向函數傳遞了三個參數。我們通過這些參數在下面添加了一些標籤和類,以便我們可以設置這個樣式。

現在我們也會發布其他一些東西。 爲此,我們添加以下代碼:

<<?php echo $tag; ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ); ?> id="comment-<?php comment_ID() ?>"><?php 
    if ( 'div' != $args['style'] ) { ?>
        <div id="div-comment-<?php comment_ID() ?>" class="comment-body"><?php
    } ?>
        <div class="comment-author vcard"><?php 
            if ( $args['avatar_size'] != 0 ) {
                echo get_avatar( $comment, $args['avatar_size'] ); 
            } 
            printf( __( '<cite class="fn">%s</cite> <span class="says">says:</span>' ), get_comment_author_link() ); ?>
        </div><?php 
        if ( $comment->comment_approved == '0' ) { ?>
            <em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></em><br/><?php 
        } ?>
        <div class="comment-meta commentmetadata">
            <a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ); ?>"><?php
                /* translators: 1: date, 2: time */
                printf( 
                    __('%1$s at %2$s'), 
                    get_comment_date(),  
                    get_comment_time() 
                ); ?>
            </a><?php 
            edit_comment_link( __( '(Edit)' ), '  ', '' ); ?>
        </div>

        <?php comment_text(); ?>

        <div class="reply"><?php 
                comment_reply_link( 
                    array_merge( 
                        $args, 
                        array( 
                            'add_below' => $add_below, 
                            'depth'     => $depth, 
                            'max_depth' => $args['max_depth'] 
                        ) 
                    ) 
                ); ?>
        </div><?php 
    if ( 'div' != $args['style'] ) : ?>
        </div><?php 
    endif;
}

上面這部分代碼可以在https://codex.wordpress.org/Function_Reference/wp_list_comments找到。讓我們保存代碼到前端刷新頁面看看:

正常顯示

  1. 打開style.css和添加名爲comment-item的類。
.comment-list{
	list-style: none;
	margin:0 !important;
	padding:0 !important;
}
.comment-item{
	overflow:auto;
}

現在這個主題看起來很不錯。 我們可以回覆並留下評論。 我們現在有一個帶Bootstrap的WordPress主題,我們可以把它作爲基本主題來創建其他Bootstrap主題。我們還使用了navbar-walker,這非常有用。

總結:
到目前爲止我們學習瞭如何構建基礎的Bootstrap WordPress主題。 我們處理了文章類別,最近的帖子和最近的評論等小部件,以使它們適合Bootstrap主題。我們還研究了博客文章的遍歷展示併爲其添加了元數據。 我們看到了如何設置導航欄以及側邊欄小部件。 我們還添加了一個搜索框並構建了文章詳情頁面。 我們還處理了評論功能 - 評論部分和表格。

希望這個教程對喜歡WordPress的朋友們有幫助。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章