wordpress メディアファイル（画像など）の表示

CATEGORY: WordPress | TAG:

2013年6月2日

WordPress でアップロードした画像は、ヘッダー画像も含めて「メディア」→「ライブラリ」で一元管理されていて、画像に関するデータは投稿記事と同じようにループを使用して取得することができる。

記事本文に「画像を挿入」しなくても、投稿（固定ページ）画面から画像をアップロードした時点で、メディアライブラリに現在の記事の子記事として添付メディアファイルが対応する。

記事の添付メディアファイルを出力する（get_children）

get_children テンプレートタグで子記事としてメディアファイルを取得し、取得した複数枚の画像ファイルのタイトル、画像、説明を foreach によってループさせ、全ての添付メディアを出力させる例。

<?php while(have_posts()): the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php
$images = get_children(array(    //添付メディアファイルを取得
    'post_parent' => get_the_ID(),
    'post_type' => 'attachment',
    'post_mime_type' => 'image',
    'order' => 'ASC'));
?>
<?php if(!empty($images)) : ?>
<?php foreach($images as $image) : ?>
<div>
<h3><?php echo esc_html($image->post_title); ?></h3>    //添付メディアファイルのタイトル
<?php echo wp_get_attachment_image($image->ID); ?>    //添付メディアファイルの画像
<p><?php echo esc_html($image->post_content); ?></p>    //添付メディアファイルの内容（説明）
</div>
<?php endforeach; ?>
<?php endif; ?>
<?php endwhile; ?>

PDFの場合

<?php
$images = get_children(array(
    'post_parent' => get_the_ID(),
    'post_type' => 'attachment',
    'post_mime_type' => 'application/pdf',    //PDF
    'order' => 'ASC'));
?>
<?php if(!empty($images)) : ?>
<?php foreach($images as $image) : ?>
<div>
<h3><a href="<?php echo esc_html($image->guid); ?>">    //ファイルへのURL
<?php echo esc_html($image->post_title); ?></a>    //添付メディアファイルのタイトル
</h3>
</div>
<?php endforeach; ?>
<?php endif; ?>

記事に添付された写真を1枚表示する場合

ループ内で以下を記述。

<?php $imgargs = array(
    'post_type' => 'attachment',
    'post_mime_type' => 'image',
    'post_parent' => $post->ID,
    'numberposts' => 1    //アップロード日時が最新のものを1枚
);
$myimg = get_children($imgargs);
?>
<?php if($myimg): ?>
<p class="thumb">
<?php echo wp_get_attachment_image(key($myimg), 'thumb'); ?>
</p>
<?php endif; ?>

$myimg の中身は以下のようになっていて、配列のキーに「32」と画像の ID が入っているので、「key($myimg)」で画像の ID を取得できる。（返されるオブジェクトの配列は[0]から始まる配列ではない。キーが画像IDで値がオブジェクト）

Array
(
    [32] => WP_Post Object
    (
        [ID] => 32
        [post_author] => 1
        [post_date] => 2012-01-15 14:52:53
        [post_title] => bracket
        [post_name] => bracket
        [post_parent] => 31
        [post_type] => attachment
        [post_mime_type] => image/jpeg
        ・・・
    )
)

上記の例の場合は、1つの画像だけなので、array_pop で取り出して下記のように記述することも可能。

wp_get_attachment_image(array_pop($myimg)->ID, 'thumb');

関数にする場合は以下を functions.php に記述し、 the_image(get_the_ID()); で出力する。

function the_image($post_id) {
    $images = get_children(array(
        'post_parent' => $post_id,
        'post_type'=> 'attachment',    //添付ファイル（メディアライブラリ）
        'post_mime_type' => 'image',    //画像
        'order' => 'ASC'
    ));
    if(!empty($images)) {
        echo wp_get_attachment_image(array_pop(array_keys($images)), 'thumbnail');    // 'thumbnail'サイズの画像を1枚出力
    }else{
        echo '<img src="' . get_bloginfo('template_url') . '/images/noimage.jpg" width="100" height="100">';
    }
}

