WordPressに関する情報や技術紹介です

Custom Field Templateプラグインでの画像表示

カテゴリー: 投稿Tips

最終更新日: 2011-01-20
投稿日: 2011-01-20

「カスタムフィールドテンプレート」プラグインを利用すると予め入力項目が設定できるので便利です。

その設定の中で

[field1]
type = file

という設定があります。

今回、ある案件で画像用として項目が欲しかったので上記の設定を行いました。
実際に画像をアップロードすると、[field1]の値には登録時のidが入るみたいなので利用する際は以下のようにすれば良いです。

// 画像のhtmlを出力
echo wp_get_attachment_image(post_custom('field1'));

ただし、これだとalt属性やtitle属性にファイル名が入るので、そのあたりを自分で設定したい場合は以下のような関数をfunctions.phpなんかに書いておくと自由に設定できるかと。

function isp_get_attachment_image($attachment_id, $size='thumbnail', $title='', $alt='', $icon=false) {
	$image = wp_get_attachment_image($attachment_id, $size, $icon);
	if($title != '') {
		$image = preg_replace(array('/title=".+?"/', '/alt=".+?"/'), array('title="'.$title.'"', 'alt="'.$title.'"'), $image);
	}
	if($alt != '') {
		$image = preg_replace('/alt=".*"/', 'alt="'.$alt.'"', $image);
	}

	return $image;
}

上記関数だとtitle属性のみがある場合はalt属性もtitleに合わせます。
使う場合は、

