Edited at

【Wordpress】Affinger5 WINGでslick.jsを使ってトップページの記事スライダーを作る

Wordpress有料テーマの「Affinger5 WING」には

画像スライダー系JSで有名な「slick.js」が最初から同梱されています。

これを使ってトップページの新着記事をスライダーにしたり、

おすすめ記事をスライダーにして設置することもできます。

 

 -----------------

◆Affinger5 WINGとは

 -----------------

http://the-money.net/

 -----------------

◆slick.jsとは

 -----------------

http://kenwheeler.github.io/slick/


新着記事をスライダーにする場合

トップページの記事一覧だけに適応したいので、

home.phpにスライダーを動かすJavascriptを記述します。

$(function() {

$('aside .kanren').slick({ //記事一覧を包括している親要素
infinite: true, //無限スクロール
speed: 500, //スライドスピード
fade: true, //フェードインさせる
autoplay: true, //自動でスライド
});
});


おすすめ記事をスライダーにする場合

<事前準備>


  • Affinger5管理で「トップの最上部表示にする」にチェックを入れます。

  • 任意の人気記事を指定(投稿又は固定記事ID)に表示したい記事IDを入れます。

スクリーンショット 2018-09-11 14.25.59.png

トップページの最上部に固定表示の設定をしたあと、

おすすめ記事をコントロールするpopular-thumbnail-on.phpにスライダーを動かす

Javascriptを記述します。

$(function() {

$('.kanren.pop-box').slick({ //おすすめ記事を包括している親要素
infinite: true, //無限スクロール
speed: 500, //スライドスピード
fade: true, //フェードインさせる
autoplay: true, //自動でスライド
});
});

以上を設定後ブラウジングすると記事要素がスライダーになっていると思います。

あとはサイトのトンマナに合わせてCSSを調整してください。

slickスライダーには設定できるオプションがたくさんあります。

オプションの設定方法は下記をご参考に設定してみてください。

https://qiita.com/katsunory/items/25b385aae0f07b41e611