意见箱
恒创运营部门将仔细参阅您的意见和建议,必要时将通过预留邮箱与您保持联络。感谢您的支持!
意见/建议
提交建议

WordPress主题制作全过程(十):制作comments.php

来源:恒创科技 编辑:恒创科技编辑部
2024-04-17 10:30:33

在WordPress主题开发中,comments.php 是负责渲染文章评论部分的模板文件,如果你希望为主题添加评论功能,你需要创建这个文件并适当地编写代码,以下是创建 comments.php 文件的详细步骤和必要的代码示例:

1. 检查是否有评论

在开始之前,我们要确保页面上存在评论,这可以通过 have_comments() 函数来检测。


WordPress主题制作全过程(十):制作comments.php

<?php 
    if (have_comments()) :
        ?>
        <h2 class="commentstitle">
            <?php
                comments_number(
                    esc_html__('No Comments', 'yourthemetextdomain'), // 没有评论时显示的文本
                    esc_html__('One Comment', 'yourthemetextdomain'), // 一条评论时显示的文本
                    esc_html__('% Comments', 'yourthemetextdomain') // 多条评论时显示的文本
                );
            ?>
        </h2>
        
        <ol class="commentlist">
            <?php
                wp_list_comments(array(
                    'style'       => 'ol',
                    'short_ping'  => true,
                    'reply_text'  => esc_html__('回复', 'yourthemetextdomain'),
                    'avatar_size' => 50,
                ));
            ?>
        </ol>
        
        <?php
        the_comments_navigation(); // 导航到其他评论页
    endif;
?>

2. 评论表单

接下来,我们需要为用户提供发表评论的方式,使用 comment_form() 函数可以方便地插入一个评论表单。

<?php
    if (comments_open()) :
        ?>
        <div class="commentsformwrapper">
            <?php comment_form(array(
                'title_reply' => esc_html__('发表你的评论', 'yourthemetextdomain'),
                'title_reply_to' => esc_html__('回复 %s', 'yourthemetextdomain'),
                'comment_field' => '<p class="commentformcomment"><label for="comment">' . esc_html__('你的评论', 'yourthemetextdomain') . '</label><br /><textarea id="comment" name="comment" ariarequired="true"></textarea></p>',
                'fields' => array(
                    'author' => '<p class="commentformauthor">' . '<label for="author">' . esc_html__('你的名字', 'yourthemetextdomain') . '</label> ' . '<input id="author" name="author" type="text" value="' . esc_attr($commenter['comment_author']) . '" size="30"' . 'ariarequired="true" /></p>',
                    'email'  => '<p class="commentformemail"><label for="email">' . esc_html__('你的邮件地址', 'yourthemetextdomain') . '</label> ' . '<input id="email" name="email" ' . ( $commenter['comment_author_email'] ? "value='" . esc_attr($commenter['comment_author_email']) . "'" : '' ) . 'type="text" size="30"' . 'ariarequired="true" /></p>',
                ),
                'label_submit' => esc_html__('提交评论', 'yourthemetextdomain'),
            )); ?>
        </div>
        <?php
    endif;
?>

3. 样式化输出

为了让评论区域看起来更美观,我们通常需要一些CSS来样式化输出,你可以在主题的 style.css 文件中添加相应的样式规则。

/* 评论列表 */
.commentlist {
    margin: 0 0 2em;
    padding: 0;
    liststyle: none;
}
.commentlist li {
    marginbottom: 1.5em;
}
.commentlist li .commentmeta {
    marginbottom: 0.5em;
}
/* 评论作者头像 */
.commentlist li .avatar {
    float: left;
    marginright: 1em;
}
/* 评论表单 */
.commentsformwrapper {
    margin: 2em 0;
}
.commentsformwrapper label {
    display: block;
}
.commentsformwrapper input[type="text"],
.commentsformwrapper textarea {
    width: 100%;
    padding: 0.5em;
    marginbottom: 1em;
}

4. 过滤评论内容(可选)

你可能想要过滤评论内容,比如去掉HTML标签、过滤掉敏感词汇等,你可以使用 wp_filter_post_kses 函数配合 add_filter 钩子来实现这一点。

add_filter('comment_text', 'wp_filter_post_kses');

这样,你就可以通过 comments.php 为你的WordPress主题添加完整的评论功能了,别忘了,为了符合个性化需求,你可能需要根据主题的设计风格调整上述代码中的类名、文本域提示信息和其他相关参数。

上一篇: WordPress主题制作全过程(六):制作footer.php 下一篇: WordPress主题制作全过程(十一):制作page.php