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

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

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

以前

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

 

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

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