スライダー(slick活用)

function.phpへ以下の設定を行う

358行目~377行目のコメントアウトを削除して、各JS・CSSファイルを読み込んで下さい。

slickの構成ファイルはCDNから引っ張ってきてるので、テーマファイル内(自サーバー内)にはありません。
必要に応じて設置し直して下さい。

STEP
1

グリッドカラムブロックや、投稿リストブロックを配置する。

親要素の中に共通の子要素が複数個並ぶようなDOMなら、なんでも大丈夫です。

今回は最新ニュースをslickスライダーにしてみます。

その際にClass名を何かしら設定して下さい。

STEP
2

my_slider.jsにてslickの宣言設定を行う

2で決めた .my_slider を13行目に入力するのをお忘れなく!

STEP
3

完了

とりあえず、これで動きます。

配置やサイズ、ボタンなどの装飾はcssで行って下さい。

STEP
4

使用例

お知らせ
ホームページが完成しました。
原田
スライダー(slick活用)
原田
カラムの左右(上下)をレスポンシブで入れ替える
原田
メールフォームの「ファイルを選択」の文字列を変える方法
原田
VKブロックのみを用いたいろいろなニュースフィードのサンプル
原田
ページ内リンクでの、スムーススクロールとページヘッダー分相殺
原田
ダミー画像をダミーと明記する
原田
リンクボタンのクリック領域を広げる
原田
VKフローに、自動で連番を打つ
原田
VKブロック横並びユーティリティ

このサンプルページではファイルをwp_contents内で読み込んでます。

通常はheader内で正しく読み込むので試してみて下さい。

補足事項

標準データでは、すぐ使えるようにした上で、無駄な外部ファイルの読み込みリクエストを行わないようにコメントアウトしています。
案件ごとに必要に応じて動かして下さい。

slickの使い方は色んな人が解説しているので、詳しいことはおまかせします。
多分デザイナーさんでも勝手にやってくれます。