Swiper.jsでフォトギャラリーを作る
今度は、Swiper.jsを使って、立体的なキューブが回転するような効果のあるフォトギャラリーを作成してみます。「effect: ‘cube’,」をscriptに追加するだけでOKです。
Swiper.jsの導入については以下の記事を参考にしてください。
ギャラリーに表示させる写真は、WordPressのメディアライブラリの中から、タイトルが部分一致するものを選んでくるようにしてみました。
上記のギャラリーは、インドに旅行した時の写真なのですが、画像をメディアライブラリにアップロードする際にタイトルに「indo」という言葉を入れておき、「preg_match」関数でそれを拾ってくるようにしています。
<?php $args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_mime_type' => 'image' ); $attachments = get_posts( $args ); if ( $attachments ) { foreach ( $attachments as $attachment ) : if ( 1 === preg_match( "/【一致させたいワード】/u" , $attachment->post_title ) ) { echo '<div class="swiper-slide">'; echo '<a href="' . wp_get_attachment_url( $attachment->ID ) . '" target="_blank">'; echo '<div style="height:300px; background:url(' . wp_get_attachment_url( $attachment->ID ) . ') no-repeat center / cover;"></div>'; echo '</a>'; echo '</div>'; } endforeach; } wp_reset_postdata(); ?>