カテゴリに追加したカスタムフィールドを出力 – Advanced Custom Fields

Web制作

こんにちは。
Web制作者のhikaruです。

今回は、WordPressプラグイン Advanced Custom Fieldsに
ついて解説しています。

カスタムフィールドを出力するコード

次のコードは、カテゴリに登録した、
カスタムフィールドを取得するためのサンプルです。

<?php

//カテゴリーIDを取得
$cate_id = get_queried_object()->cat_ID;

//カスタムフィールド取得用へ変換
$acf_cate_id = 'category_'.$cate_id;

//カスタムフィールドの値を取得
$cat_mv_url = get_field( 'category_image', $acf_cate_id );

?>

カテゴリに登録した、カスタムフィールドを取得するには、IDの前に「category_」をつける必要があります。

コード使用例

上記コードを使用したサンプルを作成していきます。

次のデザインは、アーカイブページ背景画像を、City、Mountain、Ocean、3つのカテゴリで切り分けています。

カスタムフィールド作成

次のようなカスタムフィールドを、カテゴリーに登録しました。

  • フィールドラベル: 「カテゴリーイメージ」
  • フィールド名: 「category_image」
  • フィールドタイプ : 「画像」
  • 返り値のフォーマット : 「画像 URL」

カテゴリに画像を設定する

City、Mountain、Ocean、3つのカテゴリに画像を設定します。

カスタムフィールドを出力

ここでは、header.phpに次のコードを入力しました。

<?php if( is_archive() ) : ?>

<?php

//カテゴリーIDを取得
$cate_id = get_queried_object()->cat_ID;

//カスタムフィールド取得用へ変換
$acf_cate_id = 'category_'.$cate_id;

//カスタムフィールドの値を取得
$cat_mv_url = get_field( 'category_image', $acf_cate_id );
?>

<header style="background: url('<?php echo $cat_mv_url; ?>'); background-size: cover; ">

<?php endif; ?>

アーカイブページが表示されていれば、カスタムフィールドに登録した画像urlを取得。

その後、headerタグにインラインスタイルで、背景画像を設定しています。

今日はここまで。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

関連記事

特集記事

コメント

この記事へのコメントはありません。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

TOP