Title: 画像のアップロード時の表示方法について
Last modified: 2010年2月13日

---

# 画像のアップロード時の表示方法について

 *  [igarashi5620](https://ja.wordpress.org/support/users/igarashi5620/)
 * (@igarashi5620)
 * [16年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e5%83%8f%e3%81%ae%e3%82%a2%e3%83%83%e3%83%97%e3%83%ad%e3%83%bc%e3%83%89%e6%99%82%e3%81%ae%e8%a1%a8%e7%a4%ba%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/)
 * お世話になります。
 * 画像のアップロード時の表示方法について質問ですが、
 * 通常、画像のアップロード画面で、タイトル・キャプション・説明・配置・サイズを設定
   して投稿に追加しますが、プレビュー画面で表示されるものは、キャプションと画像のみ
   で、タイトル・altは画像のマウスオーバーで表示になります。
 * そこで下記については可能でしょうか？ご教授をお願いします。
    ・キャプションを画像
   の上に表示 ・説明もプレビュー表示 ・説明部分に画像を追加
 * （例）
 * >  ————————-
   >  　　キャプション ————————-
   > 　　　　画像
   > ————————-
   >  　　説明文と画像 ————————-

10件の返信を表示中 - 1 - 10件目 (全10件中)

 *  トピック投稿者 [igarashi5620](https://ja.wordpress.org/support/users/igarashi5620/)
 * (@igarashi5620)
 * [16年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e5%83%8f%e3%81%ae%e3%82%a2%e3%83%83%e3%83%97%e3%83%ad%e3%83%bc%e3%83%89%e6%99%82%e3%81%ae%e8%a1%a8%e7%a4%ba%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-124332)
 * 画像のアップロードをして記事に投稿した際、
    下記のコードが記述されますが、この
   部分をカスタマイズするには、 どのファイルを修正すれば良いでしょうか？ wp-admin/
   media-upload.phpを確認しましたが、 どの部分かが不明です。 よろしくお願いします。
 * [caption id="attachment_644" align="alignleft" width="100" caption="キャプション"]
   <img class=”size-full wp-image-644″ title=”” src=”[http://***.jpg&#8221](http://***.jpg&#8221);
   alt=”” width=”100″ height=”75″ />[/caption]
 *  [kz](https://ja.wordpress.org/support/users/kz/)
 * (@kz)
 * [16年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e5%83%8f%e3%81%ae%e3%82%a2%e3%83%83%e3%83%97%e3%83%ad%e3%83%bc%e3%83%89%e6%99%82%e3%81%ae%e8%a1%a8%e7%a4%ba%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-124333)
 * WordPress 2.9.1
 * caption ショートコードの出力は img_caption_shortcode フィルタで変更できます。
 * functions.php:
 *     ```
       function my_img_caption($attr, $content){
         extract(shortcode_atts(array(
           'id'    => '',
           'align'    => 'alignnone',
           'width'    => '',
           'caption' => ''
         ), $attr));
         if ( 1 > (int) $width || empty($caption) )
           return $content;
   
         if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
   
         return '<div ' . $id . 'class="wp-caption ' . esc_attr($align)
           . '" style="width: ' . (10 + (int) $width) . 'px">'
           . '<p class="wp-caption-text">' . $caption . '</p>'
           . do_shortcode( $content ) . '</div>';
       }
       add_filter('img_caption_shortcode', 'my_img_caption', 10, 2);
       ```
   
 * 出力内容はアレンジしてください。
 * 参考：WordPress 2.9.1 wp-includes/media.php 634行目〜
 *  トピック投稿者 [igarashi5620](https://ja.wordpress.org/support/users/igarashi5620/)
 * (@igarashi5620)
 * [16年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e5%83%8f%e3%81%ae%e3%82%a2%e3%83%83%e3%83%97%e3%83%ad%e3%83%bc%e3%83%89%e6%99%82%e3%81%ae%e8%a1%a8%e7%a4%ba%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-124345)
 * > function my_img_caption($attr, $content){
   >  extract(shortcode_atts(array( ‘id’
   > => ”, ‘align’ => ‘alignnone’, ‘width’ => ”, ‘caption’ => ” ), $attr)); if (
   > 1 > (int) $width || empty($caption) ) return $content;
   >  if ( $id ) $id = ‘id=”‘ . esc_attr($id) . ‘” ‘;
   >  return ‘<div ‘ . $id . ‘class=”wp-caption ‘ . esc_attr($align)
   >  . ‘” style
   > =”width: ‘ . (10 + (int) $width) . ‘px”>’ . ‘<p class=”wp-caption-text”>’ .
   > $caption . ‘</p>’ . do_shortcode( $content ) . ‘</div>’; } add_filter(‘img_caption_shortcode’,‘
   > my_img_caption’, 10, 2);
 * 上記をfunctions.phpに追加しましたが、
    アップした画像が「Array」としか表示され
   ません。 記述場所を間違っていますか？
 *  [kz](https://ja.wordpress.org/support/users/kz/)
 * (@kz)
 * [16年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e5%83%8f%e3%81%ae%e3%82%a2%e3%83%83%e3%83%97%e3%83%ad%e3%83%bc%e3%83%89%e6%99%82%e3%81%ae%e8%a1%a8%e7%a4%ba%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-124347)
 * 引数が1個抜けてました。
 *     ```
       function my_img_caption($output, $attr, $content){
         extract(shortcode_atts(array(
           'id'    => '',
           'align'    => 'alignnone',
           'width'    => '',
           'caption' => ''
         ), $attr));
   
         if ( 1 > (int) $width || empty($caption) )
           return $content;
   
         if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
   
         return '<div ' . $id . 'class="wp-caption ' . esc_attr($align)
           . '" style="width: ' . (10 + (int) $width) . 'px">'
           . '<p class="wp-caption-text">' . $caption . '</p>'
           . do_shortcode( $content ) . '</div>';
       }
       add_filter('img_caption_shortcode', 'my_img_caption', 10, 3);
       ```
   
 *  トピック投稿者 [igarashi5620](https://ja.wordpress.org/support/users/igarashi5620/)
 * (@igarashi5620)
 * [16年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e5%83%8f%e3%81%ae%e3%82%a2%e3%83%83%e3%83%97%e3%83%ad%e3%83%bc%e3%83%89%e6%99%82%e3%81%ae%e8%a1%a8%e7%a4%ba%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-124349)
 * ありがとうございます。
    表示しました。 １つ質問ですが、 この関数を使って、下記
   のような表示は可能でしょうか？ また何か条件を指示した場合、別の文字および固定
   の画像を表示するということは可能でしょうか？（下記でいうNEWの文字です。） 例）————————————————–
   キャプション ————————————————–
 *  　　　 画像
 * ————————————————–
    　　金額（入力したもの） ————————————————– 　　NEW（条件によって
   表示・非表示設定を可変） ————————————————–
 *  [kz](https://ja.wordpress.org/support/users/kz/)
 * (@kz)
 * [16年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e5%83%8f%e3%81%ae%e3%82%a2%e3%83%83%e3%83%97%e3%83%ad%e3%83%bc%e3%83%89%e6%99%82%e3%81%ae%e8%a1%a8%e7%a4%ba%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-124350)
 * 可能ですよ。
    `do_shortcode( $content )`と`'</div>'`の間に表示したいものを加え
   れば良いです
 *  トピック投稿者 [igarashi5620](https://ja.wordpress.org/support/users/igarashi5620/)
 * (@igarashi5620)
 * [16年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e5%83%8f%e3%81%ae%e3%82%a2%e3%83%83%e3%83%97%e3%83%ad%e3%83%bc%e3%83%89%e6%99%82%e3%81%ae%e8%a1%a8%e7%a4%ba%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-124351)
 * 説明不足ですみません。
 * 直接関数上に入力するわけではなく、
 * 金額は、画像追加画面の「説明」の部分に入れたものを表示するようにしたいのです。
 * もしくはキャプション欄でも良いのですが、金額部分だけは画像の下に表示させたいです。
 * > 入力欄に→キャプション 「￥2,000」
   >  「」の部分のみ画像の下に配置
 * NEWについては、配置サイズを選択するのと同じようにラジオボタンで選択が出来るよう
   なものか、
 * キャプションか説明欄に「NEW」という文字が、入力された場合は、
 * 金額の下に文字が表示されるというようにしたいのです。
 * 上記の方法は可能でしょうか？
 *  [kz](https://ja.wordpress.org/support/users/kz/)
 * (@kz)
 * [16年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e5%83%8f%e3%81%ae%e3%82%a2%e3%83%83%e3%83%97%e3%83%ad%e3%83%bc%e3%83%89%e6%99%82%e3%81%ae%e8%a1%a8%e7%a4%ba%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-124355)
 * 実際にコードを書いてココがわからない／動作しないという質問の方が回答がつきやすい
   ですよ。
 *     ```
       function my_img_caption($output, $attr, $content){
         extract(shortcode_atts(array(
           'id'    => '',
           'align'    => 'alignnone',
           'width'    => '',
           'caption' => ''
         ), $attr));
   
         if ( 1 > (int) $width || empty($caption) )
           return $content;
   
         $img_id = explode('_', $id);
         $desc = preg_replace('/new/i', '<div>NEW</div>', get_post(intval($img_id[1]))->post_content);
   
         if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
   
         return '<div ' . $id . 'class="wp-caption ' . esc_attr($align)
           . '" style="width: ' . (10 + (int) $width) . 'px">'
           . '<p class="wp-caption-text">' . $caption . '</p>'
           . do_shortcode( $content )
           . $desc
           . '</div>';
       }
       add_filter('img_caption_shortcode', 'my_img_caption', 10, 3);
       ```
   
 *  トピック投稿者 [igarashi5620](https://ja.wordpress.org/support/users/igarashi5620/)
 * (@igarashi5620)
 * [16年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e5%83%8f%e3%81%ae%e3%82%a2%e3%83%83%e3%83%97%e3%83%ad%e3%83%bc%e3%83%89%e6%99%82%e3%81%ae%e8%a1%a8%e7%a4%ba%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-124358)
 * kz　さん
 * ありがとうございました。
    要望どおりの表示が実現出来ました。
 * あとはCSSを使用して、見せ方をカスタマイズしてみます。
 *  トピック投稿者 [igarashi5620](https://ja.wordpress.org/support/users/igarashi5620/)
 * (@igarashi5620)
 * [16年、 7ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e5%83%8f%e3%81%ae%e3%82%a2%e3%83%83%e3%83%97%e3%83%ad%e3%83%bc%e3%83%89%e6%99%82%e3%81%ae%e8%a1%a8%e7%a4%ba%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-124366)
 * kz さん
 * お世話になります。
    下記コードについて２つ質問です。
 * > function my_img_caption($output, $attr, $content){
   >  extract(shortcode_atts(
   > array( ‘id’ => ”, ‘align’ => ‘alignnone’, ‘width’ => ”, ‘caption’ => ” ), $
   > attr));
   >  if ( 1 > (int) $width || empty($caption) )
   >  return $content;
   >  $img_id = explode(‘_’, $id);
   >  $desc = preg_replace(‘/new/i’, ‘<div>NEW</div
   > >’, get_post(intval($img_id[1]))->post_content);
   >  if ( $id ) $id = ‘id=”‘ . esc_attr($id) . ‘” ‘;
   >  return ‘<div ‘ . $id . ‘class=”wp-caption ‘ . esc_attr($align)
   >  . ‘” style
   > =”width: ‘ . (10 + (int) $width) . ‘px”>’ . ‘<p class=”wp-caption-text”>’ .
   > $caption . ‘</p>’ . do_shortcode( $content ) . $desc . ‘</div>’; } add_filter(‘
   > img_caption_shortcode’, ‘my_img_caption’, 10, 3);
 * １つは、画像の下に入る金額が画像の横に表示されるので、改行を入れたいです。
    ２
   つ目は、１ページ内に複数の画像をアップロードした際、２個目以降の画像は通常のキャプション
   名が画像の下にしか表示されなく、金額等は表示されませんでした。 表示する内容は、
   商品写真を掲載したく、コンタクトシートのように縦横に並べて表示させたいのです。
   すみませんが、よろしくお願いします。

10件の返信を表示中 - 1 - 10件目 (全10件中)

 トピック「画像のアップロード時の表示方法について」には新たに返信することはできま
せん。

 * フォーラム: [使い方全般](https://ja.wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 10件の返信
 * 2人の参加者
 * 最後の返信者: [igarashi5620](https://ja.wordpress.org/support/users/igarashi5620/)
 * 最後の活動: [16年、 7ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e5%83%8f%e3%81%ae%e3%82%a2%e3%83%83%e3%83%97%e3%83%ad%e3%83%bc%e3%83%89%e6%99%82%e3%81%ae%e8%a1%a8%e7%a4%ba%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-124366)
 * 状態: 未解決

## トピック

### 人気のトピック

### 返信がないトピック

### サポート関連ではないトピック

### 解決済みのトピック

### 未解決のトピック

### すべてのトピック