Web Design Leaves

WordPress のギャラリー機能を使って表示した画像のサムネイルをクリックすると、デフォルトでは「gallery」ショートコードのリンク属性はページになっているので（link=”page”）、テンプレートファイルが自動的に選択されて表示される。

MIME_TYPE.php （image.php、video.phpなど）→ attachment.php → single.php → index.php

このとき、image.php で画像を表示するには、以下のように記述する。

<?php if(is_attachment()): ?>
      <?php if (wp_attachment_is_image($post->id)) : ?>
      <?php $att_image = wp_get_attachment_image_src( $post->id, "full-size"); ?>
  <p>
  <a href="<?php echo $att_image&#91;0&#93;;?>" target="_blank"><img src="<?php echo $att_image&#91;0&#93;;?>" width="<?php echo $att_image&#91;1&#93;;?>" height="<?php echo $att_image&#91;2&#93;;?>" alt="<?php $post->post_excerpt; ?>" /></a>
  </p>
    <p><?php echo esc_html($post->post_title); ?></p> <!--タイトルを表示-->
    <p><?php echo esc_html($post->post_excerpt); ?></p> <!--キャプションを表示-->
    <p><?php echo esc_html($post->post_content); ?></p> <!--説明を表示 を表示-->
      <?php else: ?>
      <?php the_content(); ?>
      <?php endif; ?>
  <?php else: ?>
      <?php the_content(); ?>
  <?php endif; ?>

wp_get_attachment_image($attachment_id, $size, $icon, $attr)

アタッチメント情報の画像要素（img）のHTMLテキストを取得する。

パラメータ
$attachment_id（必須）：アタッチメント情報のID
$size（オプション）：サイズを指定（デフォルトは'thumbnail'）
$icon（オプション）：アイコン画像を使用する場合は true を指定（デフォルトはfalse）
$attr（オプション）： 添付画像の属性を文字列または連想配列で指定（デフォルトは''）

戻り値
アタッチメント情報が存在する場合は、そのHTMLテキストを返す。アタッチメント情報が設定されていない場合は''を返す。

wp_get_attachment_image_src($attachment_id, $size, $icon)

添付ファイルの表示用データを取得する。

パラメータ

$attachment_id（必須）：アタッチメント情報のID
$size（オプション）：サイズを指定（デフォルトは'thumbnail'）
$icon（オプション）：アイコン画像を使用する場合は true を指定（デフォルトはfalse）

戻り値
添付ファイルの表示用データを配列で返す。配列は、イメージファイルのURL、幅、高さの順に格納されている。表示用データを取得できなかった場合はfalseを返す。
[0] => url
[1] => width
[2] => height

また、「gallery」ショートコードのリンク属性を「link=”file”」とすれば、サムネイル画像をクリックすると元画像が表示されるようになる。つまり、サムネイル画像に元画像へのリンクが貼られるので、jQuery 等での加工が簡単にできる。

[ gallery link=”file”]