スライダーを道入したいと考え続けていていろんなプラグインのスライダーを導入してみたんだけど、プラグインでのスライダーはとにかく重い。一度はスライダーの道入を諦めたんだけど、遂に超軽量スライダー「Swiper」の道入に成功したから、その導入手順を解説したい。
本日もガジェマガ（@Gadgetkaeru）をご覧いただきありがとうございます。
Swiperは非jQueryだから軽い
書いてる俺がよくわかってないんだけど、ワードプレスのスライダープラグインはjQueryが使われているから重い。たくさんのワードプレスプラグイン製スライダーを入れたけど、どれも表示が1テンポ遅れて使い物にならなかった。これは脱プラグインを図るしか無いと決意して発見したのが「Swiper」だ。
軽いしレスポンシブ対応
Swiperは軽いクセにレスポンシブ対応もしていて、スマホでもパソコンでもキレイに表示される。しかもオプション（微調整）の項目が把握できないくらい多い。実際に今ここに表示されているスライダーがそれなんだけど、とにかく表示が早い。
実際に今ここに表示されているスライダーがそれなんだけど、とにかく表示が早い。普通にコンテンツと同じ感覚で表示されるおかげで閲覧者のストレスにならない。今日はこのスライダーの導入手順を紹介する。
道入のためにやること一覧
- Swiper公式サイトから「swiper.css」と「swiper.js」を入手
- 「swiper.css」と「swiper.js」をサーバーにアップロード
- functions.phpに「swiper.css」と「swiper.js」の呼び出しコードを記入
- Swiper本体のコードを任意の場所に記入
大まかに分けるとこれからやることはこんな感じだ。Swiperの動きを制御するファイルを入手してサーバーにFTP経由でアップロードしてから、それをfunctions.phpに呼び出しコードを書いて使える状態にする。あとは本体のコードを好きな場所に置くことでSwiperが動くようになる。
Swiper公式サイトから「swiper.css」と「swiper.js」を入手
Swiper公式サイトにアクセスしてから「Download」ボタンを押す。
取り敢えず一番新しいのをダウンロードしておけばいい。
回答すると「dist」フォルダがある。この中に「swiper.css」と「swiper.js」ファイルが入っているので、これをフォルダごとサーバーにアップロードする。
「swiper.css」と「swiper.js」をサーバーにアップロード
アップロード場所は今使っているテーマのphpファイルがある場所だ。俺の場合は「…wp-content/themes/affinger4-jet-child」フォルダにアップロードしている。
「swiper.css」と「swiper.js」にはサイズを小さくした「swiper.min.css」と「swiper.min.js」が同じフォルダに入っている。今回のやり方では「swiper.min.css」と「swiper.min.js」を使う。
functions.phpに「swiper.css」と「swiper.js」の呼び出しコードを記入
注意：functionc.phpをイジるときはバックアップを取るのを忘れないようにしましょう。ウェブページが表示されなくなります。
functions.phpの上から7行目くらいに下記の表記があると思うから、
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
その直下にswiper.min.cssの呼び出しコードを書く。「/diet/css/swiper.min.css」はサーバーにアップロードしたファイルのパスだから、違うところにアップロードしてる場合はそのパスを記入する。
|
1 2 3 4 5 |
//↓追加のcssを書き込む wp_enqueue_style( 'swipercss', get_stylesheet_directory_uri() . '/diet/css/swiper.min.css' ); wp_enqueue_script( 'jquery-heightLine', get_stylesheet_directory_uri() . '/js/jquery.heightLine.js', array( 'jquery' ) ); } |
次にfunctions.phpの一番下に「swiper.min.js」呼び出しコードを書く。これもファイルパスが違う場合は変更しておく。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* スクリプトの読み込み ---------------------------------------------------------- */ function register_script() { //読み込むJavaScriptを登録する wp_register_script( 'swiperjs', get_stylesheet_directory_uri() . 'diet/js/swiper.min.js', array(), '', true ); } function add_script() { //登録したJavaScriptを以下の順番で読み込む register_script(); wp_enqueue_script( 'swiperjs' ); } add_action( 'wp_enqueue_scripts', 'add_script' ); |
ここまでで準備が完了したので、ここからSwiperの本体データを設置する。
Swiper本体のコードを任意の場所に記入
下記のコードが本体になるから、記事なりウィジェットのカスタムHTMLなりの好きなところに貼り付けると動く。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!-- Link Swiper's CSS --> <!-- Demo styles --> <style> body {background: #fff;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color:#000;margin: 0;padding: 0; }<br /> .swiper-slide {background-position: center;background-size: cover;width: 100px;}</style> <!-- Swiper --> <div id="st-magazine" class="clearfix"> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <span style="color: #ff0000;"><div class="swiper-slide"><a href="https://2week.net/4809/"><img src="https://2week.net/wordpress/wp-content/uploads/2018/04/taitorud.jpg" alt="" width="900" height="506" class="alignnone size-full wp-image-8852" /> 【2018年版】生活が変わる！ガジェマガ式買ってよかったモノ17選</a></div> <div class="swiper-slide"><a href="https://2week.net/12618/"><img src="https://2week.net/wordpress/wp-content/uploads/resizer-1.jpg" alt="" width="735" height="425" class="alignnone size-full wp-image-12628" /> 【2万円】Lenovo S5/Xiaomi Redmi Note 5/P20 lite最強コスパスマホ3機種を徹底比較</a></div> <div class="swiper-slide"><a href="https://2week.net/11794/"><img src="https://2week.net/wordpress/wp-content/uploads/zenfone5toppushashin.jpg" alt="" width="900" height="646" class="alignnone size-full wp-image-11908" /> 【ZenFone5Zが2万円も安い！】中国版Amazonの「GEAR BEST」が要チェックや！！</a></div> <div class="swiper-slide"><a href="https://2week.net/10945/"><img src="https://2week.net/wordpress/wp-content/uploads/P1010560.jpg" alt="" width="900" height="599" class="alignnone size-full wp-image-10957" /> 逃げることには全力。ガジェマガ式自己紹介。</a></div> <div class="swiper-slide"><a href="https://2week.net/2923/"><img src="https://2week.net/wordpress/wp-content/uploads/2017/09/Collage_Fotor-1.jpg" alt="" width="900" height="675" class="alignnone size-full wp-image-7970" /> 【2018年版】一人暮らしを効率化するために買ってよかったおすすめグッズ13選</a></div> </div></span> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> </div> </div> <!-- Swiper JS --> <script src="../dist/js/swiper.min.js"></script> <!-- Initialize Swiper --> <script> var mySwiper = new Swiper ('.swiper-container', { loop: true, slidesPerView: 3, spaceBetween: 5, centeredSlides : false, autoplay: { delay: 2000, disableOnInteraction: false, }, pagination: '.swiper-pagination', breakpoints: { 767: { slidesPerView: 2, spaceBetween: 5 } } }) </script> |
本体コード解説
Sponcerd
本体コードの中のここが画像とかタイトル、リンク部分なので、内容を変更することで自分のウェブサイトに当てはめられる。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="swiper-slide"><a href="https://2week.net/4809/"><img src="https://2week.net/wordpress/wp-content/uploads/2018/04/taitorud.jpg" alt="" width="900" height="506" class="alignnone size-full wp-image-8852" /> 【2018年版】生活が変わる！ガジェマガ式買ってよかったモノ17選</a></div> <div class="swiper-slide"><a href="https://2week.net/12618/"><img src="https://2week.net/wordpress/wp-content/uploads/resizer-1.jpg" alt="" width="735" height="425" class="alignnone size-full wp-image-12628" /> 【2万円】Lenovo S5/Xiaomi Redmi Note 5/P20 lite最強コスパスマホ3機種を徹底比較</a></div> <div class="swiper-slide"><a href="https://2week.net/11794/"><img src="https://2week.net/wordpress/wp-content/uploads/zenfone5toppushashin.jpg" alt="" width="900" height="646" class="alignnone size-full wp-image-11908" /> 【ZenFone5Zが2万円も安い！】中国版Amazonの「GEAR BEST」が要チェックや！！</a></div> <div class="swiper-slide"><a href="https://2week.net/10945/"><img src="https://2week.net/wordpress/wp-content/uploads/P1010560.jpg" alt="" width="900" height="599" class="alignnone size-full wp-image-10957" /> 逃げることには全力。ガジェマガ式自己紹介。</a></div> <div class="swiper-slide"><a href="https://2week.net/2923/"><img src="https://2week.net/wordpress/wp-content/uploads/2017/09/Collage_Fotor-1.jpg" alt="" width="900" height="675" class="alignnone size-full wp-image-7970" /> 【2018年版】一人暮らしを効率化するために買ってよかったおすすめグッズ13選</a></div> </div> |
本体コードの中のここでスライダーの動きを制御している。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> var mySwiper = new Swiper ('.swiper-container', { loop: true, slidesPerView: 3, spaceBetween: 5, centeredSlides : false, autoplay: { delay: 2000, disableOnInteraction: false, }, pagination: '.swiper-pagination', breakpoints: { 767: { slidesPerView: 2, spaceBetween: 5 } } }) </script> |
- loop: true, 回転する
- slidesPerView: 3, 画面内のスライド表示数3枚
- spaceBetween: 5, スライドの間の隙間（px）
- centeredSlides : false, メインスライドを中心に表示するか左に寄せるか
- autoplay: 自動再生
- delay: 2000, 2秒ごとにスライドを動作
- disableOnInteraction: false, ユーザーが触れても自動再生を停止しない
- breakpoints: { 767 767px以内の場合は以下に変更
- slidesPerView: 2, 画面内のスライドの表示数2枚
- spaceBetween: 5 スライドの間の隙間（px）
最後にスタイルシートで少し微調整して終わり。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@media only screen and (max-width: 600px){ .swiper-container { margin: 0px 0px!important; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; max-width: 100%; width: 100%; } } |
まとめ
俺もよく理解していない状態で手探りで進めてなんとか動くようになった程度だ。コードの内容とかには無駄がたくさんあると思うんだけど、初心者向けに解説してるサイトが全然なくて道入に超苦戦したから、初心者でも導入できる感じで解説した。
Swiperはいくらでも調整できる自由度が売りで、出来ることが多すぎるから逆にどこから手を付けていいのかわからない。というかどういう項目を追加したらどうなるのかが全然わからないから苦戦する。
Swiperの公式サイトにはdemoっていうページにたくさんのスライダーデモと一緒にコードが表示されているから、気に入ったスライダーがあればそのコードを試行錯誤しながら足したり引いたりして欲しい。カルーセルスライダーだって作れる。
そうすることで理想とするスライダーが出来上がるはずだ。検討を祈る。
