記事一覧ページのサムネイルにカテゴリーアイコンをつける方法
と言うことで、久々のWordpressネタです。
今回は、記事一覧ページ（アーカイブ一覧）のサムネイルにカテゴリーラベルをつけてみます。
いろいろなページを見ていると、サムネイルにカテゴリー名が張ってあるページをよく見かけます。
普通に考えればそれ専用の画像を用意すれば、アナログに同じことを出来ますがWordpressであれば、少しコードをいじるだけで自動で貼り付けが可能となります。
すごい便利。
趣味でホームページをやっていてもこういう機能はやっぱり便利です。
全く、PHPとかCSSとか勉強していない私でも実装できたのでメモがてら書き留めます。
作業1 編集すべきphpを探す
この作業は、最初からPHPを改変とかすると大事故が起きるので、まずは動作チェックです。
使っているテンプレートによって場所は違いますが、今回は記事一覧ページ（アーカイブページ）・ブログページのところです。
archive.phpが該当のファイルになりますがテンプレートによっては、そこから別のphpを読み込んでいる場合がありますので、テンプレートの親テンプレートを開いて、まずはarchive.phpを探してください。
ystanderdの場合は、template-partsの先にarchive.phpがありますが、実際動いているのはその先のtemplate-parts/archive/details.phpが動いています。
リスト型の場合はここ。
カード型で表示している人はtemplate-parts/archive/details-card.phpです。
今回編集したいのはリスト型なのでtemplate-parts/archive/details.phpを子テーマに移植して、編集していきます。
※content.phpがありますがこれはまた違うものです。
作業2 サムネイルに文字を表示させる
まずは、リスト表示している記述からサムネイルを呼び出しているコードを探します。
サムネイルの呼び出しには<?php if ( has_post_thumbnail() ) : ?>を使っているようなので、その記述を見つけます。
details.phpには16行目に書いてあるのでそのあたりを見ると
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php if ( has_post_thumbnail() ) : ?> <div class="ratio__item"> <figure class="ratio__image"> <?php the_post_thumbnail('post-thumbnail' ,array( 'class' => 'archive__image', 'alt' => get_the_title(), ) ); ?> |
と書いてあります。
これは、呼び出したサムネイルにdivとfigureで囲ってクラスを付与しているようですね。
さて、出力されているコードはこのあたりなので、コードをぶった切らないように閉じてある後ろにとりあえず、何か文字を入れてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php if ( has_post_thumbnail() ) : ?> <div class="ratio__item"> <figure class="ratio__image"> <?php the_post_thumbnail('post-thumbnail' ,array( 'class' => 'archive__image', 'alt' => get_the_title(), ) ); ?> `<p> かてごりーらべる </p>` |
適用後、実際に見てみると・・・・
ページを確認しても、表示されませんでした。
ただ、ここで焦っても仕方ありません。コードにエラーは無いので、Chromeの検証でコード内に記述が無いか調べます。
検索してみると、やっぱりいます。
と言うことは何かしらのCSS表記で、見えないんでしょうね。
なので、これを表示させるためにCSSをいじっていきます。
作業2 CSSでラベルの表示設定
端的に言えば、
画像周りのクラス（上位クラス）に
CSS
|
1 2 3 4 |
div.flex__col--1 flex__col--md-auto{ position:relative; } |
で、position:relativeを与えます
次に
PHPにさっきの”かてごりーらべる”にクラスを与えるように指示を出す
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php if ( has_post_thumbnail() ) : ?> <div class="ratio__item"> <figure class="ratio__image"> <?php the_post_thumbnail('post-thumbnail' ,array( 'class' => 'archive__image', 'alt' => get_the_title(), ) ); ?> <p class="label-"> かてごりーらべる </p> |
CSSには
|
1 2 3 4 |
p.label-{ position: absolute; } |
を追加で指定。こうすることで、画像のところに”かてごりーらべる”を表示するようになります。
クラス名をlabel-にしているのは後にカテゴリースラッグ別に色分けするのにわかりやすくするためです。
表示を確認すると文字がどこかに表示されているはず。
Chromeの開発者ツールで探してください。
ここまで来れば、もう後は簡単です。
作業3 本題 カテゴリー名を取得する
”かてごりーらべる”なんて文字を表示させても意味不明なので、カテゴリー名をちゃんと取得して記事ごとにカテゴリー名を表示させます。
さっきのPHPのPタグのかてごりーらべるをそのままPHPのコードに変更するだけです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php if ( has_post_thumbnail() ) : ?> <div class="ratio__item"> <figure class="ratio__image"> <?php the_post_thumbnail('post-thumbnail' ,array( 'class' => 'archive__image', 'alt' => get_the_title(), ) ); ?> <p class="label-"> <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?> </p> |
これで出力される文字はカテゴリー名になりました。
文字だけ写ればよければこれで9割終了です。
作業4 色分けしたい
単一色だと見栄えが悪いので次にカテゴリー別に色分け。
カテゴリー別にクラスを設けます。
クラスはスラッグから取るので
|
1 2 3 4 5 6 7 8 9 10 |
<code> <p class="label-<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>"> <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?> </p> </code> |
こうやって、クラスのところに追記してあげるとlabel-の後ろにスラッグが挿入されます。
これで、表示されるカテゴリー名にそれぞれスラッグ分けしたクラスが付与されるので、カテゴリー別に色分けが可能になります。
ここまでをまとめるとdetails.phpには
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php if ( has_post_thumbnail() ) : ?> <div class="ratio__item"> <figure class="ratio__image"> <?php the_post_thumbnail( 'post-thumbnail', array( 'class' => 'archive__image', 'alt' => get_the_title(), ) ); ?> <p class="label-<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>"> <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?> </p> </figure> </div> |
こんな感じに仕上げました。
これで、カテゴリー名を表示することが可能になりました。
やっていることは、サムネイルの次にスラッグのクラスを付与したカテゴリー名を表示すると言うことです。
作業5 クラスを元にCSSで調節する
今度はCSSのまとめです。
まずはラベル位置。
位置調整はまず、サムネイルを起点にするので
|
1 2 3 4 5 6 7 |
/*カテゴリーラベル*/ /*サムネイル*/ div.flex__col--1 flex__col--md-auto{ position:relative; } |
で設定。
文字には
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*ラベル本体*/ p.label-pc , .label-cbr250rr , .label-xanthus, .label-peugeot206, .label-blog{ position: absolute; font-weight: bold; opacity:0.8; top: -5px; right: -5px; font-size:0.7em; padding: 5px 10px; border-radius: 1px 0px 100px 100px; } |
このようにCSSを設定します。
これは結局、該当の文字を任意の位置にして背景の形とかを指定しているだけです。
文字別に色分けをするのは次の記述。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/*色分け*/ p.label-pc{ background-color:#E040FB; color:#FAFAFA; font-weight:600; } p.label-cbr250rr{ background-color:#FF4081; color:#212121; } p.label-xanthus{ background-color:#76FF03; color:#212121; } p.label-peugeot206{ background-color:#3D5AFE; color:#FAFAFA; } p.label-blog{ background-color:#FFAB40; color:#212121; } |
これで、サムネイルにカテゴリー名を表示して色分け完了です。
今回はマテリアルカラーから適当に選んでみました。
終わりに
今回はカテゴリーラベルを搭載しました。
Wordpressのカスタマイズ機能とChromeで動作チェックしながらやりましたがやっぱりライブプレビューは便利です。