首页 视频课程 主题开发课程第07章、文章评论 WordPress主题添加评论功能的方法

WordPress主题添加评论功能的方法

2023-06-11 / 1130阅

1. 开启评论功能

在 WordPress 后台,选择“设置”->“讨论”,勾选“允许网站上发布评论”的选项,并设置其他相关选项(如需要审核、允许评论者使用 HTML 标记等)。

2. 在主题中添加评论模板代码

在 WordPress 主题的《single.php》或《page.php》等页面文件中添加以下代码:

<?php
if ( comments_open() || get_comments_number() ) {
    comments_template();
}
?> 

其中,代码“comments_open()”用于判断该文章或页面是否开启了评论功能。若是,则使用“comments_template()”函数来加载评论模板。

3. 创建评论模板文件

在主题文件夹中创建“comments.php”文件,并添加以下代码:

<?php
if ( post_password_required() ) {
    return;
}
?>

<div id="comments" class="comments-area">

    <?php // 显示评论列表
    if ( have_comments() ) :
        ?>
        <h2 class="comments-title">
            <?php
            $comments_number = get_comments_number();
            if ( '1' === $comments_number ) {
                printf(
                    /* translators: %s: Post title. */
                    esc_html__( 'One thought on &ldquo;%s&rdquo;', 'textdomain' ),
                    '<span>' . esc_html( get_the_title() ) . '</span>'
                );
            } else {
                printf( // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
                    /* translators: 1: Number of comments, 2: Post title. */
                    esc_html( _nx( '%1$s thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', $comments_number, 'comments title', 'textdomain' ) ),
                    number_format_i18n( $comments_number ),
                    '<span>' . esc_html( get_the_title() ) . '</span>'
                );
            }
            ?>
        </h2><!-- .comments-title -->

        <ol class="comment-list">
            <?php
            wp_list_comments(
                array(
                    'style'      => 'ol',
                    'short_ping' => true,
                    'avatar_size'=> 50,
                )
            );
            ?>
        </ol><!-- .comment-list -->

        <?php
        the_comments_pagination(
            array(
                'prev_text' => __( 'Previous', 'textdomain' ),
                'next_text' => __( 'Next', 'textdomain' ),
            )
        );

    endif; // have_comments()

    // 如果评论已关闭并且没有评论时显示特殊信息
    if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) :
        ?>
        <p class="no-comments"><?php esc_html_e( 'Comments are closed.', 'textdomain' ); ?></p>
    <?php endif; ?>

    <?php // 显示发表评论表单
    comment_form();
    ?>

</div><!-- #comments --> 

以上代码实现了以下功能:

  • 显示评论列表;
  • 显示评论分页导航;
  • 显示发表评论表单。

注意:上述代码中涉及的文本(如“One thought on “%s””)应根据实际情况进行本地化处理,以便支持多语言。具体实现方法可参考 WordPress 本地化文档。

4. 更改评论样式(可选)

如果需要自定义评论列表和评论表单的样式,可使用 CSS 来修改。以下为示例代码,供参考:

/*--------------------------------------------------------------
## Comment
--------------------------------------------------------------*/
ol.comment-list,
ul.social-share,
.pingback, 
.trackback {
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
    border: none;
}
ol.comment-list li {
    margin-bottom: 30px;
    padding: 15px;
    border: 1px solid #ededed;
    border-radius: 3px;
    background-color: #fff;
}
.comment-author {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
}
.comment-content {
    font-size: 14px;
    margin-bottom: 10px;
}
.comment-metadata {
    margin-top: 10px;
    font-size: 12px;
}
.reply {
    font-size: 12px;
    margin-left: 10px;
}
.comment-form {
    margin-top: 30px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
    display: block;
    width: 100%;
    padding: 10px;
    border: 1px solid #ededed;
    border-radius: 3px;
    margin-bottom: 15px;
    font-size: 14px;
}
.comment-form input[type="submit"] {
    background-color: #7f7f7f;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
}
.comment-form input[type="submit"]:hover {
    background-color: #333;
} 

阅读文章或者观看视频过程中有任何问题,请下方留言或者联系我Q248758228

大家谈论
    我的见解
    目录