コメントの最初の投稿のバッジ最後の投稿のためのバッジ

Question

私は私の最初のカスタマイズされたワードプレスサイト（全部のニューバス、うそをつくつもりはない）があり、この1つの厄介な問題とグーグルが助けになりません。私はより多くを投稿するまでhttp://tvmopperator.com/blog/

マイカスタムポストのコメントのバッジがブログ記事の内容-page.php上の罰金を現れ、その後、最初の投稿のための唯一のバッジは、上を示しています。ここに問題があるリンクです最後の投稿。はい、最初の投稿のコメントバッジは、最初の投稿のコメント数とリンクが正しい最新の投稿に表示されますが、最後の投稿（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><!-- post-comments-badge --> 

これは、それが問題であるかもしれないので、私は、個々の抜粋記事の「content.php」ファイルを持っているとまったく同じです...しかし、それは何私のインストラクターですした。

私はUdemyのコースを、次のよ：https://www.udemy.com/bootstrap-to-wordpress/learn/v4/content

は問題上の任意のヘルプをお願い申し上げます。

Answer 1

post-comments-badgeクラスに絶対位置スタイリングがあり、1つの位置に固定されているため、すべてのコメントバッジが重なり合っているためです。

これはあなたのコードで問題一部です：

.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; 
}