最近テーマLightningをとてもよく使わせていただいています。Lightningでは投稿のカテゴリーは1つのみ表示する形になっているようですが、自分の場合複数のカテゴリーを指定することが多かったためカテゴリーが複数表示されるようにカスタマイズしてみました。
カテゴリーが1つのみの表示から複数に表示するようにした状態はこちら
ゆうそうと でもLightningを利用しています。デフォルトの状態ですと
八王子、電源スペース というカテゴリーを指定してある場合もカテゴリーは1つのみ表示ということになります。これを両方表示できるように
このようにしてみました。カテゴリーが複数ある場合はすべて表示するので、右寄せだとはみ出てしまう可能性もあるため左寄せにして行も変えるようにしてみました。
カテゴリーを複数表示するようにしたときの変更点
カテゴリーを複数表示するようにしたときの変更点は
・子テーマに親テーマのmodule_loop_post_meta.phpをコピーしてカスタマイズ
・カテゴリー表示部分のcssを追加する
というものでした。
子テーマに親テーマのmodule_loop_post_meta.phpをコピーしてカスタマイズ
親テーマ（lightning）にあるmodule_loop_post_meta.phpを子テーマにコピーします。そしてコードを
<?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;
?>
ファイルの最後にある、この部分を
<?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;
?>
このように変更します。変更したところはカテゴリーがある分だけループして編集して、カテゴリーをdivで囲って表示するというところです。
cssを変更する
カテゴリーの複数表示に対応するために子テーマのstyle.cssにコードを追加しました。
以下の通りです。
/* カテゴリーを複数出す対応のための修正 */
.entry-meta_items_term {
float:none;
margin-right:3px;
}
@media screen and (max-width: 767px) {
.entry-meta .entry-meta_items_term {
display: unset;
}
}
追加したcssではカテゴリーを右寄せに表示していた部分をなくして、複数のカテゴリーを表示するため margin-right でカテゴリー間の空きを作りました。また、幅が狭まったときにカテゴリーが1行ずつになってしまったので、その部分を display:unset で改行しないようにしました。
修正するときのご注意
このブログはこの時点で私の環境などでのカスタマイズを行ったときの内容を書いています。環境が違ったり時間が経っていろいろなもののバージョンが異なったり、その他様々な理由で同じように修正しようとしたときに不具合が起こることも考えられます。
こちらのブログを参照していただければ幸いです。カスタマイズはご自分の責任で行ってください。
もしも不安がありましたら有償対応も可能ですので、是非ゆうそうとへご相談ください(^^)/
コメント