【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を入れます。

トップページの最上部に固定表示の設定をしたあと、
おすすめ記事をコントロールする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