＊ get_children で取得した $images はアタッチメント情報（オブジェクト）の配列。配列のキーは アタッチメント情報の投稿ID

array_keys で配列のキーすべてを取得し、array_pop で配列の末尾から要素（投稿ID）を取り出して、 wp_get_attachment_image に渡す。

実際の出力はループの中で以下のように行う。

<?php if(have_posts()): while(have_posts()): the_post(); ?>
<a href="<?php the_permalink(); ?>"><?php the_image(get_the_ID()); ?></a>
<?php endwhile; endif; ?>

投稿のメディアを表示する（get_posts）

個々の投稿のページで、投稿の本文の後に、メディアのサムネイルを一覧表示する例。個々のサムネイルをクリックした時は、元の画像が表示される。

<div>
<?php
$attachments = get_posts( array(　　//投稿に貼り付けた画像をすべて読み込み変数に代入
    'post_parent' => $post->ID,
    'post_status' => 'inherit',
    'post_type' => 'attachment',
    'post_mime_type' => 'image',
    'exclude' => get_post_thumbnail_id()
));
foreach($attachments as $attachment): setup_postdata($attachment);    //画像を1つずつ取り出し繰り返し処理
    $image = wp_get_attachment_image_src($attachment->ID, 'full');    //画像のアドレス／幅／高さを取得
    $url = $image[0];    //画像のアドレスを変数に代入
?>
    //wp_get_attachment_image()で画像の HTML（img要素）を出力し、a 要素（リンク先は画像のアドレス）で囲む
    <a href="<?php echo $url; ?>"><?php echo wp_get_attachment_image($attachment->ID, 'thumbnail'); ?></a>
<?php endforeach; ?>
</div>

アイキャッチ画像以外の添付画像のサムネイルを出力し、クリックすると元の画像を表示

特定の画像を除外したり、出力するタグを指定できるようにしたもので、ギャラリーのショートコードの記述（wp-includes の media.phpの gallery_shortcode()）を参考した。

‘exclude’を指定する場合は、必要に応じてget_post_thumbnail_id() を含める。
例：’exclude’ => get_post_thumbnail_id().’,250,251,252,253′

