wordpress

Advanced Custom Fieldsをカテゴリに使用したときの画像の取得出力

投稿日:

カスタムフィールド カテゴリー画像

 

いろいろ試してみた結果、やっとできたので覚書として記事にしました。

 

カスタムフィールドのカテゴリー画像作成

 

Advanced Custom Fieldsのプラグインはあらかじめインストールしているものとして進めます。

 

カスタムフィールドの新規作成

カスタムフィールド追加

カスタムフィールド条件設定

以上で『公開』ボタンをクリック

 

カテゴリーに画像を選択

WordPressのメニュー『投稿』→『カテゴリー』

カテゴリーに画像を表示

画像が登録できたら今度は出力

 

カテゴリー別に画像を好きなところに出力する

 

ここからが悩んだ結果たどり着いた方法です。

別の方法もあるかもしれませんが、いろいろ試した結果うまく表示されたのでひとまず安心

 

single.phpに記述してみた

 

新規投稿したときに、表示されるページが『single.php』なので、

このページのヘッダー部分に、カテゴリーで分けた記事が表示されたときに登録した画像が表示されるようにしたい。

 

<?php
//カスタムフィールドを出力するために、カテゴリIDを取得
$cat=get_the_category();
$cat = $cat[0];
$catid=$cat->cat_ID ;
$post_id = 'category_'.$catid; /* category_1 のような値を取得 */
?>
<?php $attachment_id=get_field('作成したフィールド名を記述',$post_id); echo wp_get_attachment_image($attachment_id,'full'); ?>

 

 
ちなみに、最後の’full’というのは画像サイズ
 
あとは、ヘッダー部分や好きなところに表示するため、

<div></div>などで囲んで、cssで調整

 

-wordpress
-, ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

メニュー横並びいっぱい

メニューを横並びで中央に配置して、両端を伸ばす

メニューを横並びで中央に配置して、両端を伸ばす 基本 HTML <div class="menu"> <div class="menu-inner&qu …

予約システムを編集者

MTS Simple Booking-C編集者ができるようにする

  予約システムをスタッフがする   WordPressの予約システムで有名なプラグイン『MTS Simple Booking-C』ですが、 作成者側ではなく、編集者(スタッフ)が …

sliderコピー

ヘッダーのスライドショーをページ毎に変える方法

前回の記事で、「ヘッダー画像やスライダーをページ毎に変える方法」を紹介しましたが、 今回は引き続き、スライドショーができるプラグインを使った方法をやってみましたので紹介します。   Smar …

div

divを重ねて上下中央

divとdivを重ねてしかも上下中央にしたい!     例えば、指定したサイズに背景画像を配置して、その上にメニューやタイトル、キャッチコピーなどを表示したい。 もちろん、画像ファ …

画面サイズ取得

ヘッダー以外の画面サイズ取得をやってみた

  ワードプレスを使っていて、最初に表示されるページのデザインで使えそう。 全画面表示にするために、ディスプレイのサイズ(高さ)を自動で取得して表示させる方法は試したことがありましたが、 今 …