WordPressの「Lightning」でカテゴリーを複数表示させる

(備忘録程度のまとめ方にしております)

以前、投稿ページや投稿一覧でカテゴリーを複数表示させる設定を行っていたが、Lightningを更新(Ver9.0.7)したら元に戻ってしまった。

1.以前

1.親テーマの「module_loop_post_meta.php」を子テーマにコピーし、
●コード1

<?php
   $taxonomies = get_the_taxonomies();
   if ($taxonomies):
       // get $taxonomy name
       $taxonomy = key( $taxonomies );
       $terms  = get_the_terms( get_the_ID(),$taxonomy );
       $term_url   = esc_url(get_term_link( $terms[0]->term_id,$taxonomy));
       $term_name  = esc_html($terms[0]->name);
       $term_color = '';
       if ( class_exists( 'Vk_term_color' ) ) {
               $term_color = Vk_term_color::get_term_color( $terms[0]->term_id );
               $term_color = ( $term_color ) ? ' style="background-color:'.$term_color.';border:none;"': '';
           }
       echo '<span class="entry-meta_items entry-meta_items_term"><a href="'.$term_url.'" class="btn btn-xs btn-primary"'.$term_color.'>'.$term_name.'</a></span>';
   endif;
?>

この部分を

●コード2

<?php
   $taxonomies = get_the_taxonomies();
   if ($taxonomies):
       // get $taxonomy name
       $taxonomy = key( $taxonomies );
       $terms  = get_the_terms( get_the_ID(),$taxonomy );
       $echo_string = '<div class="multiple_categories">%s</div>';
       $categories_string = "";
       foreach ($terms as $term){
           $term_url   = esc_url(get_term_link( $term->term_id,$taxonomy));
           $term_name  = esc_html($term->name);
           $term_color = '';
           if ( class_exists( 'Vk_term_color' ) ) {
                   $term_color = Vk_term_color::get_term_color( $term->term_id );
                   $term_color = ( $term_color ) ? ' style="background-color:'.$term_color.';border:none;"': '';
               }
           $categories_string .= '<span class="entry-meta_items entry-meta_items_term"><a href="'.$term_url.'" class="btn btn-xs btn-primary"'.$term_color.'>'.$term_name.'</a></span>';
       }
       if ($categories_string != ''){
           echo sprintf($echo_string, $categories_string);
       }
   endif;
?>

こちらへ変更。

2.cssで調整。一覧表示のタイトルのサイズも調整

●コード3

.entry-meta_items_term {
   float:none;
   margin-right:3px;
}
.multiple_categories .btn-primary{background-color:#e7e7e7;
   color:#000;
}
.media .media-body .media-heading {font-size:20px;}
@media screen and (max-width: 767px) {
.entry-meta .entry-meta_items_term {
   display: unset;
}
}


2.Lightningの更新後

Lightningの更新をしたら複数表示が1つのみの表示に戻った。

1.調べたら「module_loop_post_meta.php」が使用されておらず、かわりに「template-parts > post > meta.php」に必要なデータがあったので、「meta.php」を子テーマにコピーしコード1に該当する箇所にコード2をペースト。

2.無事に複数表示されたがデザインが変わったので、

●コード4

.entry-meta_items_term {
   float:none;
   margin-right:3px;
}
.multiple_categories .btn-primary{background-color:#E0FFE0 !important;
border:solid 1px green !important;
	color:#000;
	padding:3px;
}
.media .media-body .media-heading {font-size:20px;}
@media screen and (max-width: 767px) {
.entry-meta .entry-meta_items_term {
   display: unset;
}
}

こちらへ変更。ついでにデザインも変えました。

この記事が気に入ったらサポートをしてみませんか?