WordPress アイキャッチ画像の上にカテゴリ名を表示

2016年4月12日 WordPress コメント

【更新情報】2017年6月7日文言等を追記・修正しました。

前回、アイキャッチ画像の表示方法を紹介しましたが、
今回は、アイキャッチ画像の上にカテゴリ名を表示させてみたいと思います。

画像の上に文字を重ねて表示する方法
カテゴリ名の取得方法
まとめ

画像の上に文字を重ねて表示する方法

画像の上に文字を重ねて表示するには、
CSSのpositionプロパティのrelativeとabsoluteを使います。
順を追って説明します。

【step1】アイキャッチ画像の下に出力させたい文字を書く

アイキャッチ画像は、前回のブログ（WordPress アイキャッチ画像の追加方法）で説明したように、the_post_thumbnail()で出力します。
したがって、まずは、the_post_thmbnail()の下に出力させたい文字を書きます。
この段階では、まだ画像の上に文字は出力されません。

【step2】画像と文字をposition:relativeで指定

次に、画像と文字（p要素）を纏めてdiv要素で囲み、クラスを指定します。
CSSファイルで、このクラスのpositionプロパティをrelativeに指定します。
この時点では、まだ表示に変化はありません。

【step3】文字をposition:absoluteで指定

次に、文字(p要素）にクラス名をつけ、CSSファイルで、positionプロパティをabsoluteに指定します。
これで、画像の上に文字が重ねて表示されました。
文字の配置を調整するには、top, left, right, bottomで調整していきます。

カテゴリ名の取得方法

さて、ここまでくれば、あとは、カテゴリ名を取得できれば、
画像の上にカテゴリ名が表示できます。
カテゴリ名を取得するには、get_the_category()を使用します。
以下のソースを出力させたい文字の部分に貼り付けてください。

<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>

1	<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>

これで、カテゴリ名がアイキャッチ画像の上に表示されました。

補足説明：
get_the_category（）関数では、カテゴリ名以外にも色々な情報が取得できます。
以下のサイトを参考にすれば良いと思います。
WordPress公式オンラインマニュアル

まとめ

画像を重なるには
・画像と文字をdivで囲み、position:relativeで指定する。
・重ねたい文字をposition:absoluteで指定する。
カテゴリ名を取得するには
・get_the_category()を使用する。

以上、アイキャッチ画像の上にカテゴリ名を表示する方法でした。
参考になれば幸いです。

以下記事では、今回表示させたカテゴリー名を色分けする方法も紹介しています。
↓↓よろしければ続けてどうぞ！！

WordPress アイキャッチ画像の上にカテゴリ名を表示