2023-06-11 / 1130阅
在 WordPress 后台,选择“设置”->“讨论”,勾选“允许网站上发布评论”的选项,并设置其他相关选项(如需要审核、允许评论者使用 HTML 标记等)。
在 WordPress 主题的《single.php》或《page.php》等页面文件中添加以下代码:
<?php
if ( comments_open() || get_comments_number() ) {
comments_template();
}
?>
其中,代码“comments_open()”用于判断该文章或页面是否开启了评论功能。若是,则使用“comments_template()”函数来加载评论模板。
在主题文件夹中创建“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 “%s”', '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 “%2$s”', '%1$s thoughts on “%2$s”', $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 本地化文档。
如果需要自定义评论列表和评论表单的样式,可使用 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