custom field suiteのファイルアップロードフィールドで「添付ファイルID」から画像を出力する

  custom field suite, WordPress 

とにかく便利なcustom field suite。殆どのサイトで使用しております。

使い始めた当初はWordPress初心者だったこともあり、ファイルアップロードフィールドの扱い方にちょっと迷ったりもしましたので纏めておきます。

ファイルURLで取得する

cfs1

フィールドの設定時、返り値に「ファイルURL」を選択することで、アップロードしたファイルへの絶対パスを取得できます。
読んで字のごとくですが・・・

とりあえずどんなサイズでも良いので画像を表示させたいときや、
Word・ExelファイルやPDFへのリンクを貼る際に便利です。

添付ファイルIDで取得する

cfs2

フィールドの設定時、返り値に「添付ファイルID」を選択することで、アップロードしたファイルのIDを取得できます。

IDを取得することで画像に設定した各種データ(タイトル・キャプション etc)も使用することが可能になります。
また、出力サイズの設定も自由に行えるのも大きなメリットです。

添付ファイルIDから画像のURLを取得・表示

とりあえず画像IDからURLを取得して表示するまでの流れです。

まず、お決まりのget()でカスタムフィールドのデータを取得。
これで$img_idに画像IDが格納されます。

次にwp_get_attachment_image_src()で画像のURLを取得します。
第二引数で画像のサイズを指定することができます。
とりあえず、フルサイズの画像を指定。

配列で値が返ってきます。URLは一番最初に格納されています。

 imgタグごと出力するにはwp_get_attachment_image()を使用します。
こちらも第二引数でサイズを指定します。
今回はサムネイルサイズで。

 

ちょっとアレンジ

こんな感じで画像のURLを取得したり、直接出力したりすることができました。
となると、サムネイルに画像リンクを指定してlightboxで表示、なんてことも簡単にできます。

 こうするとカスタムフィールドでフルサイズ画像を一枚登録するだけで良いので、データ追加の手間も少し省けますね!

custom field suiteの関連記事はこちら

Custom Field Suiteでチェックボックスのフィールドを追加する

 

一足早いクリスマスプレゼント(←自分への)はこれにしました。これで年末は電子書籍漬け!
届くのが楽しみです。

ブログの更新情報はこちらで配信しています。

   

follow us in feedly

ad

wpx

  • JavaScript 第6版

    定番のO'Reilly本でJavaScriptを深く学びましょう!気になる箇所をざっと読むだけでも、とても参考になります。ざっと読みを繰り返すのがオススメ。超良書です!
  • wordpressに慣れてくると、今度は痒いところに手が届く細やかなカスタマイズをしたいですよね。phpを利用したカスタマイズからデータベースに直接アクセスする方法がとにかく丁寧に解説されています。個人的には第5章、「プラグインの自作」が物凄く役に立ちました!
  • サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル

    WordPressプラグインの開発から運用までカバーする、プラグイン開発のまさに「バイブル」です。

    セキュリティやマネタイズにも触れられていて参考になるところ多すぎです。
  • サンプルが大充実!定番のjQuery入門書です。
    本の内容に沿って制作を進めるだけで、即実戦投入できる程の機能ができ上がります。
    解説が丁寧且つチートシートも付いているのでjQueryについての理解がぐんと深まりますよ!
  • WordPressのテーマ制作やテンプレートについての概念など、実際にサイトを制作しながらWordPressを知ることができます。
    制作するだけでなく、ユーザビリティからSEO、さらにはパフォーマンス改善にも触れているという充実ぶり。
    オリジナルテーマ制作のお供にどうぞ!
PAGE TOP ↑