アイキャッチ画像の上にカテゴリーを重ねて表示しているサイトをたまに見かけます。
おしゃれだなーと思っていたので、テーマTwentySeventeenのコードをいじくってみました。
その時の実装方法をご紹介します。
Contents
準備
修正するPHPファイルは以下のとおりです。あらかじめ子テーマに配置しておきましょう。
- style.css：フォルダパス ⇒ public_html/wp-content/themes/子テーマ/
- content.php：フォルダパス ⇒ public_html/wp-content/themes/子テーマ/template-parts/post/
失敗しても復元できるように、バックアップを取っておくと良いでしょう。
また、以下の記事で、トップページが一覧表示されるようにカスタマイズしていますので、よろしければ参考にしてください。
一覧表示された状態でアイキャッチ画像の上にカテゴリを重ねて表示した方が、良い見栄えになります！
カスタマイズ方法
content.phpの変更
まず、content.phpファイルの以下のコードを探してください。どこかに書いてあるはずです。
|
1 2 3 4 5 6 7 |
<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?> <div class="post-thumbnail"> <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?> </a> </div><!-- .post-thumbnail --> <?php endif; ?> |
これを見つけたら、</a>の後に、以下のコードを追加します。
|
1 2 3 |
<p class = "thumbnail-category-tag"> <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?> </p> |
追加すると、このようなコードになります。
|
1 2 3 4 5 6 7 8 9 10 |
<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?> <div class="post-thumbnail"> <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?> </a> <p class = "thumbnail-category-tag"> <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?> </p> </div><!-- .post-thumbnail --> <?php endif; ?> |
ちょっとだけ解説
<?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の最後に追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.post-thumbnail .thumbnail-category-tag { position:absolute; top: 0px; color: #fff; background-color: rgba(45,135,226,0.8); font-size: 0.8em; padding: 5px 6px; font-weight:700; } .post-thumbnail{ position:relative; } |
rgba()の最後を0.8(1以下)に設定して、ちょっと透過させる謎のこだわりをしてみました。
完成品
このように、アイキャッチ画像にカテゴリー名が重ねて表示されるようになりました。
ちなみにカテゴリーを階層化している場合は、子のカテゴリーが表示されます。
応用編：カテゴリー毎に背景を色分けする
上記のカスタマイズを少し変えて、カテゴリー別に色を変更する方法をご紹介します。
content.phpの変更
先ほど、</a>の前に、コードを入力しましたが、カテゴリー毎に背景を変えたい場合は、以下のコードを追加します。
|
1 2 3 |
<p class = "thumbnail-category-tag <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>"> <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?> </p> |
ちょっとだけ解説
thumbnail-category-tagの他に、<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>というクラスを追加しています。
これは、カテゴリーのスラッグを取得するコードです。
スラッグとは、カテゴリーで指定する以下の赤枠で囲まれた内容のことです。
これを指定しないと、カテゴリー別に色分けすることができませんので、注意してください。
追加すると、このようなコードになります。
|
1 2 3 4 5 6 7 8 |
<div class="post-thumbnail"> <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?> </a> <p class = "thumbnail-category-tag <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>"> <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?> </p> </div><!-- .post-thumbnail --> |
style.cssの変更
取得したスラッグ名を使って、色の指定を行います。
以下の様にコードを設定しました。これをstyle.cssの最後に追加します。
※スラッグ名（以下の.racing-carと.work）は、ご自分の環境に合わせて修正してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* カテゴリー表示の共通設定 */ .post-thumbnail .thumbnail-category-tag { position:absolute; top: 0px; color: #fff; font-size: 0.8em; padding: 5px 6px; font-weight:700; } .post-thumbnail{ position:relative; } /* 以下、スラッグ名毎に色を指定 */ .post-thumbnail .racing-car{ background-color: rgba(45,135,226,0.8); } .post-thumbnail .work{ background-color: rgba(255,204,123,0.8); } |
完成品
以下のように、カテゴリー別に背景を色分けをすることができました。
カテゴリーが増えたらstyle.cssに追加する必要がありますが、ぜひお試しください！
