【WordPress】カテゴリー・タグアーカイブページにアイキャッチ画像を表示
WordPressの投稿ページや固定ページでは、ページごとに画像を設定できるアイキャッチ画像があります。
そのアイキャッチ画像は、カテゴリー・タグアーカイブページでは設定できませんが、今回はプラグインAdvanced Custom Fields（ACF）を使い、アイキャッチ画像の代わりとなるカスタムフィールドをカテゴリー・タグアーカイブページに追加する例となります。
ACFを使いカテゴリー・タグアーカイブページに画像を追加し表示する例
今回の例では、プラグインAdvanced Custom Fields（ACF）を使い、カテゴリー・タグアーカイブページに画像を追加する項目を作成します。
それにより、カテゴリー・タグアーカイブページなどで、アイキャッチ画像のように任意の画像を設定し出力することが出来るようになります。
ACFで画像のカスタムフィールドを追加
まずは、以下の手順でアーカイブページに画像のカスタムフィールドを追加します。
ACFをインストールし有効化すると、WordPressの管理画面のメニューに「カスタムフィールド」が表示されるので、その「カスタムフィールド」の設定画面から、「新規追加」ボタンをクリックし「フィールドグループ」を追加します。
フィールドグループを新規追加すると、「フィールドグループ」の設定画面に移動するので、今回の例では、フィールドグループ名を「ターム・アーカイブ」とします。
そして、「フィールドグループ」の設定画面上にある「＋フィールドを追加」をクリックしてカスタムフィールドを追加します。
「＋フィールドを追加」をクリックすると、カスタムフィールドが追加され編集できるので、今回の例では3つの必須項目を以下のとおり設定します。
- 「フィールドラベル」には「ターム画像」と入力
- 「フィールド名」には「term_eyecatch」と入力
- 「フィールドタイプ」には「画像」を設定
また、その他のカスタムフィールドの編集項目はデフォルトのままの設定でいいですが、例では「画像オブジェクト」を取得して画像を出力するので、「返り値」の項目は必ず「画像オブジェクト」とします。
次に、「フィールドグループ」の設定画面の「位置」の項目から、追加したカスタムフィールドをどのページに表示させるかを設定します。
設定では、左から順番に「Taxonomy term」「等しい」「全て」とすることにより、カテゴリー・タグなどのアーカイブページに追加したカスタムフィールドを表示させます。
上記の設定後、「フィールドグループ」の設定画面上にある「公開」ボタンをクリックします。
カテゴリー・タグアーカイブページで画像を指定
次に、カテゴリーまたはタグアーカイブページに上記で設定したカスタムフィールド「ターム画像」を指定します。手順は以下となります。
WordPress管理画面の「投稿」内の「カテゴリー」または「タグ」に移動し、画像を追加したいカテゴリーまたはタグの編集ページに移動します。
カテゴリー・タグの編集画面の項目に「ターム画像」が追加されているので、「画像を追加する」ボタンから画像を選択します。
画像のカスタムフィールドを出力するソースコードの例
以下は、上記で設定したカスタムフィールド「ターム画像」を出力するソースコードの例となり、カテゴリー・タグアーカイブページで画像を出力したい箇所に記述します。
<?php
// 現在のページのオブジェクトを取得
$obj = get_queried_object();
// タクソノミーを取得
$tax = $obj->taxonomy;
// タームIDを取得
$term_id = $obj->term_id;
// アーカイブページのIDをタクソノミー名とタームIDから作成
$archive_id = $tax . '_' . $term_id;
// カスタムフィールドの値（画像情報）を取得
$img_array = get_field( 'term_eyecatch', $archive_id );
// 画像のURLを取得。2つ目のキーには、thumbnail、largeなどのサイズを指定
$img_url = $img_array['sizes']['medium'];
// 画像のaltを取得
$img_alt = $img_array['alt'];
// 画像を出力
if( $img_array ) {
echo '<img src="' . esc_url( $img_url ). '" alt="' . esc_attr( $img_alt ). '" />';
}
?>ソースコードについて
以下は、例のソースコードのポイントとなる箇所となります。
get_queried_object関数
get_field関数を使いアーカイブページのカスタムフィールドの値を取得するためには、タクソノミー名とタームIDを_（アンダースコア）でつなげた文字列が必要となります。
そのため、例では、タクソノミー名とタームIDが取得できるget_queried_object関数を使用しています。get_queried_object関数については、以下のリンク先を参考にしてみてください。
get_field関数
get_field関数は、カスタムフィールドの値を取得するACFの独自関数となります。第1引数にキー名、第2引数に投稿IDを指定しますが、今回の例では、カテゴリー・タグアーカイブページのカスタムフィールドの値を取得するため、投稿IDには上記get_queried_object関数から取得した値から作成したIDを指定しています。
それにより、カテゴリー・タグアーカイブページのカスタムフィールドの値を取得することができます。
また、Advanced Custom Fields（ACF）で使用できる関数については、以下のリンク先を参考にしてみてください。
取得した画像情報
例では、カスタムフィールドの値は、配列で格納されている画像情報を取得しました。そして、その画像情報の中から「mediumサイズの画像URL」と「altの値」を使用しました。
また、「mediumサイズの画像URL」や「altの値」以外にも画像情報はありますので、画像情報の配列をvar_dump()などで確認してみてください。
セキュリティ対策として出力をエスケープ処理
カスタムフィールドの値から取得した画像の「mediumサイズの画像URL」と「altの値」を出力する際、セキュリティ対策のため、esc_url、esc_attr関数で値のエスケープ処理をしています。
値のエスケープ処理については、以下のリンク先を参考にしてみてください。