こんにちは、じゅんぺーです。
先日こんなツイートをしました。
僕の予想を超える多くの方々から興味を持って頂き、その中でも特に「スライダーの実装方法」が気になると言う声を複数頂きました。
スライダーだけの実装方法について知りたい方も多いと思うのでスライダーの実装方法は別記事にて執筆いたします。
SnowMonkeyで標準以外のスライダーを実装するには、「プラグイン」もしくは「ライブラリ」などを使用する必要があります。
「プラグイン」を使用する場合は、簡単に実装できる反面、カスタマイズに制限があります。
お客様のホームページを作成する際に「プラグイン」だけで実装できるデザインであれば問題ないですが、様々な要望に答えられるように今回は「Swiper.js」を使用したスライダーを作成していきます。
最後までみると、自分なりのカスタマイズもできるようになっていると思います！
それでは早速作成していきましょう！
作成するスライダーの確認
今回作成するスライダーは「SnowMonkey」に「Swiper.js」と言われるライブラリを読み込んで使用しています。
今回使用する「Swiper.js」はJavaScriptのライブラリで、スライダーを簡単に実装できる機能を持っています。
「Swiper.js」ではレスポンシブやスライドのスピード、アローの有無などたくさんの設定ができるライブラリです。
使いこなすとかなり便利なので、是非この機会に使い方をマスターしましょう！
それでは早速スライダーの制作に取り掛かりましょう！
「SnowMonkey」に「Swiper.js」を導入しよう
ホームページをみていると多くのサイトにスライダーが導入されていますが、「Swiper.js」もしくは「slick.js」のライブラリが非常に多く使用されています。
今回は「Swiper.js」を使用して、SnowMonkeyのスライダーをリッチにカスタマイズする方法を解説していきます！
「my-snow-monkey.php」に「Swiper.js」を読み込ませよう！
「swiper.js」を使用するには、環境を整える必要があるので「my-snow-monkey.php」子テーマをお使いの方は「functions.php」にコードをコピペしましょう。
my-snow-monkeyの雛形をダウンロードされていない方は【実績掲載OK】Snow Monkeyカスタマイズ講座【中級編】で配布しているので、よければダウンロードして使用してみてくださいね！
それでは「my-snow-monkey.php」の/* ここにswiper.css */と記述がある下に下記コードを挿入してください。
子テーマを使用している方も同様に記述しているので、下記コードを挿入してください。
/* swiper.css読み込み */
wp_enqueue_style(
'swiper_css',
'https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css'
);次に/* ここにswiper.js */と記述がある下に下記コードを挿入していきましょう。
/* swiper.js読み込み */
wp_enqueue_script(
'swiper_js',
'https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js'
);
コードがコピペできたら「swiper.js」を使用できる環境になりました！
フックを使ってフロントページ上部にコードを表示させよう
「SnowMonkey」にはとても多くの「フック」が仕掛けられているので、さまざまな場所にコードを記述できたり、機能の拡張が可能になっています。
今回は、「snow_monkey_prepend_main」と言う用意されたアクションフックと簡単な条件分岐を使用してメインコンテンツの上部に表示させていきましょう。
それでは、my-snow-monkey.phpの一番下に下記コードを挿入していきましょう。
/* メインコンテンツの上部にHTMLの挿入 */
add_action(
'snow_monkey_prepend_main',
function () {
/* if文でフロントページのみに適応 */
if (is_front_page()) {
?>
<div class="hero">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="hero__title">
<h2><span>住宅のプロが提案する新しい価値と新しい住宅</span><span>あなただけの住宅を私たちは創造します</span></h2>
</div>
<div class="hero__btn"><a href="#"><span>会社案内</span></a></div>
<img src="<!-- ここにファイルパスを記述 -->" alt="" class="main-visual" />
</div>
<div class="swiper-slide">
<div class="hero__title">
<h2><span>住宅のプロが提案する新しい価値と新しい住宅</span><span>あなただけの住宅を私たちは創造します</span></h2>
</div>
<div class="hero__btn"><a href="#"><span>実績紹介</span></a></div>
<img src="<!-- ここにファイルパスを記述 -->" alt="" class="main-visual" />
</div>
<div class="swiper-slide">
<div class="hero__title">
<h2><span>住宅のプロが提案する新しい価値と新しい住宅</span><span>あなただけの住宅を私たちは創造します</span></h2>
</div>
<div class="hero__btn"><a href="#"><span>事業案内</span></a></div>
<img src="<!-- ここにファイルパスを記述 -->" alt="" class="main-visual" />
</div>
</div>
</div>
</div>
<?php
}
}
);上記コードをコピペしたら、<!– ここにファイルパスを記述 –>と記載がある場所にメインビジュアルに使う画像のファイルパスを記述しましょう。
「ダッシュボード」→「メディア」へ移動し挿入したい画像をクリックするとファイルパスが記述されているので、これをコピーすると楽ですね！
また、h2タグのテキストを変更すると、表示される文字列が変わるので試してみてください！
今は画像のようにヘンテコな感じになっていればとりあえずOKです！
ここからリッチなスライダーに仕上げていきますよ、、！
JSファイルにスライダーの設定を記述しよう！
「scripts」ファイルの直下にある「main.js」に下記のコードをコピペしましょう。
const mySwiper = new Swiper('.swiper-container', {
loop: true,
effect: 'slide',
centeredSlides: true,
slidesPerView: 1,
speed: 1000,
autoplay: {
delay: 9000,
disableOnInteraction: false,
}
})上記コードでスライダーの各種設定ができます。
- loop：画像を繰り返しスライドするかどうか
- effect：スライド時のアニメーションの種類
- centeredSlides：スライドを中央寄せするかどうか
- slidesPerView：表示される画像の枚数
- speed：スライドにかかる時間
- delay：次スライドが動き始めるまでの時間
- disableOnInteraction：ユーザーがスライドを操作した際に自動再生が止まるかどうか
他にも色々と設定できる項目があるので、気になった方は是非調べてみてくださいね！
上記コードを挿入して保存すると、まだヘンテコですが一応スライドするようになりました！
ここまでくれば後はSCSSでスタイルを整えるだけです！
スライダーのスタイルを整えよう
スライダーの見た目を整えるためにSCSSを記述しましょう！
まず、管理しやすくする為に、スライダーは別のファイルに分けておきます。
「styles」→「modules」の直下に「_hero-slider.scss」と言うファイルを作成しましょう。
そして、「_hero-slider.scss」を読み込むために「style.scss」の一番上に下記コードを記述してください。
@import 'modules/hero-slider';
このコードを記述することで、「_hero-slider.scss」を読み込んでくれます。
次にPC画面のスタイルを整えます。
それでは先ほど作成した「_hero-slider.scss」に下記コードをコピペしてください。
.swiper-slide {
/* 表示させる高さの調整 */
position: relative;
height: 70vh;
overflow: hidden;
.main-visual {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
transform: scale(1);
transition: transform 9s ease;
}
&-active {
.main-visual {
transform: scale(1.2);
}
.hero__title {
transform: translateX(-50%);
opacity: 1;
}
.hero__btn {
transform: translateX(-50%);
opacity: 1;
}
}
}
.hero {
overflow: hidden;
&__title {
position: absolute;
top: 30%;
left: 50%;
color: #fff;
text-align: center;
width: 90vw;
transform: translate(-50%, 20px);
transition: opacity 1.2s ease 1.5s, transform 1.2s ease 1.5s;
z-index: 1;
opacity: 0;
h2 {
font-size: 36px;
text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.8);
line-height: 2em;
}
span {
display: block;
}
}
&__btn {
position: absolute;
bottom: 30%;
left: 50%;
font-size: 16px;
color: #fff;
transform: translate(-50%, 20px);
transition: opacity 1.2s ease 2.5s, transform 1.2s ease 2.5s;
opacity: 0;
z-index: 1;
a {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background-color: #cd162c;
text-decoration: none;
width: 240px;
height: 60px;
}
}
}上記の記述でPC画面でのスタイルが整いました！
基本的には画面幅やテキストの位置とアニメーションの記述しかしていませんが、こんなにリッチなスライダーが完成しました！
タブレット以下でのスタイルは整っていないので、SCSSを記述していきましょう。
では、「_1023down.scss」のファイルに下記コードを添付してください。
ここではフォントサイズと画面幅の調整のみです。
/* ヒーロースライダー */
.hero {
&__title {
h2 {
font-size: 32px;
}
}
.swiper-slide {
height: 80vh;
}
}最後にスマホ画面です。
「_639down.scss」のファイルに下記コードを添付してください。
タイトルやボタンの位置の調整です。また、ボタンのサイズも調整します。
/* ヒーロースライダー */
.hero {
&__title {
top: 15%;
h2 {
font-size: 24px;
}
}
&__btn {
bottom: 20%;
a {
/* ボタンのサイズを小さく */
width: 180px;
height: 45px;
}
}
}お疲れ様です！
これでスライダーの実装が終わりました！
テキストアニメーションや「Swiper.js」の機能を自分なりにカスタマイズしてみたりして、使い方に慣れていきましょう！
サイト制作の続きの方はこちら→【実績掲載OK】Snow Monkeyカスタマイズ講座【中級編】
