这一节课程我们将学习添加自定义评论功能。
打开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主题。 我们还学习了如何将图像添加到帖子并处理页面,自定义模板和子导航。 我们还研究了主题小工具,自定义主页和评论功能。
希望大家喜欢这章节的课程。