17.03.10

Advanced Custom Fields で、任意のアイキャッチ画像を表示させる方法

ホームページ制作
Advanced Custom Fields で任意のサムネイル表示する手順を
かんたんに記載しておきます。
備忘録的にね。
 
 
 

1.サムネイルサイズを追加

 
functions.php に、新しく作るサムネイル画像のサイズを追加
 
function add_thumbnail_size() {
  add_theme_support( 'post-thumbnails' );
  add_image_size('hogehoge', 500, 300, true );// 追加するサムネイル画像
}

 

2. Advanced Custom Fieldsの設定

 
フィールドタイプを「画像」に
返り値を「画像ID」に
プレビューサイズを「hogehoge(1で設定したもの)」にする
 
 
 

3.テンプレートにPHPを記述

 
表示させたい箇所に、下記のように記述
 
<?php 
  $image = get_field('フィールド名'); // Advanced Custom Fields で設定したもの
  $size = 'hogehoge';  // サムネイルの名称
  if( $image ) {
  echo wp_get_attachment_image( $image, $size );
  }
?>
 
 
 
 
 
以上です
 
POINTは、Advanced Custom Fieldsで
画像の返り値を「URL」ではなく「画像ID」とするところ。

PROFILE

本間智久
MAMEプロダクションという屋号で、フリーランスのウェブデザイナーとしてお仕事しています。
 
広告や販促物のグラフィックデザイナーを務めた後、求人サイト運営会社にてウェブデザイナーとして勤務。
サイトの運営、リニューアル、特集コンテンツのディレクションや作成、SEO内部施策などの業務を担当。
2012年に独立。
 
趣味は、テレビゲームと酒場巡り。