投稿日:2018年9月11日  更新日:

【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

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

Amazonチャージ

Amazonで買い物するなら、Amazonチャージを利用しよう!

チャージごとに、プライム会員なら最大2.5%Amazonポイントが貯まる!

クレジットカードがなくてもOK! Amazonギフト券チャージでお得にお買い物しよう!

さっそくチャージする

  • この記事を書いた人

りょうま

WEBエンジニア/フリーランス5期目/大阪府北摂在住🏠長野県諏訪市出身🎣webデザインやフロントエンド技術の情報を中心に、人生をカスタマイズして楽しく過ごすための情報を発信中📢WPテーマはAFFINGER5です。

-Jquery / Javascript, Wordpressカスタマイズ
-, ,

Copyright© ヤッテモータース , 2019 All Rights Reserved.