dedede slick.jsを使ってSnow Monkey上で自動再生の動画スライダーを作る[スマホ対応!]
背景・制作物
WordPressのプラグインで動画スライダーを使おうとすると有料のものが多く良さそうなものがありませんでした。しかも実装したい機能が”自動再生”×”スライダー” だったので、調べてもあまりなさそうだったので備忘録として残します。
まずは実際の制作物はこちらです。テーマは毎度おなじみsnow monkey(スノーモンキー）です。スマホにも対応しております。(他サイトで実装したものを動画にしております。)
作成手順
- テーマ：snow monkey
- 必要プラグイン: my-snow-monkey(子テーマ編集のように使うために必須。詳しくはこちら)
作成するために使ったのは,jQueryスライダー系プラグイン(ワードプレスのプラグインとは別物)のslickです。こちらを使って実装しました。大まかな流れは以下です。
①slick.jsのダウンロード
ここからslickをダウンロードしてください。少し分かりにくいのですが、get it now を押してDownload Now を押すとダウンロードできます。slick1.8.1/slickのフォルダがあるので、このslickフォルダをコピーして、使用したいワードプレスに移動します。移動先はmy-snow-monkeyプラグインの中で、
ファイル構成を以下のように設定してください。(assetsフォルダがない場合は作ってください。)
my-snow-monkey/assets/slick
②myslick.jsの作成
slickスライダーの設定をするためのscriptを設定します。slick.jsに追記してもいいのですが、できるだけデフォルトのファイルは触りたくないので別で作っています。記載内容としてはスライダの詳細設定を書いているだけです。このファイルで、スライド時間や、ドットの有無を指定します。
my-snow-monkey/assets/slick/myslick.js
jQuery('.slider').slick({
autoplay: true, //自動スライド
autoplaySpeed: 2000, //スライドさせる間隔 [ms]
dots:true,//ドットインジケーターを表示
infinite:true,
speed: 800,//スライドの消えてから次に移行するまでの時間 [ms]
fade: true,
cssEase: 'linear',
lazyLoad: "progressive", //画像の遅延読み込み
arrows: true, //スライドの左右の矢印ボタンを非表示
ssEase: "cubic-bezier(0.9, 0.03, 0.4, 0.9)" //CSS3アニメーションイージングを設定
});
③my-snow-monkey.phpの編集
ここが一番ハマったところです。フックを使い上記で作ったファイルを読みこんでいきます。
とりあえずは以下のコードをmy-snow-monkey.phpにコピペして追加すれば良いです。既にあるコードは消さないように気をつけてください。なお私はstyle.cssもこちらで管理しているので、そのcssファイルを読み込む記述もしています。詳しくはこちら。
設定できたら、プラグインはWP管理画面から忘れず有効化しておきましょう。やっていることを説明すると以下のようにファイルを読み込んでいるだけです。
- （任意)style.cssの読み込み
- slick.cssの読み込み
- slick-theme.cssの読み込み
- slick.min.jsの読み込み
add_action(
'wp_enqueue_scripts',
function () {
wp_enqueue_style(
'my-snow-monkey',
MY_SNOW_MONKEY_URL . '/style.css',
[Framework\Helper::get_main_style_handle()],
filemtime(plugin_dir_path(__FILE__))
);
wp_enqueue_style(
'slickcss',
MY_SNOW_MONKEY_URL . '/assets/slick/slick.css',
[Framework\Helper::get_main_style_handle()],
filemtime(plugin_dir_path(__FILE__))
);
// wp_enqueue_style( //slick-thems.cssも読み込み推奨だが、挙動がおかしくなったので省略
// 'slick-theme',
// MY_SNOW_MONKEY_URL . '/js/slick-theme.css',
// [Framework\Helper::get_main_style_handle()],
// filemtime(plugin_dir_path(__FILE__))
// );
wp_enqueue_script(
'slick',
MY_SNOW_MONKEY_URL . '/assets/slick/slick.min.js',
['jquery'],//jqueryの後に読み込むことを明示
false,//ver管理の
false//falseでheader前に読み込む必要あり
);
wp_enqueue_script(
'myslick',
MY_SNOW_MONKEY_URL . '/assets/slick/myslick.js',
[],
false,
true//trueでfooter付近で読み込む
);
}
);④固定ページにカスタムhtmlの記載
ここからはワードプレスの管理画面からの設定になります。まずは普通にメディアの追加から入れたい動画を追加してください。この時、“ファイルのURL”をコピペして記録しておいてください。
（注意点としては、音声のある動画を自動再生することはできません。
音声のある動画を使うことはできますが、次のhtmlでミュートに設定するので音は流れません。ブラウザの仕様です）
そのあと、スライダーを使いたいページを編集で開いてください(固定ページまたは投稿記事のことです)。
そしてブロックの追加でカスタムHTMLを導入します。
そこに以下のコードを入れればOKです。src属性のurlは先程コピペしておいた動画固有のURLに置き換えてください(下記のhogehoge.mp4の箇所)。なお、例では3つの動画ですが、必要に応じて何個でも追加できます。
*playsinline=””がないとスマホで自動再生されなくなるので気をつけてください。
<ul class="slider">
<li><a href="#"><video src="hogehoge.mp4" controls="" muted="" autoplay="" playsinline="" loop=""></video></a></li>
<li><a href="#"><video src="hogehoge2.mp4" controls="" muted="" autoplay="" playsinline="" loop=""></video></a></li>
<li><a href="#"><video src="hogehoge3.mp4" controls="" muted="" autoplay="" playsinline="" loop=""></video></a></li>
</ul>補足_スライダードットの微調整
私の場合、スライダーのドット等の位置がおかしくなってしまいましたので、cssで微調整しました。
参考までに私が書いたcssを記しておきます。
.slick-arrow{
z-index:100;
}
.slick-prev{
left:20px;
}
.slick-next{
right:20px;
}
.slick-dots{
position:relative;
padding:20px;
}