// フルサイズで画像の呼び出し
echo isp_get_attachment_image(post_custom('field1'), 'full', 'タイトル属性'));
トラックバックURL
  • ヘッドココロ さん：
    2011/4/18 月曜日 20:13:02

    こんにちは。
    はじめまして！

    素敵なコードだと思いました。
    早速利用させていただきたいと思います。

    1点、『フルサイズで画像の呼び出し』で書かれています

    ↓↓↓
    ‘タイトル属性’についても、カスタムフィールドで呼び出せるよう
    この部分にもカスタムフィールを設定したいのですがうまくいきません。


    ID, 'タイトル属性', true);')); ?>

    としているのですが、エラーとなってしまいます。

    isp_get_attachment_imageのなかで、カスタムフィールドを利用する方法について、よろしければご教授いただけませんでしょうか。

    宜しくお願い致します。

  • admin さん：
    2011/4/19 火曜日 08:52:18

    ＞ヘッドココロさん
    ご利用いただきありがとうございます。

    > タイトル属性’についても、カスタムフィールドで呼び出せるよう
    > この部分にもカスタムフィールを設定したいのですがうまくいきません。

    タイトル属性をカスタムフィールドから取りたいという事でしょうか？

    post_custom(‘key’) でカスタムフィールドの値が取れるわけですから、下のような感じで良いのではないでしょうか？

    echo isp_get_attachment_image(post_custom(‘field1’), ‘full’, post_custom(‘field2’)));

  • ヘッドココロ さん：
    2011/4/19 火曜日 20:55:08

    ありがとうございました！

    ご教授いただいたもので実現できました。

    echo isp_get_attachment_image(get_post_meta($post->ID,”field1″,true),’full’,post_custom(‘field2’));

    このようにして使わせていただいております。

    素晴らしいブログ記事ありがとうございます。

    本当に勉強になりました。

  • fusion さん：
    2013/1/30 水曜日 23:47:40

    画像を表示する方法がわからず、こまっておりました。
    大変助かりました。ありがとございます。

    一つ質問ですが、表示した画像をクリックして、拡大？lightboxみたいにするか、別ウィンドウで大きい画像を表示するときは、どのように書いたらいいでしょうか？

    素人ながら、自分のホームページを作っています。

    お返事・お教えいただけるとありがたいです。

    ちなみにワードプレスは最新です。

  • ISプランニング さん：
    2013/1/31 木曜日 08:59:10

    ＞ fusionさん
    お役に立てて何よりです。

    > 一つ質問ですが、表示した画像をクリックして、拡大？lightboxみたいにするか、別ウィンドウで大きい画像を表示するときは、どのように書いたらいいでしょうか？

    まず、別ウィンドウで表示する場合は、aタグを使えば良いかと思います。
    ファイルのURLを取得する関数は「wp_get_attachment_url()」らしいので、


    echo '<a href="'.wp_get_attachment_url(post_custom('field1')).'" target="_blank">';
    echo isp_get_attachment_image(post_custom('field1'));
    echo '</a>'

    みたいに囲んでやれば良いと思います。ただ「target=”_blank”」は構文的にはよろしくない、と言われていますのでそこは割り切るか、他の手立てを考えてください。

    lightboxは同じようにlightboxプラグインのルールに則ってやれば良いと思います。その際にはaタグのtaregt属性は不要だと思いますので削除してください。

    私が愛用しているlightboxプラグインの「jQuery ColorBox」だとプラグインの設定画面で行えるため、特別な属性を付け加える等、HTMLをいじる必要がないのでお勧めです。

  • fusion さん：
    2013/2/5 火曜日 12:00:30

    色々と教えて頂きありがとうございます。

    改造したりして表示できるようになりました。

    ありがとうございます。

  • キムキム さん：
    2013/4/13 土曜日 11:08:05

    こんにちは。

    Custom Field Templateプラグインでの画像表示がうまくいかず、
    困っていたのですが、こちらのサイトを参考にしましたら
    うまくいくようになり、大変助かっております。

    ひとつ質問があるのですが、画像のサイズを設定する際、
    widthだけ指定するにはどのように書けばよいでしょうか？
    「arry(200,150)」などという設定もあるみたいですが、
    上記だとheightが180pxあった場合、強制的に150pxになり、
    変な表示になるので、widthだけ指定して、heightはautoみたいに
    ならないかと思っています。

    お忙しいところ、恐縮ですが、
    ご教授の程、よろしくお願いします。

  • ＩＳプランニング さん：
    2013/4/15 月曜日 09:01:08

    ＞ キムキムさん
    「array(200, 150)」で大丈夫です。
    WPが勝手にどちらかの最大に合わせてもう一方を自動で縮尺してくれるみたいです。

    例えば「500 x 350」の画像を「array(400, 400)」で指定した場合、「400 x 280」の画像となります。

  • キムキム さん：
    2013/4/17 水曜日 11:04:13

    さっそくのお返事、ありがとうございます。
    また、返信が遅れて申し訳ありません。

    教えていただき、ありがとうございます。
    さっそく試してみて、結果をご報告します。
    取り急ぎ、ありがとうございました。

  • 樫田　修 さん：
    2013/7/16 火曜日 23:07:26

    初歩的な質問ですみませんが、ご指導よろしくお願い致します。
    function isp_get_attachment_image($attachment_id, $size=’thumbnail’, $title=”, $alt=”, $icon=false) { $image = wp_get_attachment_image($attachment_id, $size, $icon); if($title != ”) { $image = preg_replace(array(‘/title=”.+?”/’, ‘/alt=”.+?”/’), array(‘title=”‘.$title.'”‘, ‘alt=”‘.$title.'”‘), $image); } if($alt != ”) { $image = preg_replace(‘/alt=”.*”/’, ‘alt=”‘.$alt.'”‘, $image); } return $image;}
    とありますが/wp-includesの下にあるfunctions.phpに貼りつけしておけばいいのですか、よろしくお願い致します。

  • ＩＳプランニング さん：
    2013/7/17 水曜日 07:57:18

    ＞樫田　修 さん
    いえ、ご自身の利用されているテーマのフォルダの中にfunctions.phpがあると思いますので、そこに貼り付けます。
    「wp-content/themes/テンプレートディレクトリ/functions.php」です。

  • りんご さん：
    2013/7/30 火曜日 11:01:33

    こんにちは。
    カスタムフィールドテンプレートプラグインを愛用しています。
    おかげさまで画像の出力がうまくでき、ページが使いやすくなって感謝しております。

    ただ、実は、記事がかなりの数あるため
    CSV importer プラグインを使って、ライブラリ内またはサーバー上のの画像を
    カスタムフィールドの画像にCSV一括アップロードしたいと思っていて、
    値を　 http://●●●/wordpress/wp-content/uploads/2013/07/●●●.jpg　と入力してみたり
    いろいろ試してみましたが、うまくいきません…

    もしお知恵を貸していただけるなら、どのような値でCSVを読み込ませればよいかご教示いただければと思っています。
    お手数ですが、よろしくお願いいたします。

  • ＩＳプランニング さん：
    2013/7/30 火曜日 11:44:07

    ＞ りんごさん
    すいません。質問の意図がイマイチ掴めないのですが…(^_^;)

    ＞ カスタムフィールドの画像にCSV一括アップロードしたい
    これがよく分かりません。
    カスタムフィールドを利用して画像をアップロードする際は参照ボタンからファイルを選択しませんか？
    「CSV一括アップロード」とはどうしたい（どうなりたい）のでしょうか？

    各記事に直接貼り付けてある画像をカスタムフィールドの画像として登録し直したい、という事でしょうか？

  • りんご さん：
    2013/7/30 火曜日 12:56:43

    連投申し訳ございません。自己解決してしまいました。。。
    メディアライブラリ登録後に決まったIDを入力すれば解決しました。
    ありがとうございました。

  • リク さん：
    2014/2/15 土曜日 01:25:54

    こんばんは！

    質問をさせて下さい。
    現在、カスタムフィールドテンプレートで複数画像を設置しているのですが、画像を出力する事は問題なく出来ているのですが、以前にfusion さんがご質問されているように【複数画像を出力してlightboxを効かせたい】のですが、なかなか上手くいかなくて困っております。

    といった形を作りたいのですが出来ません。もし分かるようでしたらご教授下さいませんでしょうか。

    後、複数画像の出力なのですが、１枚しか画像をUPしていないとエラーになって画像が出力されません。

    急にこんな質問攻めで申し訳ありません。どうかご教授下さい。

    以下、single.php内の記述です。

    <img src="”>

    どうぞ宜しくお願い致します。

  • ＩＳプランニング さん：
    2014/2/17 月曜日 09:25:01

    ＞ リクさん
    恐らくタグを貼られていたのでしょうがhtmlの入力に制限がある為、ちょっと確認ができません。
    「<（＆ｌｔ；）」と「>（＆ｇｔ；）」を利用して書いてみてください。

    画像を出力できているのであれば以前回答したように「a」タグで囲むだけで良いと思います。その際にご利用されているlightboxのルール通りに属性を追加してあげるだけだと思います。

    ＞ 後、複数画像の出力なのですが、１枚しか画像をUPしていないとエラーになって画像が出力されません。

    この辺りもどのような形でコードを書かれているのか分からないので何とも言えません。恐らくPHPだと思いますけど…。

  • リク さん：
    2014/2/17 月曜日 18:00:02

    ご返答ありがとうございます。
    大変失礼いたしました。
    lightboxを影響させる事は出来たのですが、やはり画像の枚数が少ないとエラーになってしまうようです。コードはこちらです。

    <?php if ( get_post_meta($post-＞ID,'event',TRUE) )： ?＞

    <div class="infoimg"＞
    <?php if(post_custom('img'))： ?＞
    <?php
    $size = 'large'；
    $postCustomMulti = post_custom('img')；
    foreach($postCustomMulti as $var) {
    $postImg = wp_get_attachment_image_src($var, $size)；
    list( $url, $w, $h) = $postImg； ?＞
    <a href="<?php echo $url； ?＞" rel="lightbox"＞<img src="<?php echo $url； ?＞"＞</a＞
    <?php }?＞
    <?php endif； ?＞
    </div＞

  • ＩＳプランニング さん：
    2014/2/19 水曜日 09:05:35

    ＞リクさん
    すいません！
    返答をすっかり忘れていました…。

    コード的には問題ないのですが「post_custom」関数を調べてみたところ、以下の振る舞いをするみたいです。

    １つのみ　→　値を返す
    ２つ以上　→　配列で返す

    ですので、「foreach」を使う前に「is_array」で調べたらどうでしょうか？

    $postCustomMulti = post_custom('img')；
    if(is_array($postCustomMulti)) {
    foreach($postCustomMulti as $var) {
    …
    }
    } else {
    echo '<a href=" …
    }

    みたいな感じで大丈夫だと思います。

  • リク さん：
    2014/2/19 水曜日 14:47:46

    ご返答ありがとうございます！

    ただ、私の知識が浅く、申し訳ありません。

    } else {
    echo ‘<a href=" …
    }

    の部分の書き換えが良く分からないのですが、

    list( $url, $w, $h) = $postImg； ?＞
    <a href="<?php echo $url； ?＞

    の部分を

    list( $url, $w, $h) = $postImg； ?＞
    } else {
    echo '<a href="<?php echo $url； ?＞

    にするという事でしょうか？？

  • ＩＳプランニング さん：
    2014/2/19 水曜日 16:48:31

    ＞リクさん
    大変申し訳ありませんが、（あまりにも記事の内容と質問がかけ離れているので）これ以上はご自身で考えていただけますか？
    先程書いたようにデータが一つの場合は配列ではなく値だけが返ってくるので、それをHTMLで上手く表示させるだけです。

    では、頑張ってください。

ページTOPに戻る