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

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

関連記事

レスポンシブWordPressテーマ

プロが選ぶWordPressテーマテンプレート無料有料

レスポンシブWordPressテーマ 「LIQUID PRESS」 累計2千DL突破! 日本語対応レスポンシブWordPressテーマ スマホ/PC表示切替OK! Bootstrap対応! こんな方に …

レスポンシブ確認

レスポンシブの確認

  レスポンシブに対応したサイトを作って、 PC・ノート・タブレット・スマホなどの確認をしたい時におススメなのが、 『Responsively』   【Download now】か …

div横並び

DIV横並びで回り込みも

Webサイトを作るときに、画像やメニューなどを横並びにして、しかもレスポンシブ対応にしたい! そんなことを思ったことがあると思います。(きっと 😛 ) いろんな方法がありますが、簡単にできる方法をご紹 …

ヘッダー画像変える

ヘッダー画像やスライダーをページ毎に変える方法

  WordPressで作成したページで、ヘッダー画像やスライドショーをページごとに変えたい! 今回やってみたことは、条件分岐でヘッダーの画像部分を振り分けるといった方法です。 プラグインな …

cssのcolumnでフロントページにランダム表示

CSSのcolumnでフロントページにランダム表示

  トップページに投稿記事をランダムに表示   通常トップページに表示するのは、 ・固定ページ ・投稿記事 のどちらかが多いと思いますが、 今回は投稿記事の新着順ではなく、ランダム …