: AFFINGER導入から1年5か月のPV・収益推移【ブログで独立】

ブログで稼ぐならワードプレスを使った方が良い、ワードプレスで稼ぐなら有料テーマを使った方が良いという話は聞いたことがある人も多いと思う。俺もその話を鵜呑みにしてワードプレスの有料テーマAFFINGE ...

続きを見る

【コピペでOK】非jQueryの超軽量レスポンシブ対応スライダー「Swiper」の導入手順

2018年8月11日 2019年2月10日

スライダーを道入したいと考え続けていていろんなプラグインのスライダーを導入してみたんだけど、プラグインでのスライダーはとにかく重い。一度はスライダーの道入を諦めたんだけど、遂に超軽量スライダー「Swiper」の道入に成功したから、その導入手順を解説したい。

トーマスです。ツイッターとYoutubeもやってます。お問い合わせはこちら。

この記事の目次（クリックでジャンプ）

Swiperは非jQueryだから軽い

書いてる俺がよくわかってないんだけど、ワードプレスのスライダープラグインはjQueryが使われているから重い。たくさんのワードプレスプラグイン製スライダーを入れたけど、どれも表示が1テンポ遅れて使い物にならなかった。これは脱プラグインを図るしか無いと決意して発見したのが「Swiper」だ。

軽いしレスポンシブ対応

Swiperは軽いクセにレスポンシブ対応もしていて、スマホでもパソコンでもキレイに表示される。しかもオプション（微調整）の項目が把握できないくらい多い。実際に今ここに表示されているスライダーがそれなんだけど、とにかく表示が早い。

【2018年版】生活が変わる！ガジェマガ式買ってよかったモノ17選

【2万円】Lenovo S5/Xiaomi Redmi Note 5/P20 lite最強コスパスマホ3機種を徹底比較

【ZenFone5Zが2万円も安い！】中国版Amazonの「GEAR BEST」が要チェックや！！

逃げることには全力。ガジェマガ式自己紹介。

【2018年版】一人暮らしを効率化するために買ってよかったおすすめグッズ13選

実際に今ここに表示されているスライダーがそれなんだけど、とにかく表示が早い。普通にコンテンツと同じ感覚で表示されるおかげで閲覧者のストレスにならない。今日はこのスライダーの導入手順を紹介する。

道入のためにやること一覧

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」はサーバーにアップロードしたファイルのパスだから、違うところにアップロードしてる場合はそのパスを記入する。

//↓追加の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' ) );
}

//↓追加の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」呼び出しコードを書く。これもファイルパスが違う場合は変更しておく。

/* スクリプトの読み込み
---------------------------------------------------------- */
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' );

/* スクリプトの読み込み

---------------------------------------------------------- */

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なりの好きなところに貼り付けると動く。

【2018年版】生活が変わる！ガジェマガ式買ってよかったモノ17選

【2万円】Lenovo S5/Xiaomi Redmi Note 5/P20 lite最強コスパスマホ3機種を徹底比較

【ZenFone5Zが2万円も安い！】中国版Amazonの「GEAR BEST」が要チェックや！！

逃げることには全力。ガジェマガ式自己紹介。

【2018年版】一人暮らしを効率化するために買ってよかったおすすめグッズ13選

<!-- 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>

&nbsp;

<!-- 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>

<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>

【2018年版】生活が変わる！ガジェマガ式買ってよかったモノ17選</a></div>

【2万円】Lenovo S5/Xiaomi Redmi Note 5/P20 lite最強コスパスマホ3機種を徹底比較</a></div>

【ZenFone5Zが2万円も安い！】中国版Amazonの「GEAR BEST」が要チェックや！！</a></div>

逃げることには全力。ガジェマガ式自己紹介。</a></div>

【2018年版】一人暮らしを効率化するために買ってよかったおすすめグッズ13選</a></div>

</div></span>

</div>

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

本体コードの中のここが画像とかタイトル、リンク部分なので、内容を変更することで自分のウェブサイトに当てはめられる。

<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>

【2018年版】生活が変わる！ガジェマガ式買ってよかったモノ17選</a></div>

【2万円】Lenovo S5/Xiaomi Redmi Note 5/P20 lite最強コスパスマホ3機種を徹底比較</a></div>

