Slick.jsを使用してみた
もう、真夏になってしまいましたが、5月に受注した案件に、カクカク動くカルーセルではなく
滑らかに動くカルーセルで画像を動かしたい！という要望があり、
Elementorのカルーセル。カルーセルのプラグイン。探してもなかなかなくて、Slick.jsというJavaScriptに行きつきました。
行きついたものの、WordPressに実装するのはどうするの？
あちこちググり、やっと行きつきました。長く時間がかかった（2週間ほど）
また、同じような要望がクライアント様からあった時のために、備忘録つけておきます。
ホントに大変でした！（自分の技術が未熟だからと言われれば、それまで）
子テーマが必要です。
・header.php
・footer.phpにコードを追加します。
また、カルーセルで流す画像は縦のサイズは揃えておく必要があります。PhotoShopなど画像処理ソフトで編集しておきます。
で、この作業。いつも使用している、Lightning-PROだとうまくいかず、Astraだとうまくいきました。
他の、jsファイルについてLightning-PROのフォーラム内に、容易にテーマエディタでの変更はできない仕様になっている旨が記載されていました。
残念ながら、Lightning-PROでは実装できない・・・ということなのでしょうね。
それでも、Astraでの手順を記載します。
手順は、
- slick.jsファイルをWeb上からダウンロード
- ダウンロードしたファイルを、表示したいWordPressの入っているサーバーへ、テーマディレクトリ（＝自分が使用しているテーマ内）にアップロードします。（フォルダーアップロードだったので、FFFTPを使用）
- jsファイル読み込みをするために、header.phpへ記述します。（ここはパス名を間違えないように）手本通りにコピペだと、まったく動きません。どこに置いてある、Slick.jsを読み込みに行くのかを、意識してください。
/**
* <head>タグ内に自分の追加したいタグを追加する
*/
function add_wp_head_custom() {
?>
<!-- head内に書きたいコード 開始 -->
<!-- slick -->
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/assets/js/slick-1.8.1/slick/slick.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/assets/js/slick-1.8.1/slick/slick-theme.css" media="screen" />
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/slick-1.8.1/slick/slick.min.js"></script>
<!-- head内に書きたいコード 終了 -->
<?php
}
add_action( 'wp_head', 'add_wp_head_custom', 1 );
4.footer.phpの /body タグの直前に、slick.jsのコードをコピーします。
全部ではなく、必要なカルーセルのタイプのものだけです。
/**
* <body>タグ内下部に自分の追加したいタグを追加する
*/
function add_wp_footer_custom() {
?>
<!-- footerに書きたいコード 開始 -->
<!-- slick js -->
<script>
jQuery(function($) {
$('.smooth').slick({
autoplay: true,
slidesToShow: 6,
slidesToScroll: 1,
autoplaySpeed: 0,
cssEase: 'linear',
speed: 5000,
prevArrow: false,
nextArrow: false,
responsive: [
{
breakpoint: 640,
settings: {
autoplay: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplaySpeed: 0,
cssEase: 'linear',
speed: 5000,
prevArrow: false,
nextArrow: false,
}
},
{
breakpoint: 480,
settings: {
autoplay: true,
slidesToShow: 2,
slidesToScroll: 1,
autoplaySpeed: 0,
cssEase: 'linear',
speed: 5000,
prevArrow: false,
nextArrow: false,
}
}
]
});
});
</script>
<!-- /slick js -->
<!-- footerに書きたいコード 終了 -->
5.あとは、スライダー画像を表示したいページで画像のリンクの設定を入れます。
<div class="slider">
<div><img src="/wp-content/uploads/2019/01/shock_woman.png"></div>
<div><img src="/wp-content/uploads/2019/02/numa_hamaru_woman.png"></div>
<div><img src="/wp-content/uploads/2019/12/hospital_nyuin_syokuji.png"></div>
<div><img src="/wp-content/uploads/2019/12/sick_douki.png"></div>
</div>
参考にしたサイトは↓
とてもわかりやすく、説明してくれてます。
[blogcard url="https://cree.fun/2982/"]
header部分への記述
/**
* <head>タグ内に自分の追加したいタグを追加する
*/
function add_wp_head_custom() {
?>
<!-- head内に書きたいコード 開始 -->
<!-- slick -->
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/assets/js/slick-1.8.1/slick/slick.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/assets/js/slick-1.8.1/slick/slick-theme.css" media="screen" />
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/slick-1.8.1/slick/slick.min.js"></script>
<!-- head内に書きたいコード 終了 -->
<?php
}
add_action( 'wp_head', 'add_wp_head_custom', 1 );
お問い合わせはこちらから
携帯やスマフォのキャリアメールの場合は、受信設定の変更をお願い申し上げます。
