第一篇文章的评论徽章在最后一篇文章中显示

Question

我有我的第一个自定义 WordPress 网站（完全是新手，甚至不会说谎）并且运行良好，除了这个烦人的问题，谷歌搜索也无济于事。这是问题所在的链接：http://tvmopperator.com/blog/

我的自定义帖子 cmets 徽章在博客帖子的 content-page.php 上显示良好，直到我发布更多内容，然后只有第一篇帖子的徽章显示在最后一篇帖子上。是的，第一篇文章的评论徽章显示在最近的一篇文章中，其中包含正确的评论计数和第一篇文章的链接，但它附加到最后一篇文章（哎呀！）。其他帖子（包括第一个）都没有显示徽章。我已经花了一整天的时间，所以这将是我的第一个 * 问题。

这是评论徽章代码：

<div class="post-comments-badge">
     <a href="<?php comments_link(); ?>"><i class="fa fa-comments"></i> <?php comments_number( 0, 1, '%' ); ?></a>
</div><!-- post-comments-badge -->

这与我在个别摘录帖子的“content.php”文件中的完全一样，所以这可能是问题所在......但这就是我的导师所做的。

我正在学习关于 Udemy 的课程：https://www.udemy.com/bootstrap-to-wordpress/learn/v4/content

对于此事的任何帮助将不胜感激。

Answer 1

它只显示一个评论徽章的原因是因为您的 post-comments-badge 类具有绝对位置样式，使其固定在一个位置，因此您的所有评论徽章都相互重叠。

这是代码中存在问题的部分：

.post-comments-badge 
{
height: 70px;
width: 70px;
position: absolute;
top: 25px;
right: 20px;
border: none;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background: #4c213d;
text-align: center;
display: table;
}

删除

position: absolute;  
top: 25px;
right: 20px; 

结果代码：

.post-comments-badge 
{
height: 70px;
width: 70px;
float: right;
clear: right;
border: none;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background: #4c213d;
text-align: center;
display: table;
}