WordPress有料テーマの「Affinger5 WING」には画像スライダー系JSで有名な「slick.js」が最初から同梱されています。
これを使ってトップページの新着記事をスライダーにしたり、おすすめ記事をスライダーにして設置することもできます。
ツールの紹介
◆Affinger5 WINGとは
◆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
qiitaにも投稿しています！
https://qiita.com/katsunory/items/25b385aae0f07b41e61