【ZenFone5Zが2万円も安い！】中国版Amazonの「GEAR BEST」が要チェックや！！</a></div>

逃げることには全力。ガジェマガ式自己紹介。</a></div>

【2018年版】一人暮らしを効率化するために買ってよかったおすすめグッズ13選</a></div>

</div>

本体コードの中のここでスライダーの動きを制御している。

<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>

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）

最後にスタイルシートで少し微調整して終わり。

@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%;
	}
}

@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っていうページにたくさんのスライダーデモと一緒にコードが表示されているから、気に入ったスライダーがあればそのコードを試行錯誤しながら足したり引いたりして欲しい。カルーセルスライダーだって作れる。

そうすることで理想とするスライダーが出来上がるはずだ。検討を祈る。

: AFFINGER導入から1年5か月のPV・収益推移【ブログで独立】

ブログで稼ぐならワードプレスを使った方が良い、ワードプレスで稼ぐなら有料テーマを使った方が良いという話は聞いたことがある人も多いと思う。俺もその話を鵜呑みにしてワードプレスの有料テーマAFFINGE ...

続きを見る

まとめライフハック

2019/11/17

【2019年版】生活が変わるガジェマガ式買ってよかったもの17選

いよいよ一人暮らしも5年目に突入しようとしていて、欲しいモノは一通り買ってしまった。これからも物欲は尽きることないだろうし、ガジェットに限らず様々な物を購入することになると思うけど、今後は足りないものを補うというより、今あるものをグレードアップする買い物が主流になると思う。そんな満たされた生活の中でも、俺基準俺調べの買ってよかった商品を、生活に与えたインパクト順にランキング形式でを紹介したい。正直もっと早く買っておけば良かったと思うものばかりなので、まだ持っていないものがあれば急いで購入してほしい。 1 ...

カメラスマホ・タブレットパソコン・周辺機器まとめ

2019/9/11

【2019年版】ガジェットブロガーの仕事道具まとめ【現状と不満】

今月頭に独立してからというもの外出する機会がめっきり減ってしまって毎日家でブログを書く生活が続いている。人と喋らないとやばいなとは思いつつ毎月ガジェットに10万円を仕事として費やして、自分の好きなものに囲まれながら生活できていることに幸せを感じている。今回はせっかく独立もしたことだし、俺が普段仕事に使っている道具と、その道具に関するリアルな感想をまとめたい。ガジェットの購入が仕事元々趣味で購入したガジェットの紹介から始まったのがガジェマガなんだけど、今月頭に独立してからはそれが仕事になった。とはい ...

ダイエット・健康・美容

2019/11/8

【高すぎ】ゴリラクリニックのヒゲ脱毛で30万円提示された話【評判・口コミ】

髭いらねーって思って髭の永久脱毛に手を出そうとしたんだけど、ゴリラ脱毛が想像以上に高くて、ネットでの値段の記載方法が悪質だと感じたので今日はその件を書きたい。毎日髭剃るのめんどくさいみんなもそうだと思うけど、朝起きて仕事行くまでの時間は戦争だ。なぜなら俺はなるべく寝ていたい！むしろ起きたくない！でも社会人なので流石に会社に遅刻するわけにもいかず、毎日生きるためにゾンビ顔負けの死んだ表情で通勤しているのが実情だ。そんな社会人にとって朝の時間は貴重だ。歯を磨いて顔を洗って髭そって朝ごはんを食べて着替えて ...

スマホ・タブレットレビュー

2019/10/21

【UMIDIGI S3 Pro実機レビュー】色々ダメ。次回作に期待

激安スマホで話題の中国の新興企業UMIDIGIから同社のハイエンドモデルであるUMIDIGI S3 Proを提供してもらったから詳細にレビューしたい。UMIDIGIといえば1万円台でまともに使えるのが売りなんだけど、UMIDIGI S3 Proに関しては実売価格33,333円と同社のスマホの中で最も高い。UMIDIGI S3 ProがUMIDIGIにとって脱激安スマホの布石となるのかその詳細を見ていきたい。 UMIDIGI S3 Proの特長まず最初にUMIDIGI S3 Proの特長をまとめる 33, ...

スマホ・タブレットまとめ格安SIM