wordpressで投稿の新着を作成しているが、the_categoryに対してcssが効かない

Question

WordPressで、指定した投稿カテゴリーの新着一覧を作ろうとしております。
テーマは、スターターテーマであるunderscoreを使用しており、一通りコーディングしたhtmlやcssのWordPress化を行っています。

<?php the_category(' '); ?>を指定すると、CSSが効かないようで、デザインがくずれてしまいます。

デフォルトのcssが関係しているのか、探ってみたのですがphpは初心者で検討もつかない状況になってしまいました。
調べたところ、the_categoryは、デフォルトでリスト表示になるとの文章を見かけましたが対処法がわかりません。

どうか、お力をお貸しください。
情報を記載しましたら、必要な情報がありましたら、ご教示願います。
よろしくお願い申し上げます。

【表現したいデザイン】
![]

         <?php
$query = new WP_Query(
    array(
        'post_type' => 'post',
        'posts_per_page' => 3,
        'category__in' => array( 2, 3, 4 ),
    )
);
?>
<?php
if ( $query->have_posts() ) : ?>
    <ul class="news-list">
        <?php while ( $query->have_posts() ) : $query->the_post();?>
        
              <li class="news-item">
                  <a href="<?php the_permalink(); ?>">
                      <p class="news-date"><?php the_time('Y年n月j日'); ?></p>
                      <p class="news-category"><span class="news-category_s">カテゴリー名</span></p>
                      <p class="news-title"><?php the_title(); ?></p>
                   </a>
              </li>
        <?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>

</ul>

【崩れてしまうデザイン】

         <?php
$query = new WP_Query(
    array(
        'post_type' => 'post',
        'posts_per_page' => 3,
        'category__in' => array( 2, 3, 4 ),
    )
);
?>
<?php
if ( $query->have_posts() ) : ?>
    <ul class="news-list">
        <?php while ( $query->have_posts() ) : $query->the_post();?>
        
              <li class="news-item">
                  <a href="<?php the_permalink(); ?>">
                      <p class="news-date"><?php the_time('Y年n月j日'); ?></p>
                      <p class="news-category"><span class="news-category_s"><?php the_category(' '); ?></span></p>/* 変更した箇所は、ここだけです。 */
                      <p class="news-title"><?php the_title(); ?></p>
                   </a>
              </li>
        <?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>

</ul>

【共通のCSS】

 /* ----- お知らせリスト ----- */
 
 .news-list{
	list-style: none outside;
	margin: 0;
	padding: 0;
  }
  .news-list .news-item a{
	display: flex;
	flex-wrap: wrap;
	flex-wrap: nowrap;
	text-decoration: none;
	color: #333;
	border-bottom: 1px solid #CCC;
	padding: 20px 20px;
  }
  .news-list .news-item:first-child a{
	border-top: 1px solid #CCC;
  }
  .news-list .news-item .news-date{
	margin: 0;
	min-width: 140px;
	font-size: 16px;
	color: #999;
	padding: 0 20px 0 0;
  }
  .news-list .news-item .news-category{
	margin: 0;
	min-width: 140px;
	padding: 0 20px 0 0;
  }
  .news-category_s {
	background: #ABE3E3;
	color: #FFF;
	text-align: center;
	display: inline-block;
	padding: 5px 20px;
	font-size: 12px;
	line-height: 1;
  }
  .news-list .news-item .news-title{
	margin: 0;
	width: 100%;
  }
  .news-list .news-item a:hover .news-title{
	color:#ABE3E3;
  }
  
  @media screen and (max-width: 767px){
  .news-list .news-item a{
	flex-wrap: wrap;
  }
  .news-list .news-item .news-date{
	min-width: 100px;
  }
  .news-list .news-item .news-title{
	margin-top: 10px;
  }
  }

Answer 1

the_categoryはリンクつきで出力されます。HTMLの文法上、a要素の中にa要素は許容されないので、ブラウザが適当に解釈して表示するために崩れます。
そのため、リンクなしで出力する必要があります。

<?php /* 1個だけ出力する例 */ if ( !empty( $tmp_cat = get_the_category() ) ) { echo $tmp_cat[0]->cat_name; } ?>

【リンク無しのカテゴリーを表示する | WPスイッチ】
https://illustswitch.com/wp/categories-post-belongs-to-nolink/

【get_the_category() | Function | WordPress Developer Resources】
https://developer.wordpress.org/reference/functions/get_the_category/

Comments

[padoma622]

ありがとうございます。ご教授いただいたphpで一瞬で解決しました。参考のURLもありがとうございます。引き続き頑張って勉強していきます。