きっかけ
私はバックカントリーのクラブ「ぶなの木スキークラブ」に所属していて、Webサイトを作成を任されています。
Webサイトを作成するにあたり、いろんな山岳会やクラブ等のWebサイトを参考にしているのですが、ほとんどのWebサイトで活動記録の記事をスライドショーで表示していることがわかりました。
確かに、山岳会等のクラブを検索する人にとっては、見つけたWebサイトのクラブがどういう活動をしているか把握したいはずで、活動記録がわかりやすい、記事のサムネイルをスライドショーで表示する方法は理にかなってると思いました。
作成しているWebサイトはWordpressのCocoonを使っているので、Cocoon上で、投稿記事のアイキャッチ画像をスライドショーで表示し、アイキャッチ画像をクリックすれば投稿記事に飛ぶ、といったことができないか、と考え、「swiper.js」を使った実装を考えました。
この記事で分かること
私と同じように、Wordpressを使ったWebサイトに、投稿記事のアイキャッチ画像をスライドショーで表示したいと考えている方にとって、その作り方がわかります。
swiperについて
swiperはオプション・コールバック関数が豊富で利用者数が多く、日本語の参考記事も多いとのことで、様々なWebサイトを見ながら実装しました。（参考：https://b-risk.jp/blog/2022/04/swiper/）
完成したスライドショー
「ぶなの木スキークラブ」の「活動記録」
設置方法
head-insert.phpにswiper用CSSのリンクを追加
コード下部に以下を追加
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>footer-insert.phpにswiper.jsの初期化を実装
swiperの初期化はフッターに実装しました（※ただし、テーマを更新すると、footer-insert.phpが更新されてしまい記述内容が消えてしまうので注意。）
フッターに実装する理由は、ページ内の他の要素を読み込んだ後に実行されるからです。先にページ内のHTMLを読み込み、最後にJavaScriptが実行されるため、ページ表示速度に影響を与えません。GoogleのPage Speed InsightでもJavaScriptはフッターに記述するように推奨されています。
footer-insert.phpの下部に以下を追加（javascriptの各設定値については後述）
<script type="module">
const mySwiper = new Swiper('.swiper', {
slidesPerView: 1,
grabCursor: true,
speed: 1000,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
400: {
slidesPerView: 2,
spaceBetween: 32,
},
800: {
slidesPerView: 4,
spaceBetween: 32,
}
},
});
</script>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>swiper用ショートコードの実装
投稿記事を読み出してswiperでスライドショー表示させるために、WordpressのPHP関数をコールし、swiperでそれを表示するスクリプトを、固定ページ内に実装します。
表示する固定ページにphpファイルを読み込ませるためには、ショートコードを使います。
ショートコードで呼び出す関数を作成するために、new_posts_carousel.phpを追加します。
new_posts_carousel.phpの新規追加
WordPressを実装したディレクトリ内の「wp-content/themes/cocoon-child」にフォルダを作成し、その中にphpファイル「new_posts_carousel.php」を作成。下記スクリプトを実装する。
<div class="swiper">
<div class="swiper-wrapper">
<?php
$args = array(
'post_type' => 'post', // 投稿タイプ
'posts_per_page' => 10,// 表示件数
'category_name' => 'activity',
);
$posts = get_posts( $args );
foreach ( $posts as $post ): // ループの開始
setup_postdata( $post ); // 記事データの取得
?>
<div class= "swiper-slide">
<div class = "card-shadow">
<a href="<?php the_permalink($post->ID); ?>">
<div class = "card-image">
<?php echo get_the_post_thumbnail($post->ID); ?>
</div>
</a>
<div class = "card-text">
<p>
<?php echo get_the_title($post->ID);?>
</p>
</div>
</div>
</div>
<?php
endforeach; // ループの終了
?>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
<div class="swiper-pagination"></div>
</div>the_permalinkは引数にカテゴリIDを入れないと使えません。
また、関数「the_post_thumbnail」でサムネイルを取得したかったのですが、コールしてもサムネイルのリンクが取得できないので（原因不明）、代わりに「get_the_post_thumbnail」を使用。ただし出力する場合にechoキーワードが必要です。
functions.phpにショートコード用関数を実装
functions.phpに下記関数を追加
//投稿・固定ページ内にPHPファイルをインクルード(挿入/実行)させる
function Include_my_php($params = array()) {
extract(shortcode_atts(array(
'file' => 'default'
), $params));
ob_start();
include("★★★cocoon-childに作成したフォルダ名を入力★★★/$file.php");
return ob_get_clean();
}固定ページに実装
固定ページ内のスライドショーを設置したい箇所に、下記ショートコードを追加
[myphp file='new_posts_carousel']swiperの初期化設定(footer-insert.phpで実装したjavascriptの各設定値の説明)
footer-insert.phpの下部に下記のように実装した、swiper初期化の引数について説明します。
const mySwiper = new Swiper(下記箇条書きを設定)- ‘.swiper’:実装するHTMLエレメント
- slidesPerView:表示させるスライドの枚数を指定
- grabCursor:PCでマウスカーソルを「掴む」マークにする
- speed:スライドアニメーションのスピード（ミリ秒）
- autoplay:自動再生させる
- delay:次のスライドに切り替わるまでの時間（ミリ秒）
- disableOnInteraction:ユーザーが操作しても自動再生を止める
- pagination:スライドショー下部の「・・・」に対するオプション
- el:ページネーション要素のHTMLエレメント
- clickable:クリックによるスライド切り替えを有効にする
- navigation:スライダーの左右に表示されている矢印に対するオプション
- nextEl:「次へ」ボタン要素のHTMLエレメント
- prevEl:「前へ」ボタン要素のHTMLエレメント
- breakpoints:画面幅ごとの変更点600px以上で適用
- 400:画面幅400px以上で適用
- slidesPerView:表示させるスライドの枚数を指定
- spaceBetween:スライド間の余白（px）
- 800:画面幅800px以上で適用
- slidesPerView:表示させるスライドの枚数を指定
- spaceBetween:スライド間の余白（px）
- 400:画面幅400px以上で適用
コメント