【WordPress】投稿記事をカルーセルスライダーで表示する3つの方法!

最大52%OFF!

今、ブログを始めようとしている方、

今なら、ConoHaサーバーの「WINGパックプラン」が最大55%OFF!

「1,452円/月」が「643 円/月」の「低コスト」で始められるチャンスとなっております!

お申し込みはこちらから!

美雲このは

ConoHa WINGは国内最速の高性能レンタルサーバーサービスで
初期費用無料、最低利用期間無しでご利用いただけます!




(この記事は2022年1月26日に投稿されました。)

皆さんはサイトのTOPページにおすすめ記事をおしゃれに表示させたいと思ったことはありません?

その際におすすめなのが、カルーセルスライダーです。

カルーセルスライダーとは一定時間ごとに自動でスライドして切り替える一枚絵のようなスライダーとなります。

つまり、投稿記事のリンクカードをカルーセルスライダーで表示させることで、TOPページをおしゃれにすることができます。

またカルーセルスライダーを表示させるには、jQueryのslick()を使用するかswiper.jsを使用するかプラグインを使用するかの3パターンとなります。

そのため、「少し難しめだけどチャレンジしたい」場合はslick()やswiper.jsを使用し、「コードの修正が面倒だ」という場合はプラグインを使用して投稿記事のカルーセルスライダーを設置しましょう。

今回はWordPressの投稿記事をカルーセルスライダーで表示する3つの方法について紹介していきます。

この記事はこんな方におすすめ
⚫︎ サイトをおしゃれにしたい
⚫︎ サイトにカルーセルスライダーを表示させたい

カルーセルスライダーとは?

カルーセルスライダーとは一定時間ごとに自動でスライドして切り替えるWEBデザインにおけるスライダーとなります。

まるで一枚絵を横にスクロールするようなスライダーで、スライドギャラリーとして一つのの代表格となっています。

よくサイトのTOPページなどで使用されており、普通に横へスクロールするスライダーよりもおしゃれです。

カルーセルスライダーは下記の画像のようなイメージとなります。

カルーセルスライダーのサンプル

また、スライドする速さを調整したり、表示するセルの数、スライドするセルの数など細かいこところまでスライドを設定することもできますので自分にサイトにあうスライダーを作成することができます。

Sossy

カルーセルスライダーは、普通のスライダーと比べてマウスやスマホ操作だけでなく、自動でスライドさせることができます。
また、横一列に並べて一枚絵のようにゆっくりとスライドさせることもできるのでとてもおしゃれです!

投稿記事をカルーセルスライダーで表示するには

投稿記事をカルーセルスライダーで表示するには下記の2つの方法があります。

⚫︎ jQueryのslick()でカルーセルスライダーを表示する方法
⚫︎ swiper.jsを使ってカルーセルスライダーを表示する方法
⚫︎ プラグインを使ってカルーセルスライダーを表示する方法

言葉だけではわからないかと思いますので、それぞれの方法について紹介していきます。

jQueryのslick()でカルーセルスライダーを表示する方法

まず、1つ目はjQueryのslick()でカルーセルスライダーを表示する方法です。

こちらは、PHPファイルにslickファイルをリンクさせ、jQueryのslick()を使用することで、カルーセルスライダーを表示することができます。

しかし、コードの追記だけでなく、サーバーにslickファイルを追加しないといけないので初心者にとっては難易度は高めです。

そのため、WordPressでslick()を使用する方法について詳しく知りたい方は下記の記事をご参考ください。

試しに、サイトのTOPページに投稿記事のカルーセルスライダーを表示してみます。

下記のファイルにそれぞれコードを追加していきます。

⚫︎ header.php

⚫︎ front-page.php

⚫︎ footer.php

⚫︎ index.js

実行結果

jQueryのslickでWordPressの投稿記事のカルーセルスライダーを表示した結果

サイトのTOPページにカルーセルスライダーが表示されています。

また、「autoplay: true」にしているため、自動でスライドが行われています。

jQueryのslick()でカルーセルスライダーを表示した結果
Sossy

こちらの方法では、作成したPHPファイルやダウンロードしたslickファイルをFTPで転送する必要があります。
そのため、リンク先のディレクトリを間違えると動きませんので注意してください。

swiper.jsでカルーセルスライダーを表示する方法

2つ目は、swiper.jsでカルーセルスライダーを表示する方法です。

swiper.jsとはスライダーが作れるJavaScriptのライブラリとなります。

jQueryなどのライブラリを必要としないため、先ほど紹介したslick()の方法よりも高速で読み込むことができます。

試しに、swiper.jsで作成したカルーセルスライダーをTOPページに表示してみます。

⚫︎ header.php

⚫︎ front-page.php

⚫︎ footer.php

実行結果

swiper.jsを使ってWordPressの投稿記事のカルーセルスライダーを表示した結果

こちらの方法でもサイトのTOPページにカルーセルスライダーが表示されています。

Sossy

こちらの方法ではnew演算子でインスタンスを作成し、swiperで作成したカルーセルスライダーをカスタマイズすることができます。
また、今回はCDNを使用しているため、サーバーにswiperファイルを転送しなくてもswiper.jsを使用することが可能です。

プラグインを使ってカルーセルスライダーを表示する方法

3つ目は、プラグインを使ってカルーセルスライダーを表示する方法です。

「Meta Slider」というプラグインをインストールして設定を行うと、ショートコードを追記するだけで好きな場所にカルーセルスライダーを表示することができます。

こちらのプラグインは他のプラグインと違って無料でカルーセルスライダーを表示させることができます。

試しに、「Meta Slider」で作成したカルーセルスライダーをTOPページに表示してみます。

⚫︎ Meta Sliderの設定画面

Meta Sliderの設定画面

⚫︎ front-page.php

実行結果

Meta Sliderでカルーセルスライダーを表示した結果

「Meta Slider」で設定したカルーセルスライダーをサイトのTOPページに表示されています。

また、幅を調整すると、1画面で表示するスライダーのセルの数を調整することができます。

Sossy

こちらの方法では、プラグインの設定画面でスライドとして表示する画像やURLを設定し、ショートコードを追記する必要があります。
サーバーのファイルをいじることがない為、初心者のだとこちらの方法がおすすめです。

まとめ

⚫︎ カルーセルスライダーとは一定時間ごとに自動でスライドして切り替えるWEBデザインにおけるスライダーである

⚫︎ 投稿記事をカルーセルスライダーで表示するには下記の3つの方法がある
・ jQueryのslick()でカルーセルスライダーを表示する方法
・ swiper.jsでカルーセルスライダーを表示する方法
・ プラグイン(Meta Slider)を使ってカルーセルスライダーを表示する方法