Question

我有我的第一个定制的WordPress网站（总newb，甚至不会说谎）并且运行良好，除了这个恼人的问题和谷歌搜索没有帮助。以下是问题所在的链接：http://tvmopperator.com/blog/

我的自定义帖子评论徽章在博文的content-page.php上显示正常，直到我发布更多内容，然后只有第一篇文章的徽章在最后一篇文章中显示 < / strong>即可。是的，第一篇文章的评论徽章显示在最新帖子上，其中包含正确的评论计数和第一篇帖子的链接，但它附在最后一篇帖子上（yikes！）。其他帖子（包括第一个）都没有显示徽章。我花了一整天时间，所以这将是我的第一个stackoverflow问题。

以下是评论徽章代码：

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

这与我在个别摘录帖子的“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;
}

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

1 个答案: