テーマLightningでカテゴリーを複数表示するようにカスタマイズしました

Photo by freddie marriage on Unsplash

最近テーマLightningをとてもよく使わせていただいています。Lightningでは投稿のカテゴリーは1つのみ表示する形になっているようですが、自分の場合複数のカテゴリーを指定することが多かったためカテゴリーが複数表示されるようにカスタマイズしてみました。

カテゴリーが1つのみの表示から複数に表示するようにした状態はこちら

ゆうそうと でもLightningを利用しています。デフォルトの状態ですと

八王子、電源スペース というカテゴリーを指定してある場合もカテゴリーは1つのみ表示ということになります。これを両方表示できるように

このようにしてみました。カテゴリーが複数ある場合はすべて表示するので、右寄せだとはみ出てしまう可能性もあるため左寄せにして行も変えるようにしてみました。

カテゴリーを複数表示するようにしたときの変更点

カテゴリーを複数表示するようにしたときの変更点は

子テーマに親テーマのmodule_loop_post_meta.phpをコピーしてカスタマイズ
カテゴリー表示部分のcssを追加する

というものでした。

子テーマに親テーマのmodule_loop_post_meta.phpをコピーしてカスタマイズ

親テーマ(lightning)にあるmodule_loop_post_meta.phpを子テーマにコピーします。そしてコードを

ファイルの最後にある、この部分を

このように変更します。変更したところはカテゴリーがある分だけループして編集して、カテゴリーをdivで囲って表示するというところです。

cssを変更する

カテゴリーの複数表示に対応するために子テーマのstyle.cssにコードを追加しました。
以下の通りです。

追加したcssではカテゴリーを右寄せに表示していた部分をなくして、複数のカテゴリーを表示するため margin-right でカテゴリー間の空きを作りました。また、幅が狭まったときにカテゴリーが1行ずつになってしまったので、その部分を display:unset で改行しないようにしました。

修正するときのご注意

このブログはこの時点で私の環境などでのカスタマイズを行ったときの内容を書いています。環境が違ったり時間が経っていろいろなもののバージョンが異なったり、その他様々な理由で同じように修正しようとしたときに不具合が起こることも考えられます。

このゆうそうとブログでは今まで自分が行ったいろいろなカスタマイズについて書いてきました。ブログはだいぶ前から書いているので「当時の環境と...

こちらのブログを参照していただければ幸いです。カスタマイズはご自分の責任で行ってください。

もしも不安がありましたら有償対応も可能ですので、是非ゆうそうとへご相談ください(^^)/

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

267人の購読者に加わりましょう

トップへ戻る