WordPress

Polular post+Swiperで、人気記事をカルーセルスライダーでかっこよく見せる方法

こんばんは〜 今日はしっぽりと赤ワイン(シャトーCITRAN2009)を飲みつつ、落花生をパチパチと割りながら作業してます。

なめらかなタンニン、あふれる果実味が魅力です(引用w

と言いながら、石田純一バリの鈍感な舌を持っていますので1000円ワインと1万円オーバーのワインの違いがわかりません。

 

さて、今日は久しぶりにワードプレスネタを。

カルーセルスライダー(スマホとかでフリックしてスライドさせるやつ)で、popularpostの人気記事を表示させたいなと思っています。

リストを横に3つくらい表示させるってのはあったけど、カルーセルスライダーでかっこよく見せたいんです。

なのでこの記事を書きながら作業を進めていこうと思います。出来なかったらすみません。

1.スライダーの準備

Swiperという超軽量なスライダーがあるそうなので、それを使います。

DEMOとソースコードはここにあります。

http://idangero.us/swiper/demos/#.WVO00BOLQdU

 

https://www.willstyle.co.jp/blog/724/

ここを参考にCSS(CDN)とJSをサイト内にペタッとします。

WordPressのテーマ編集でheader.phpのheadタグの中にCSS、あとはfooter.phpにJS入れとこ。

JSのコードはこちら。body終了タグの直前に貼っとくといいです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 30
    });
    </script>

 

2.スライダー動くかな

次のコードが動くかチェックしてみます。

    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

 

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10

 

3.画像いれてみる。

 

がんちゃん

いい感じですね。 スライダーは、プラグインで入れちゃうと色んな読み込みが増えるので極力簡単な機能は自作したほうがいいかも。

4.popular postを調べる。

さて、ここまで10分くらいですw 超楽勝じゃないですか。 あとはpopular postの関数を使ってオリジナルのショートコードを作ろうと思います。 特に難しいことはなさそうですがはたして。。 参考にしたサイトはこちら。 http://room9.jp/2014/04/17/070000/ ここで、問題発生。カルーセルのタグの中に1位から順に入れ込む作業をしたいけど、1位とか指定してショートコードで吐き出すとかが出来ない。 ということで、逆にpopular postのショートコードのほうにカルーセルのタグを入れ込む方向に転換します。 つまりこんなこと。

<!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">

           ここの1行のタグだけをpopular post側で付ければいいんじゃない?
            <div class="swiper-slide">Slide 1</div>

        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

popular postのショートコードでタグを追加する引数があるか調べます。

あ〜 ありましたありました。

wpp_start とwpp_end です。画像ごとのタグをここで指定してあげればいいだけ。

なので、こんなショートコードを書いてみます。


人気記事ランキング

 

人気記事ランキング

 

 

あら。違ったw なんか全体のタグを指定するだけみたいでした。それなら、カルーセルの外側のタグをこっちに指定しときますか。

post_html

各要素を指定するのは、こっちの引数でした。

もう一度やり直し。

 


人気記事ランキング

 

人気記事ランキング

 

お。出来ました〜。パチパチ〜♪ CSSレイアウトは自分で勝手にやっちゃってください。

人気記事をカルーセルスライダーにするってネットになかったので作りましたが結構需要あるんじゃないかと思います。

 

てことで、人気記事をカルーセルスライダーで表現することが可能になりました。ショートコードなので、記事のどこにでも挿入可能。しかもカテゴリIDを指定してそのカテゴリのカルーセルなんてことも出来ます。

 

僕はこれで、特集記事というカテゴリを作って特集記事カルーセルを設置しようと思います。

さて、今から自分のアフィリエイトサイトで設置です。

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

イチオシ記事

  1. アフィリエイト

最近の記事 おすすめ記事
  1. インフィード広告を入れる
  2. タイトルがなっとらん!
  3. アフィリエイト防災
  4. 長期トレンド
  1. アフィリエイト防災
  2. 長期トレンド
  3. アフィリエイトのキーワード選び
PAGE TOP