function get_attached_images($args = array()) {
  global $post;
  $defaults = array(  //デフォルト（何も指定しなければこの内容で出力）
    'post_parent' => $post->ID,
    'orderby' => 'menu_order ID',
    'order' => 'ASC',
    'post_status' => 'inherit',
    'numberposts' => -1,
    'offset' => 0,
    'exclude'    => get_post_thumbnail_id(),  //アイキャッチ画像を除外
    'wrapitemtag' => 'ul',
    'wrapitemtag_class' => 'gallery',
    'itemtag'    => 'li',
    'itemtag_class' => 'gallery-item',
    'titletag'    => 'p',
    'titletag_class' => 'gallery-title',
    'captiontag' => 'p',
    'captiontag_class' => 'gallery-caption',
    'descriptiontag'    => 'p',  
    'descriptiontag_class' => 'gallery-description',  
    'a_target' => '_blank',
    'size'       => 'thumbnail',
    'link_size'  => 'full'    
  );
  $args = wp_parse_args( $args, $defaults ); //パラメータを解析し、省略されたパレメータにはデフォルト値をセット
  extract( $args, EXTR_SKIP ); //キーを変数名、値を変数の値として処理
    
  $attachments = get_posts( array(
    'post_parent' => $post_parent, 
    'orderby' => $orderby, 
    'order' => $order, 
    'post_status' => $post_status, 
    'numberposts' => $numberposts, 
    'offset' => $offset, 
    'post_type' => 'attachment', 
    'post_mime_type' => 'image',  
    'exclude' => $exclude
   ) );
  
  if ( $attachments ) {
    //echo '<' .$wrapitemtag .' class="'.$wrapitemtag_class. '">';   
    echo '<ul class="gallery">';
    foreach ( $attachments as $attachment ) {
      // $link_image_src にリンク先画像（添付ファイル）の表示用データを格納
      $link_image_src = wp_get_attachment_image_src($attachment->ID, $link_size);
      // $thumb_image_src に 表示画像（添付ファイル）の表示用データを格納
      $thumb_image_src = wp_get_attachment_image_src($attachment->ID, $size);

      // 代替テキストを取得
      $alt = esc_html(get_post_meta($attachment->ID, '_wp_attachment_image_alt', true));
      // タイトルを取得
      $title = esc_html(trim($attachment->post_title));
      // キャプションを取得
      $caption = esc_html(trim($attachment->post_excerpt));
      // 説明を取得
      $description = esc_html(trim($attachment->post_content));

      echo '<' .$itemtag .' class="'.$itemtag_class. '">';
      if($a_target) {
        echo '<a href="' . $link_image_src&#91;0&#93; .  '" target="'. $a_target. '">' ;
      }else{
        echo '<a href="' . $link_image_src&#91;0&#93; .  '">';
      }
      echo '<img src="' . $thumb_image_src&#91;0&#93; . '" alt="' . $alt . '" title="' . $title . '" width="' . $thumb_image_src&#91;1&#93; . '" height="' . $thumb_image_src&#91;2&#93; . '" />';
      echo '</a>';
      
      
      if ( $titletag && $title ) {
        echo '<' .$titletag .' class="'.$titletag_class. '">'. $title . '</' .$titletag .'>';
          }
      
      if ( $captiontag && $caption ) {
        echo '<' .$captiontag .' class="'.$captiontag_class. '">'. $caption . '</' .$captiontag .'>';
          }
      
      if ( $titletag && $title ) {
        echo '<' .$descriptiontag .' class="'.$descriptiontag_class. '">'. $description . '</' .$descriptiontag .'>';
          }
               
      echo '</' .$itemtag .'>';
    }
    echo '</' .$wrapitemtag .'>';   
  }  
}

関連関数

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
wp_get_attachment_link($id, $size, $permalink, $icon, $text)
添付ファイルへのリンクのHTMLテキストを取得する。添付ファイルのみを対象とするループで使用。
パラメータ
$id（オプション）：添付ファイルのID（デフォルトは現在の投稿（添付ファイル）のID）
$size（オプション）：サイズを指定（デフォルトは'thumbnail'）
$permalink（オプション）：パーマリンクを使用する場合は true を指定（デフォルトはfalse）
$icon（オプション）：アイコン画像を使用する場合は true を指定（デフォルトはfalse）
$text（オプション）： リンクテキストを指定（デフォルトは false）。この文字列を指定すると画像は表示されずに代わりにこの文字列がリンクとして表示される。
戻り値
アタッチメント情報が存在する場合は、そのHTMLテキストを返す。アタッチメント情報が得られない場合は文字列「Missing Attachment（を翻訳したもの）」を返す。

投稿した画像に付くクラス

画像を投稿する際に表示を「なし」「左」「中央」「右」の中から選択するが、その際に以下のようなクラスが付加される。

  • 「左」：alignleft
  • 「中央」：aligncenter
  • 「右」：alignright

これらのクラスに設定をして画像とテキストのレイアウトを調整する。

.alignleft {
  display: block;
  float: left;
  margin-right: 15px;
  margin-bottom: 1em;
}
.aligncenter {
  display: block;
  margin:0 auto;
}
.alignright {
  display: block;
  float: right;
  margin-left: 15px;
  margin-bottom: 1em;
}

サムネイル

WordPress で画像をアップロードすると、「設定」→「メディア」ページで設定した基本サイズ（thumbnail,medium, large）、「set_post_thumbnail_size()」で指定したサイズ（post_thumbnail）、及び add_image_size() で指定したサイズのサムネイルが作成される。

基本サイズを生成させないようにするには、「設定」→「メディア」ページで生成させたくないサイズの値を「0」にする。