CREATOR BLOG

投稿に紐付けらた画像でギャラリーを作成!

ギャラリーイメージ

商品のページなどでは、いろんな角度のから撮影した写真を複数載せるケースって割と多いです。
やはりネットでは実際のモノを手に取れないので、画像データで伝えるのってとっても大事。

WordPressでギャラリーを作成するには、「メディアを追加」をクリックした時にでるウィンドウの「ギャラリーを作成」で挿入させるか、ギャラリーを作成するプラグインが一般的だと思います。

でもこれらのやり方って慣れている人以外は割と更新に手間取ってしまうんですよね。
納品物などでは、スタッフさん毎にちょっと違うやり方してしまいレイアウトが崩れたりなどなど、色々問題がでるケースがあるんですよ。
かといってスタッフさんに作業手順の徹底といっても、なかなか難しいです。

誰がどんな事をやっても同じ結果になる様にするためには、もう更新作業を単純化するのが一番です。良く使う方法としては、アイキャッチ画像を設定してそれをメインにし、その他の画像は「メディアを追加」ボタンからアップロードするだけです。

まずは、アイキャッチ画像を使えるようにします。
Wordpressはデフォルトではアイキャッチ画像を使えるようになっていません。
そこでテーマ内のfunctions.phpに以下を記述します。

すると投稿の編集画面にアイキャッチ画像を設定するボックスが表示されます。

アイキャッチ画像入力ボックス

 

「アイキャッチ画像を設定」をクリックして画像をアップロード&アイキャッチ画像に設定します。

アイキャッチ画像を表示するにはthemeのテンプレートなどに以下の様に記述します。

<?php
 $thumb_ID = get_post_thumbnail_id();

 $thumbObj = wp_get_attachment_image_src($thumb_id,$size='full');
 //代替テキスト取得
 $alt = esc_attr(get_post_meta($thumb_id, '_wp_attachment_image_alt', true));
//キャプションを取得
 $captions = esc_attr(get_post_meta($postid,'media_caption',false)); 

?>
 <figure>
   <img src="<?php echo esc_attr($thumbObj[0]); ?>" alt="<?php if($alt != '') : echo $alt; else: the_title(); ?>">
<?php
  //
  if($captions != ''):
?>
  <figcaption><?php echo $captions; ?></figcaption>
<?php
  endif;
?>
</figure>

次はその他の画像を取得する方法です。
Wordpressの場合、アップロードされた画像情報もpostデータとして同じようにデータベースに格納されています。
ですので、get_posts()関数で取得できます。
‘post_type’が’attachment’となり’post_mine_type’が’image’として格納されているので、get_postsの引数は以下の様に設定すると良いでしょう。

    $args = array(
        'post_type'         => 'attachment',
        'post_mime_type'    => 'image',
        'orderby'           => 'menu_order',
        'order'             => 'ASC',
        'post_status'       => null,
        'numberposts'       => -1,
        'offset'            => 0,
        'post_parent'       => $post->ID,
    );
    //画像情報が配列に入ります
    $attachments = get_posts( $args );

上記の方法で投稿に紐付けられた画像情報が配列に入りました。
後はforeachループを使って書き出していきます。

$postid = $post->ID;//取得する投稿のポストID
$numberimages = 10;//取得する添付画像の数。-1で無限大
$offset = 0;//取得する添付画像のオフセット。0で最初から
$imag_size = 'full';//取得する画像のサイズ(thumbnailやfullなど)

$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'orderby' => 'ID',
'order' => 'ASC',
'post_status' => null,
'numberposts' => $numberimages,
'offset' => $offset,。
'post_parent' => $postid,
);

$attachments = get_posts( $args );



foreach ( $attachments as $attachment ) {

$image_src = wp_get_attachment_image_src($attachment->ID, $imag_size); //画像情報オブジェクトを取得
// 代替テキストを取得
if(get_post_meta($attachment->ID, '_wp_attachment_image_alt', true)) {
$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
} else {
$alt = esc_attr(get_the_title());
}
echo '<img src="' $image_src[0] . '" alt="' . $alt . '">;
}

 

これらを関数にまとめてfunctions.phpに書いておくのも手です。

    ▲ PAGE TOP