アイキャッチ画像の上にカテゴリーを重ねて表示しているサイトをたまに見かけます。

おしゃれだなーと思っていたので、テーマTwentySeventeenのコードをいじくってみました。

その時の実装方法をご紹介します。

スポンサーリンク



準備

修正するPHPファイルは以下のとおりです。あらかじめ子テーマに配置しておきましょう。

  • style.css:フォルダパス ⇒ public_html/wp-content/themes/子テーマ/
  • content.php:フォルダパス ⇒ public_html/wp-content/themes/子テーマ/template-parts/post/

失敗しても復元できるように、バックアップを取っておくと良いでしょう。

また、以下の記事で、トップページが一覧表示されるようにカスタマイズしていますので、よろしければ参考にしてください。

一覧表示された状態でアイキャッチ画像の上にカテゴリを重ねて表示した方が、良い見栄えになります!

 

カスタマイズ方法

content.phpの変更

まず、content.phpファイルの以下のコードを探してください。どこかに書いてあるはずです。

 

これを見つけたら</a>の後に、以下のコードを追加します。

 

追加すると、このようなコードになります。

 

ちょっとだけ解説

<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>はカテゴリー名を表示するコードです。

これを、アイキャッチ画像を表示するコード<?php the_post_thumbnail( ‘twentyseventeen-featured-image’ ); ?>がある箇所に追加しました。

また、カテゴリー名には後ほどcssファイルで背景を色付けするため、ここで<p  class = “thumbnail-category-tag”>というクラスを指定しています。

 

style.cssファイルの変更

カテゴリー名を表示する位置の調整と、デザインを変更していきます。

私は以下のとおりにしました。これをstyle.cssの最後に追加します。

rgba()の最後を0.8(1以下)に設定して、ちょっと透過させる謎のこだわりをしてみました。

 

完成品

このように、アイキャッチ画像にカテゴリー名が重ねて表示されるようになりました。

ちなみにカテゴリーを階層化している場合は、子のカテゴリーが表示されます。

thumbnail-category-tag02

応用編:カテゴリー毎に背景を色分けする

上記のカスタマイズを少し変えて、カテゴリー別に色を変更する方法をご紹介します。

content.phpの変更

先ほど、</a>の前に、コードを入力しましたが、カテゴリー毎に背景を変えたい場合は、以下のコードを追加します。

 

ちょっとだけ解説

thumbnail-category-tagの他に<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>というクラスを追加しています。

これは、カテゴリーのスラッグを取得するコードです。

スラッグとは、カテゴリーで指定する以下の赤枠で囲まれた内容のことです。

thumbnail-category-tag01

これを指定しないと、カテゴリー別に色分けすることができませんので、注意してください。

追加すると、このようなコードになります。

 

style.cssの変更

取得したスラッグ名を使って、色の指定を行います。

以下の様にコードを設定しました。これをstyle.cssの最後に追加します。

※スラッグ名(以下の.racing-carと.work)は、ご自分の環境に合わせて修正してください。

 

完成品

以下のように、カテゴリー別に背景を色分けをすることができました。

thumbnail-category-tag03

カテゴリーが増えたらstyle.cssに追加する必要がありますが、ぜひお試しください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です