リオラボ
icon

【サンプル】WordPressギャラリースライダー作成方法【プラグインなし】

この記事ではWordPressでギャラリースライダーを作成する方法を紹介しています。以下で実際の動作を確認できるサンプルがありますが、写真をギャラリーのようにスライダー形式で表示したく作成しました。テキストやリンクを入れるなどカスタムして使うこともできます。

Swiperというスライドショーを簡単に作成できるJavaScriptライブラリを使うことで簡単に実現しています。

また、画像の追加や入れ替えをする際、わざわざPHPファイルを修正するのも面倒なのでWordPressの管理画面で編集できるようにしています。

スライダー自体にはプラグインは使っていませんが、画像をWordPressの管理画面で編集できるようにACF(Advanced Custom Fields)を導入しています。これによって簡単に画像の入れ替えや追加が可能となります。

こちらがサンプルです。

ギャラリースライダーのコード

以下がギャラリースライダーのコードです。

以下はSwiperライブラリを使用するために必要なライブラリです。

・Bootsttap、CSSでデザインを調整しています。好みで変更してください

ACF(Advanced Custom Fields)の設定

ACFプラグインをインストールしたら、各設定をしていきます。

投稿タイプ

ACF→投稿タイプの設定でGalleryという名称で投稿タイプを作成します。ここでは高度な設定で、タイトル、そしてカスタムフィールドにチェックを入れておきます。これによりWordPress管理画面にGalleryといった投稿タイプが表示されます。ここで画像の入れ替えが出来るようになります。

フィールドグループ

上記画像のように、gallery1,gallery2,gallery3・・・のように名前を設定し、戻り値の形式には画像URLを設定しましょう。ここではギャラリーを6枚にしていますが、もっと必要であれば追加しておいてください。6枚以上設定する場合、ギャラリースライダーのコードのget_field(‘gallery6’)部分を枚数分増やしておきましょう。

ロケーションルールには、投稿タイプ-等しい-Galleryを設定します。

画像を投稿する

WordPress管理画面→Galleryから、新規Galleryを追加します。gallery1,gallery2,gallery3・・・の箇所にそれぞれ画像を追加することができます。ここではギャラリー6枚に設定していますが、6枚全部に画像を設定しなくてもOKです。設定した画像だけがギャラリースライダーに表示されるようになっています。

まとめ

SwiperとACFを使うことで簡単にギャラリースライダーを作成し、WordPress管理画面で画像が入れ替え出来るようにしました。

なお、script部分でSwiperの設定を変更することができるので、好みにカスタムしてみてください。

slidesPerView: スライダーに一度に表示するスライドの数。ここでは1スライドを表示する設定

breakpoints: 画面サイズに応じてスライダーの設定を変更できます。
ここでは、画面幅が768px以上の場合にslidesPerViewを3に設定し、スライドの中央寄せを解除する設定です。

loop: スライダーが最後のスライドから最初のスライドに戻るループ機能を有効にします。trueに設定すると、スライドが循環します。

spaceBetween: スライド間のスペース(ピクセル単位)を設定します。ここでは30pxのスペースが設けられています。

centeredSlides: スライドが中央に寄せられるかどうかを設定します。trueに設定すると、現在表示されているスライドが中央に配置されます。