【初心者向け】Swiperを使ってWordPressにスライダーをつくる方法。ページネーションも表示させる

記事要約
  • WordPress歴が浅く、プログラミング知識もあまりない人向け
  • Swiperを使って、簡単にスライダーを作る方法を分かりやすく解説
  • ページネーションの作り方も解説

けんぞうの本棚」をスライダーで、見やすくしてみました。swiperを使っているページキャプチャ

この際「Swiper」という高性能なスライダーを利用しまたので、紹介しておきます。

素人向けですので、かなり噛み砕いて解説しています。

Swiperなら素人でも簡単にスライダーを作成できる

 

まず、Swiperを使った際のイメージを掴んでもらおうと思います。以下がデモです。

 

「Swiper」が素人でも簡単に利用できると思う理由は、利用者が多いため、サンプルコードが様々なブログで紹介されているからです。

実際僕も、自分でコーディングしたわけではなくて、フロントエンジニアの人が運営しているサイトを 参考にして、コードを拾ってきました。

 

Swiperの導入手順【コピペで完了】

 

カスタマイズする部分を除いて、コピペで完結します。

Swiperを導入する3つの手順
  1. header.phpへコードコピペ
  2. footer.phpへコードコピペ
  3. 投稿ページへコードコピペ

 

1.header.phpへコードコピペ

WordPressダッシュボード>外観>テーマの編集を選択して、「header.php」を開きます。

header.phpを選択

こちらの</head>上部に以下のコードを追加します。

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css” />

注意

この際間違えて、<?php wp_head();  ?>を消さないように注意してください。こちらを消してしまうと、プラグインが利用できなくなったりしますので。

2.footer.phpへコードコピペ

同様に、テーマの編集の画面で、footer.phpを選択してください。

footer.phpを選択

 

こちらの </body> (bodyの閉じタグ)よりも上部に、以下のコードをコピペしてください。

コピペが完了したら、画面下部の「ファイルを更新」を忘れずに。

3.投稿ページへコードコピペ

 

上記の設定でSwiperを使える準備は完了しているので、試しに使ってみましょう。

新規投稿画面で「テキスト」タブに切り替えて、以下のコードを貼り付けてみてください。


左右の切り替えボタンは違うものだと思いますが、スライダーが完成するはずです。

ここからカスタマイズする際は、<img>タグの部分を書き換えて、オリジナルのスライダーを作成してください。

ちなみに左右ボタンの切り替えに関しては、以下のサイトを参照しました。かなり分かりやすく解説されてますので、おすすめです。

参考 サンプル付き!簡単にスライドを作れるライブラリSwiper.js超解説(各種ナビゲーションカスタマイズ編)ガリガリコード

さて、今回は「Swiper」の使い方を初心者向けに簡単に解説しました。

スライダーをページに導入するメリットは2つほど

スライダーを導入するメリット
  1. 無駄に下へスクロールする必要がなくなり、ユーザーの利便性が高まる
  2. 利便性が高まった結果、ユーザーの離脱率が下がる

僕の今取り組んでいる新しいサイト作りでは、Swiperを使っていて、かなり良い感じに仕上がっています。

 

誰でも簡単に実装できるものですので、ぜひSwiperを使ってみてください。