プラグイン

【WPプラグイン】Advanced Custom Fieldの画像表示のソースコード

Advanced Custom Fieldの使い方画像編

Advanced Custom Fieldで作成したカスタムフィールドに画像を追加したとき、
その画像を任意のサイズで使いたい時のソースコードを自分用にメモ。

沢山のカスタムフィールドを使って画像を登録した時、コードが長くなってしまうので、
カスタムフィールドで画像フィールド作るときには、それを見越して作った方が良さげです…。
と言いつつ、現場での登録を楽にさせることを考えるとどうしても増えるのですが(悩)。

画像を表示するとき

まずこれ大事!フィールド作成時に、返り値を画像IDにすること!

[php]
<?php
//画像のIDを取得
$img_id=get_field('フィールド名');

//functions.phpに記述した画像サイズ取得
$size_m = "medium";

//画像の表示用データ取得(この時の返り値はURL,幅,高さの順に配列)
$img_m = wp_get_attachment_image_src ( $img_id , $size_m ) ;

//タイトル、altなど取得
$img_ttlalt = get_post ( get_field ('フィールド名') ) ;

//alt(代替テキスト)の取得
$img_alt = get_post_meta ( $img_ttlalt -> ID , '_wp_attachment_image_alt' , true );

//タイトルの取得
$img_ttl = $img_ttlalt -> post_title ;
?>

//ここから表示用HTML
<a href="<?php echo wp_get_attachment_url ( get_field ('フィールド名' , $post -> ID) ); ?>"
title="<?php echo $img_title ; ?>" >
<img src = "<?php echo $img_m[0] ; ?>"
width = "<?php echo $img_m[1] ; ?>"
height = "<?php echo $img_m[2] ; ?>"
alt = "<?php echo $img_alt ; ?>" >
</a>
[/php]

補足

■Advanced Custom Field 独自の関数
the_field ・・・フィールドの値の表示
get_field ・・・フィールド名の値取得(変数に代入するとか比較するとか)

■WPの関数
wp_get_attachment_image_src (画像ID , 画像サイズ) ・・・『画像ID』を『画像サイズ』で取得
wp_get_attachment_url (値) ・・・値(上記では『記事ID』の『フィールド名』)のURLの取得

18行目 //タイトル以外の時はこうすれば良い
$img_ttlalt -> post_excerpt …キャプション
$img_ttlalt -> post_content …説明

  • この記事を書いた人

サオリサン

WEB制作のディレクター・制作・運営支援をしてます(フリーランス&会社員)。アクセス解析してサイト改善するのが好き。

-プラグイン