首页 问答 正文

如何添加自定义注释样式到wordpress主题中?

注册会员 / 悠然自学 / 2023-06-11/ 浏览 150 次

要添加自定义注释样式到WordPress主题中,可以按照以下步骤:

  1. 在主题文件夹中创建一个新的CSS文件,例如comments.css。

  2. 在该文件中编写自定义注释样式的CSS代码,例如:

.comment {
  background-color: #f7f7f7;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
}

.comment-author {
  font-weight: bold;
  margin-bottom: 10px;
}

.comment-date {
  font-size: 12px;
  margin-bottom: 10px;
}

.comment-content {
  font-size: 14px;
  line-height: 1.5;
} 
  1. 在主题的functions.php文件中添加以下代码:
function mytheme_enqueue_comments_style() {
  wp_enqueue_style( 'mytheme-comments-style', get_template_directory_uri() . '/comments.css' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_comments_style' ); 

这将在主题的头部添加一个外部CSS文件,其中包含自定义注释样式的CSS代码。

  1. 最后,在comments.php文件中找到注释输出的代码,通常是类似于以下的代码:
<?php wp_list_comments(); ?> 

用以下代码替换它:

<?php
  wp_list_comments( array(
    'callback' => 'mytheme_comment',
  ) );
?>

<?php
  function mytheme_comment( $comment, $args, $depth ) {
    ?>
    <div <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
      <div class="comment-author">
        <?php echo get_comment_author_link(); ?>
        <span class="comment-date"><?php echo get_comment_date(); ?> <?php echo get_comment_time(); ?></span>
      </div>

      <div class="comment-content">
        <?php if ( $comment->comment_approved == '0' ) : ?>
          <p><em>等待审核...</em></p>
        <?php endif; ?>

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

      <?php comment_reply_link( array_merge( $args, array(
        'depth' => $depth,
        'max_depth' => $args['max_depth'],
        'reply_text' => '回复',
        'login_text' => '登录以回复',
      ) ) ); ?>
    </div>
    <?php
  }
?> 

这将添加一个自定义的回调函数来输出注释,其中包含前面创建的自定义注释样式。

以上就是如何添加自定义注释样式到WordPress主题中的步骤,需要注意一些细节和修改文件路径和CSS样式。

大家谈论
    我的见解