WordPressには標準でギャラリーを作成する機能があります。
ギャラリーを作成すると自動的に
[gallery columns="6" link="none" ids="104,103,102,101,100,99"]のようなショートコードが埋め込まれて、画像が出力されます。
さらに、カラム数に応じてレイアウトまでしてくれて大変便利な機能です。
ですが、逆に自由にレイアウトしたいときには不便だったりします。
そこで、このギャラリーレイアウトを自由にカスタマイズする方法を紹介します。
ギャラリーの作成方法は、いろんな方が紹介しているので割愛します。
フィルターフックを使ってギャラリーをカスタマイズ
ギャラリーカスタマイズにはpost_galleryというフィルターフックを使います。
このフィルターフックはギャラリーを出力するショートコード内に定義されています(media.phpのgallery_shortcode関数)。
以下のコードをfunctions.phpにコピペするだけで、出力例のようなhtmlが出力されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | add_filter( 'post_gallery', 'my_post_gallery', 10, 3 ); function my_post_gallery( $output, $attr, $instance ) { $ids = explode(',', $attr['ids']); $images = array(); foreach( $ids as $id ) { $image_src = wp_get_attachment_image_src($id, 'post-thumbnail'); $images[] = $image_src[0]; } ob_start(); ?> <ul class="my-gallery"> <?php foreach( $images as $image ) { ?> <li><img src="<?php echo $image; ?>"></li> <?php } ?> </ul> <?php $output = ob_get_contents(); ob_end_clean(); return $output; } |
出力例
1 2 3 4 5 | <ul class="my-gallery"> <li><img src="thumb1.jpg"></li> <li><img src="thumb2.jpg"></li> <li><img src="thumb3.jpg"></li> </ul> |
あとは、お好みのcssをあてて行くだけです。