WordPressでは、便利なプラグインが豊富にあっていろいろな機能を追加することができます。スライダー系のプラグインも多数あるので、それを使うことで簡単にスライドショーを作ることができます。特に以前紹介させていただいた「Smart Slider 3」などは、無料でも高機能で大変お勧めです。
「Smart Slider 3」は、大変優秀なスライダープラグインですが、無料版だと、機能が限られているので、全画面で画像が徐々にズームインするようなスライドショーは作れません。
全画面ズームスライダーのデモサイトはこちら
今回は少し面倒ですが、WordPressのプラグインを使わない方法をご紹介いたします。
Contents
Swiper.jsを使用する
WordPressのプラグインは使いませんが、「Swiper.js」という、JavaScriptのライブラリを使用します。「Swiper.js」は、JavaScriptの高速で軽量なスライダーとして、様々なサイトで使われている人気のライブラリです。
実装の流れとしては、以下の通りです。
- header.phpに「Swiper.js」のCDNを読み込ませる
- footer.phpにスライダーのJavaScriptを記述
- トップページの編集画面でHTMLを記述
- 追加CSSでCSSを記述
という流れになっております。
１．header.phpに「Swiper.js」のCDNを読み込ませる
「Swiper.js」を使えるようにするためには、Swiperのダウンロードサイトから必要なファイルをダウンロードして使う方法と、必要なファイルをCDNで読み込む方法がありますが、CDNを使用した方が簡単です。
WordPressのダッシュボード「外観」＞「テーマエディタ―」から、使用中のテーマからheader.phpを選んで、header.phpの<head>から</head>の間に以下のコードを追加します。
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>親テーマに直接追加してもいいですが、後々テーマの更新をすることを考えて、子テーマ化して、子テーマのheader.phpに記述することをお勧めします。子テーマ化に便利なブラグイン「Child Theme Configurator」では、FTPソフトを使わないでheader.phpなども子テーマ化できるのでお勧めです。
次に、footer.phpに以下のJavaScriptのコードを記述します。追記する場所は、</body>の前に書きます。header.php同様に、子テーマ化して編集することをお勧めします。
<script type="text/javascript">
let swipeOption = {
loop: true,
effect: 'fade',
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
speed: 2000,
pagination: {
el: '.swiper-pagination',
clickable: true,
}
}
new Swiper('.swiper-container', swipeOption);
</script> PHPファイルの編集は、最悪動かなくなったりする可能性もありますので、バックアップしたり、FTPソフトで編集箇所を削除して元に戻せるようにするなど、準備をして自己責任でお願いいたします。
３．トップページの編集画面でHTMLを記述
今度は、スライドショーの本体になるHTMLコードを記述します。header.phpに記述してもいいですが、今回は、トップページ（固定ページ）に「カスタムHTML」ブロックを追加して記述しました。
ページの編集画面でブロックの追加「カスタムHTML」を選んで以下のHTMLコードを追加します。
<div class="wrap">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-img">
<img src="（画像１URL）">
</div>
<div class="slide-text">採れたて新鮮な野菜を</div>
</div>
<div class="swiper-slide">
<div class="slide-img">
<img src="（画像２URL）">
</div>
<div class="slide-text">心を込めて</div>
</div>
<div class="swiper-slide">
<div class="slide-img">
<img src="（画像３URL）">
</div>
<div class="slide-text">お客様にお届けします</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>（画像１URL）～（画像３URL）のところは、ご自身のサイトの画像ファイルURLに書き換えてください。
上記のHTMLでは、背景画像を３枚とそれぞれ中央にテキストを表示させていますので、適宜書き換えてください。
４．追加CSSでCSSを記述
最後に、追加CSSで全画面ズームスライダーにします。
WordPressのダッシュボード「外観」＞「カスタマイズ」をクリック、「追加CSS」をクリックして、以下のCSSコードを追加してください。
.wrap{
margin: 0 calc(50% - 50vw);
max-width: 100vw;
position: relative;
overflow: hidden;
}
@keyframes zoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
animation: zoom 10s linear 0s 1 normal both;
}
.slide-text{
position: absolute;
top: 50%;
left: 50%;
font-size: 46px;
font-family: serif;
font-weight: bold;
text-shadow: 2px 2px 8px #000;
color: #fff;
transform: translate(-50%,-50%);
}
.slide-img img{
object-fit: cover;
height: 100vh;
width: 100vw;
}後はヘッダー部分を隠すようにすれば完全に全画面になると思います。今回、WordPressの無料テーマ「BusinessPress」を使用していますので、以下のCSSコードも追加します。
.home .main-header-original, .home .site-header{
display: none;
}もしくは、ヘッダー部分を透明にする方法はこちらです。
.home .main-header-original{
position:absolute;
z-index:2;
width:100%;
}
.home .jumbotron{
display: none;
}
.site-header {
margin-bottom: 0;
}これで全画面で徐々にズームインするスライドショーの出来上がりです。
追加CSSの@keyframes zoomの部分を以下のように変えれば、ズームインからズームアウトに変更することもできます。
@keyframes zoom {
0% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}まとめ
WordPressでホームページを制作していて、テーマ付属のスライダー機能やスライダー系のプラグインは沢山ありますが、意外と全画面ズームスライダーが作れる無料のプラグインが見つからなかったので、今回、JavaScriptライブラリ「Swiper.js」を利用して作成する方法をご紹介させていただきました。
