Jquery / Javascript

【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

qiitaにも投稿しています!
https://qiita.com/katsunory/items/25b385aae0f07b41e61

POSTED COMMENT

  1. yosuke より:

    はじめまして。
    まさに投稿記事をSlickスライダーで使いたかったのでとてもありがたい情報でした。

COMMENT

メールアドレスが公開されることはありません。