サポート » 使い方全般 » 画像のアップロード時の表示方法について

  • お世話になります。

    画像のアップロード時の表示方法について質問ですが、

    通常、画像のアップロード画面で、タイトル・キャプション・説明・配置・サイズを設定して投稿に追加しますが、プレビュー画面で表示されるものは、キャプションと画像のみで、タイトル・altは画像のマウスオーバーで表示になります。

    そこで下記については可能でしょうか?ご教授をお願いします。
    ・キャプションを画像の上に表示
    ・説明もプレビュー表示
    ・説明部分に画像を追加

    (例)

    ————————-
      キャプション
    ————————-

        画像

    ————————-
      説明文と画像
    ————————-

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック投稿者 igarashi5620

    (@igarashi5620)

    画像のアップロードをして記事に投稿した際、
    下記のコードが記述されますが、この部分をカスタマイズするには、
    どのファイルを修正すれば良いでしょうか?
    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; alt=”” width=”100″ height=”75″ />[/caption]

    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

    (@igarashi5620)

    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」としか表示されません。
    記述場所を間違っていますか?

    引数が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

    (@igarashi5620)

    ありがとうございます。
    表示しました。
    1つ質問ですが、
    この関数を使って、下記のような表示は可能でしょうか?
    また何か条件を指示した場合、別の文字および固定の画像を表示するということは可能でしょうか?(下記でいうNEWの文字です。)
    例)
    ————————————————–
       キャプション
    ————————————————–

        画像

    ————————————————–
      金額(入力したもの)
    ————————————————–
      NEW(条件によって表示・非表示設定を可変)
    ————————————————–

    可能ですよ。
    do_shortcode( $content )'</div>'の間に表示したいものを加えれば良いです

    トピック投稿者 igarashi5620

    (@igarashi5620)

    説明不足ですみません。

    直接関数上に入力するわけではなく、

    金額は、画像追加画面の「説明」の部分に入れたものを表示するようにしたいのです。

    もしくはキャプション欄でも良いのですが、金額部分だけは画像の下に表示させたいです。

    入力欄に→キャプション 「¥2,000」
    「」の部分のみ画像の下に配置

    NEWについては、配置サイズを選択するのと同じようにラジオボタンで選択が出来るようなものか、

    キャプションか説明欄に「NEW」という文字が、入力された場合は、

    金額の下に文字が表示されるというようにしたいのです。

    上記の方法は可能でしょうか?

    実際にコードを書いてココがわからない/動作しないという質問の方が回答がつきやすいですよ。

    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

    (@igarashi5620)

    kz さん

    ありがとうございました。
    要望どおりの表示が実現出来ました。

    あとはCSSを使用して、見せ方をカスタマイズしてみます。

    トピック投稿者 igarashi5620

    (@igarashi5620)

    kz さん

    お世話になります。
    下記コードについて2つ質問です。

    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);

    1つは、画像の下に入る金額が画像の横に表示されるので、改行を入れたいです。
    2つ目は、1ページ内に複数の画像をアップロードした際、2個目以降の画像は通常のキャプション名が画像の下にしか表示されなく、金額等は表示されませんでした。
    表示する内容は、商品写真を掲載したく、コンタクトシートのように縦横に並べて表示させたいのです。
    すみませんが、よろしくお願いします。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック「画像のアップロード時の表示方法について」には新たに返信することはできません。