横浜のITサポート・WEB制作会社

Webサイト制作

WordPressの使い方を知りたい!

Windows

パソコンのトラブル解決方法を知りたい!

Office365

Office365でできることを知りたい!

アプリ

便利なアプリを知りたい!

h

すべての記事

人気記事TOP15

タグ一覧

会社情報

採用情報

お問い合わせ

【JS】SwiperとDiviで複数投稿を表示する自動切り替えスライダーをつくる

2022/10/31 | WEB, WEBデザイン, WordPress

ITサポート・ホームページ制作はお任せください

  • パソコンの動作が遅い・重いと感じる
  • パソコンやスマートフォン、複合機などIT機器を新しく入れ替えたい
  • システム化・クラウド化など業務のIT化・DX化を考えている
  • ホームページを新しく作りたい
  • 古くなったホームページを修正をしてほしい

上記の様なお悩みがありましたらぜひ弊社までお気軽にお問い合わせください!

こんにちは。

以前に「Swiper.jsで自動で切り替わるレスポンシブなカバーフロースライダーをつくる」方法をご紹介しました。

今回はその応用として、WordPressテーマ「Divi」とSwiperを連携し、Diviのブログモジュールを複数投稿表示する自動切り替えスライダーへカスタマイズする方法をご紹介したいと思います。

完成イメージ:複数投稿を表示する自動切り替えスライダー

実際につくる自動切り替えスライダーは、次のような最新6件の投稿を表示するスライダーです。

止まった状態だとこのような感じです。

Diviだけでは複数投稿を表示する自動切り替えスライダーはつくれない

Diviでは標準でスライダーモジュールが用意されているので、それを使うと自動で切り替わるスライダーをつくることができます。

しかし、そのスライダーモジュールでは次のような1投稿ずつ切り替わるスライダーのみをサポートしており、今回ご紹介するような複数枚の投稿を表示させたスライダーをつくることができません。

複数枚の投稿を表示させたスライダーをつくるにはDiviをカスタマイズする必要があり、今回はSwiperを使ってそれを行います。

【JS】SwiperとDiviで複数投稿を表示する自動切り替えスライダーをつくる

次の流れで複数投稿を表示する自動切り替えスライダーをつくっていきます。

  • Diviでブログモジュールを設置する
  • JavaScriptでSwiperを定義する

Diviでブログモジュールを設置する

ビジュアルビルダーを起動したら、まずは行を挿入します。

挿入した行の幅を「100%」にします。

幅を100%とした行にブログモジュールを挿入します。

挿入したブログモジュールのレイアウトを「フルワイド」にします。

ブログモジュールに任意の名前でIDを設定します。

このIDを目印に後述するJavaScriptでSwiperのClassをAddします。

JavaScriptでSwiperを定義する

WordPress管理画面より、Diviのテーマオプションへアクセスします。

Diviテーマオプションの統合タブより、ヘッダー部にコードを追加します。

追加するコードは次のとおりです。

<!-- Swiperの読み込み -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<script>
jQuery(document).ready(function(){
    /* ブログモジュールにSwiperのClassを追加 */
    jQuery("#id-name").addClass("swiper mySwiper");
    jQuery("#id-name .et_pb_ajax_pagination_container").addClass("swiper-wrapper");
    jQuery("#id-name .et_pb_post").addClass("swiper-slide");

    /* Swiperを定義 */
    var swiper = new Swiper(".mySwiper", {
        autoplay: true,
        slidesPerView: 5,
        loop: true,
        spaceBetween: 20,
    });
});
</script>

以上の作業を行ってページを確認すると、Diviのブログモジュールが複数投稿を表示する自動切り替えスライダーへカスタマイズされているかと思います。

ITサポート・ホームページ制作はお任せください

  • パソコンの動作が遅い・重いと感じる
  • パソコンやスマートフォン、複合機などIT機器を新しく入れ替えたい
  • システム化・クラウド化など業務のIT化・DX化を考えている
  • ホームページを新しく作りたい
  • 古くなったホームページを修正をしてほしい

上記の様なお悩みがありましたらぜひ弊社までお気軽にお問い合わせください!