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

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

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

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

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

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

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

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

1.スライダーの準備

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

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

Swiper Demos

レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」 | will STYLE Inc.|神戸にあるウェブ制作会社
こんにちは、デザイナーの奥田です。最近フロントエンドでは「脱jQuery」なんて言われていますね。まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。さて、今回は「もう最...

ここを参考に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年やってきて感じることは、先生や師匠がいる環境が大事ってこと。
アフィリエイトのノウハウも大事だけど、心の支えになってくれる友人たち、先生、師匠の存在はとても大切です。

僕の場合、友人にアフィリエイト塾AMCを紹介してもらい今は無料会員として、たまに各地セミナーに遊びにいって交流しています。

トレーニングジムと同じでジムに1人で行く人は意外と続かない。しかし仲間と行くと継続率が高くなります。アフィリエイトも仲間が増えるとアフィリエイトを辞めてしまうことはほぼなくなるでしょう。

続ければ必ず成果が出るアフィリ。僕のおすすめアフィリエイト塾は、AMCです。
もしAMCに申し込みされた方がいらっしゃったら、AMCのSNSで「がんちゃん」で日記書いていますのでご一報ください。
色んなご相談にお答えいたします。

→ アフィリエイト塾AMC申込み

シェアしてくれるとチョーうれしいです!

フォローする