WordPress 投稿記事一覧ページでカテゴリーが無い時はCSSをあてない方法。

完成イメージは、下記画像のように投稿記事一覧ページでカテゴリーが指定されていない時は、日付けの横に出力されているカテゴリーに当てているCSSを当てない方法を考えています。

コードは以下のように書いています。

HTML
1		<ul>
2			<?php
3			$paged = get_query_var('paged') ? get_query_var('paged') : 1;
4			$args = array(
5				'post_type' => 'news',
6				'posts_per_page' =>10,
7				'paged' => $paged
8			);
9			$news_query = new WP_Query( $args );
10			if ( $news_query->have_posts() ) :
11				while ( $news_query->have_posts() ) :
12					$news_query->the_post();
13			?>
14			<li><a href="<?php the_permalink(); ?>">
15				<div class="news_article__wrap">
16					<p class="news_date"><?php the_time('Y.m.d'); ?></p>
17					<p class="news_category"><?php
18						if ($terms = get_the_terms($post->ID, 'news_category')) {
19							foreach ( $terms as $term ) {
20								echo esc_html($term->name);
21							}
22						}
23						?>
24						</p>
25				</div>
26				<p class="news_article__title"><?php the_title(); ?></p>
27				</a>
28			</li>
29			<?php endwhile;
30			if(function_exists('wp_pagenavi')){
31				wp_pagenavi(array('query'=>$news_query));
32			}
33			endif;
34			wp_reset_postdata();?>
35		</ul>

scss
1      ul{
2          li{
3              margin-bottom: 32px;
4              a{
5                display: block;  
6                border-bottom: 1px solid #E8E8E8;
7                padding-bottom: 15px;
8                position: relative;
9                  .news_article__wrap{
10                      display: flex;
11                      margin-bottom: 7px;
12                      .news_date{
13                          @include f(14,"Overpass",2);
14                          color: $accent;
15                          font-weight: bold;
16                      }
17                      .news_category{
18                          @include f(11,"",2);
19                          border: 1px solid $accent;
20                          border-radius: 100px;
21                          padding: 1px 9px;
22                          margin-left: 10px;
23                      }
24                  }
25              ////news_article__wrap//// 
26                 .news_article__title{
27                    text-align: left;
28                    @include f(14,"",0);
29                 }
30              }
31              a:after{
32                position: absolute;
33                content: "";
34                right: 0;
35                bottom: -1px;
36                width: 20px;
37                height: 1px;
38                background-color: $accent;
39                transition: width .3s cubic-bezier(.215,.61,.355,1) 0s;
40              }
41              a:hover:after{
42                  width: 100%;
43                  border-bottom: 1px solid $accent;
44                  transition: all .6s ease;
45              }
46          }
47          li:last-of-type{
48              margin-bottom: 0;
49          }
50      }

上記コードでは下記画像のようにカテゴリーが指定されていない記事にも、CSS .news_categoryに記載している、

css
1                      .news_category{
2                          @include f(11,"",2);
3                          border: 1px solid $accent;
4                          border-radius: 100px;
5                          padding: 1px 9px;
6                          margin-left: 10px;
7                      }

が出力されています。

投稿記事にカテゴリーの指定がない場合は、CSS .news_categoryを当てないようにするにはどうすれないいでしょうか?

行動規範の内容に同意します

回答1件

ベストアンサー

カテゴリーが設定されている場合のみ <p class="news_category"> を出力させるようにしてはいかがでしょうか？

php
1if ($terms = get_the_terms($post->ID, 'news_category')) {
2	echo ('<p class="news_category">');
3	foreach ( $terms as $term ) {
4		echo esc_html($term->name);
5	}
6	echo ('</p>');
7}