WordPressにslick.jsを適用
seatree前提
| 項目 | 内容 | 説明 |
|---|---|---|
| テーマ | Lightning | |
| slick | https://kenwheeler.github.io/slick/ | |
| 表示用画像 | 事前にメディアライブライブラリに登録しておく。 |
slickモジュールの配置
公式サイトからモジュールDLし、wordpressにuploadする。
~/themes/lightningの直下
slickのstyle設定
slick.min.jsへのパスを通す。
<!-------- 以下追加 -------->
<!-- slick CSS -->
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/slick/slick.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/slick/slick-theme.css" media="screen" />
<style>
.slider {
height: 53vw;
margin-left: auto;
margin-right: auto;
overflow: hidden; /* 画像がはみ出ないようにする */
width: 80vw;
}
.slick-img img {
width: 100%;
}
@keyframes fadezoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1); /* 拡大率 */
}
}
.add-animation {
animation: fadezoom 5s 0s forwards;
}
</style>
<!-- /slick CSS -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- /jQuery -->slickの初期化用scriptの設定
<?php wp_footer(); ?>
<!-------- 以下追加 -------->
<!-- slick js -->
<script src="<?php echo get_stylesheet_directory_uri(); ?>/slick/slick.min.js"></script>
<!-- /slick js -->
<script>
$(function () {
$(".slider")
// 最初のスライドに"add-animation"のclassを付ける(data-slick-index="0"が最初のスライドを指す)
.on("init", function () {
$('.slick-slide[data-slick-index="0"]').addClass("add-animation");
})
// 通常のオプション
.slick({
autoplay: true, // 自動再生ON
fade: true, // フェードON
arrows: false, // 矢印OFF
speed: 1000, // スライド、フェードアニメーションの速度1000ミリ秒
autoplaySpeed: 3000, // 自動再生速度3000ミリ秒
pauseOnFocus: false, // フォーカスで一時停止OFF
pauseOnHover: false, // マウスホバーで一時停止OFF
})
.on({
// スライドが移動する前に発生するイベント
beforeChange: function (event, slick, currentSlide, nextSlide) {
// 表示されているスライドに"add-animation"のclassをつける
$(".slick-slide", this).eq(nextSlide).addClass("add-animation");
// あとで"add-animation"のclassを消すための"remove-animation"classを付ける
$(".slick-slide", this).eq(currentSlide).addClass("remove-animation");
},
// スライドが移動した後に発生するイベント
afterChange: function () {
// 表示していないスライドはアニメーションのclassを外す
$(".remove-animation", this).removeClass(
"remove-animation add-animation"
);
},
});
});
</script>画面へ表示する画像の設定
~/_g3/slick_image.php（新規作成）
<?php
$url = get_site_url();
?>
<!-------- 以下表示する分の画像を設定 -------->
<div class="slider">
<div class="slick-img">
<img src=" <?php echo $url ?>/wp-content/uploads/~~~.png" >
</div>
<div class="slick-img">
<img src=" <?php echo $url ?>/wp-content/uploads/~~~.png" >
</div>
<div class="slick-img">
<img src=" <?php echo $url ?>/wp-content/uploads/~~~.png" >
</div>
<div class="slick-img">
<img src=" <?php echo $url ?>/wp-content/uploads/~~~.png" >
</div>
</div>後述
今思えば、ここはわざわざPHPで組まなくても、任意の箇所で、カスタムHTMLで↑のHTMLを貼れば良いだけでした。
Topページに、slick_image.phpを読み込ませる
<?php
if ( is_front_page() ) {
<!-------- 追加 - START -------->
lightning_get_template_part( 'slick-image' );
<!-------- 追加 - END -------->
if ( apply_filters( 'lightning_default_slide_display', true ) ) {
LTG_G3_Slider::display_html();
}
}
?>
