Swiper と WordPress の連携
以前の記事では、slick.js との連携によるスライダーの設置について書きましたが、
今回は swiper についてご紹介します。
こちらの swiper ですが、
「jQueryに依存しない」スライダー系のjsライブラリになります。
しかも、ライブラリ公式サイトの以下ページに記載のある通り
Vue.js にも対応しており、現在人気のあるフロントエンドフレームワーク(他には React.js にも対応している)でもスムーズに
使用可能という点が素晴らしいです。
Swiper Vue.js Components
※現時点では、Vue.js の場合 version 3 にのみ対応しているようです。
Vue.jsでの使用方法については、それはそれで今後、
当サイトでも実際に試してみた上で使い方を書きたいと思うのですが、
今回の記事ではまず、WordPressで構築されたWebサイトに swiper を組み込むにはどうすればいいか?
という所からやっていきたいので、
まずは、WordPressでの使用方法について記載していきたいと思います。
コード
では、コードをご紹介します。
大きく分けて下記の3段階で実装可能です。
- (1).必要なjsファイルを読み込む(この例ではfooter.phpへ記述します)
- (2).必要なcssファイルを読み込む(この例ではheader.phpへ記述します)
- (3).表示したいテンプレートに新しいWP_Queryを作成、表示用のコードを記述する
つまり、WordPressで構築されたWebサイト上で単純に表示させるだけであれば、
以前ご紹介した slick.js とだいたい同じ手順で組み込みが可能、という事です。
(1).必要なjsファイルを読み込む
では今回も、手順(1)から書いていきます。
まず、footer.php に swiper 本体を読み込みます。
もちろん、各ファイルへのパスは、適宜ご自分の環境に応じて置き換えてください。
<script src="<?php echo get_template_directory_uri();?>/assets/js/libs/swiper-bundle.min.js"></script> <script src="<?php echo get_template_directory_uri();?>/assets/js/swiper-setting.js"></script>
どのような方法で読み込むかは、公式の以下ページが参考になります。この記事の例では、 以下公式ページ内の Download assets の方法を用いています。
Getting Started With Swiper
(CDNを使用するなら上記公式ページリンク内 Use Swiper from CDN の方法、
直接ファイルをDLして指定するなら Download assets の方法、ということです)
上記の2行目 swiper-setting.js というのは、どんな感じでスライダーを表示させるか?を定義したjsファイルで、内容は以下になっています。
var theSwiper = new Swiper('.swiper-container', { direction: 'horizontal', loop: true, pagination: { el: '.swiper-pagination', }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, scrollbar: { el: '.swiper-scrollbar', }, })
なおこのファイルについてはオプション設定用のjsファイルですので、以前の slick.js の場合と同様に、ファイル名や内容を変更しても問題なく動作します。
どんなオプションがあるか、デモで見て確認する際は公式ページの以下より。
Swiper Demos
どんなオプションがコードとして指定できるか、一覧で見る場合は公式ページの以下に記載されています。
Swiper API
(2).必要なcssファイルを読み込む
次に、手順(2)です。 header.phpに swiper の表示用cssを読み込みます。
こちらも各ファイルへのパスは適宜ご自分の環境に応じて置き換えてください。
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/js/libs/swiper-bundle.min.css">
ここまでの (1), (2) で、ライブラリ側の必須jsとcssの読み込みができたので、次の (3) で実際に表示するためのコードを書きます。
(3).表示したいテンプレートに新しいWP_Queryを作成、表示用のコードを記述する
手順(3)です。上記までで、swiper を使用する準備ができたので、
スライダーを表示したい箇所に以下を記述します。
<?php $slideargs = array( 'post_type' => 'post', 'post_status' => 'publish', 'orderby' => 'rand', 'posts_per_page' => 5 ); $the_query = new WP_Query($slideargs); ?> <div class="swiper-container"> <div class="swiper-wrapper"> <!-- スライダー用のループ --> <?php if ($the_query->have_posts()): while ($the_query->have_posts()): $the_query->the_post(); ?> <div class="swiper-slide m-slider-child"> <div class="m-slider-desc"> <?php if(has_post_thumbnail()): ?> <img src="<?php the_post_thumbnail_url('large'); ?>" alt="<?php the_title(); ?>"> <?php endif; ?> <div class="m-slider-text"> <p><?php the_title(); ?></p> </div> </div> </div> <?php endwhile; ?> <!-- // スライダー用のループ --> <?php wp_reset_postdata(); ?> <?php endif; ?> </div><!-- pair of swiper-wrapper --> <!-- ページネーション用 --> <div class="swiper-pagination"></div> <!-- ナビゲーションボタン用 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div><!-- pair of swiper-container -->
デモ
こちらにデモを用意しました。挙動を確認してみてください。
解説など
では、各行について細かく見ていきましょう。
まず、1~10行目までは取得したい投稿の定義です。
スライダー用に新しい WP_Query が必要になるので、「どんな条件の投稿を取得するか?」という部分をここで配列として定義して、
変数 $slideargs に格納。
それを9行目で WP_Query() 関数に渡して、
$the_query として定義しています。
12行目から37行目がスライダー本体部分になります。
15行目はWordPressのループを開始する際の、おきまりの記述です。
(WP_Query に渡した条件の投稿が存在したら、その存在する投稿数分だけ while により処理を行う。というような意味です。)
16行目~25行目までのdiv要素(.swiper-slide)が、1個ずつのスライドとして認識されます。
17行目~24行目までがスライドの中身です。
18~20行目までがアイキャッチ画像の取得部分。
21~23行目は記事タイトルを表示させています。
今回のデモではアイキャッチ画像、記事タイトルしか表示させていませんが、
実際の案件では、投稿日、更新日、あとは記事の内容を
冒頭何文字かだけ表示させるような仕組みにしても良いかと思います。
また、最低限の見た目を整えるcssは、以下のような感じになります。
もちろんこれはデモ用の簡素なコードですので、もっと細かく書けば、さらに良い感じの見た目になります。
.m-slider-desc{ position: relative; z-index: 0; } .m-slider-desc img{ width: 100%; } .m-slider-text{ background: rgba(0,0,0,.7); bottom: 0; color: #fff; height: 100px; padding: 1rem; position: absolute; width: 100%; z-index: 10; }
まとめ
今回は swiper を使い、WordPressの投稿をスライダーとして表示させる方法についてご紹介しました。
なお冒頭にも書いた通り、この swiper は
Vue.js にも対応している、との事ですので、
今後は Vue.js での組み込みについても試してみる予定です。