WordPress主题制作进阶#11添加评论功能

这一节课程我们将学习添加自定义评论功能。
打开single.php然后在endif下面。 添加<？php comments_template（）;？>：

	<?php endif; ?>

    <?php comments_template(); ?>
</div>

保存代码，刷新前端页面，点击read more，进入单独帖子：

评论功能已经起作用，但它看起来太简单，所以我想告诉你我们如何定制它。

新建一个文件，保存为comments.php，在文件中写入TEST，保存返回刷新页面，评论区会出现TEST

现在我们来定制评论功能。
在https://codex.wordpress.org/Function_Reference/wp_list_comments的文档中实际上有一些有用的代码，这就是我们想要的wp_list_comments。
我们在comments.php中加入如下代码：

<h2>评论</h2>
<?php
    $args = array(
        'walker'=> null,
        'max_depth'=> '',
        'style'=> 'ul',
        'callback'=> null,
        'end-callback'=> null,
        'type'=> 'all',
        'reply_text'=> 'Reply',
        'page'=> '',
        'per_page' => '',
        'avatar_size'=> 32,
        'reverse_top_level' => null,
        'reverse_children'  => '',
        'format'=> 'html5', // or 'xhtml' if no 'HTML5' theme 
        // support
        'short_ping'=> false,
        // @since 3.6
        'echo'=> true
        // boolean, default is true 
    ); 
?> 
 
<?php wp_list_comments($args, $comments); ?> 

我们创建了一个arguments数组，其中大部分参数我们并不需要，但它不会影响我们，因为其值被设置为null，以防你以后想要改变什么东西，我们把它们保留在数组中。 这些参数现在将插入到wp_list_comments（）函数中。

现在我们需要一个评论表单，我们在上面的代码下面继续添加如下代码：

<?php
$form_args = array(
	 // change the title of send button 
	'label_submit'=>'Send',
	// 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 id="comment" name="comment" aria-required="true"></textarea>
	</p>',
);
comment_form($form_args);

现在刷新前端页面：

看起来有点丑，打开style.css，我们来添加一些样式：

.comment-body {
    border: #ccc 1px solid;
    margin-bottom: 10px;
    padding: 20px 10px;
}
.comment-meta {
    background: #333;
    color: #fff;
    padding: 10px;
    overflow: auto;
}
.comment-meta img {
    float: left;
    margin-right: 10px;
}
.comment-meta time {
    margin-left: 12px;
}
.comment-reply-link {
    background: #009acd;
    color: #fff;
    display: inline-block;
    padding: 10px 15px;
}
.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: 3px;
    border: #ccc 1px solid;
    margin-bottom: 20px;
}
.comment-form input {
    height: 30px;
}

现在再次刷新前端页面：

接下来我们来添加几条评论看看：

现在比默认样式好看多了。

总结

这个项目的目的不是为了构建一个漂亮的主题，而是让你熟悉我们创建主题所需掌握的语法和各种文件，以及各种不同的功能。

我们使用HTML和CSS创建了设计，并看到了不同的帖子格式。 我们通过学习如何显示博客帖子，单个帖子，自定义存档页面和不同的帖子格式来创建WordPress主题。 我们还学习了如何将图像添加到帖子并处理页面，自定义模板和子导航。 我们还研究了主题小工具，自定义主页和评论功能。

希望大家喜欢这章节的课程。