WordPressテーマLION MEDIAのトップページに表示できるピックアップ記事のレイアウトが気になるのでスライドショーにするとどうなるのかカスタマイズをしてみました。
ピックアップ記事のレイアウトで特に気になるのはスマホ画面で表示した場合です。スクロール操作を必要とする横並びレイアウトなので視認しづらいと思うことがあります。
しかしピックアップ記事をスライドショーすることによってスクロールする必要がなくなるので視認性が良くなるわけであります。
LION MEDIAのピックアップ記事を表示する
LION MEDIAのピックアップ記事をスライドショーにするときには、スライドショーで動かすLION MEDIAのピックアップ記事をトップページに表示させておく必要があります。
まずはLION MEDIAのピックアップ記事を表示するところまでの準備を整えます。そのあとにピックアップ記事をスライドショーにしていきます。
ピックアップ3記事をカスタマイズ設定で指定
LION MEDIAのピックアップ記事はLION MEDIAのテーマが有効になった状態のWordPressの管理画面からカスタマイズ設定の基本機能設定 [LION用]に進んで、TOPピックアップ記事という項目にて設定します。
TOPピックアップ記事設定では、トップページにピックアップ記事として表示したい投稿をピックアップ記事01から03までの入力ボックスがあるのでWordPressの投稿一覧で投稿IDを選んで入力します。
LION MEDIAのピックアップ記事を有効化
ピックアップ記事にする投稿IDをTOPピックアップ記事設定の入力ボックスに入力したら、LION MEDIAのテーマにピックアップ記事を有効化します。
ピックアップ記事01から03までの入力ボックスの上部でピックアップ記事を有効化するかどうかの選択ができます。まだ設定をしてない場合は無効になっているので有効に切り替えて公開のボタンで設定保存します。
設定保存するとピックアップ記事がLION MEDIAのトップページのヘッダーメニュー下に横並びで3記事表示できます。
ピックアップ記事をSwiperでスライドショーにする
LION MEDIAのピックアップ記事をトップページに表示できたらピックアップ記事をスライドショーにするための準備です。
LION MEDIAのピックアップ記事を自動のスライドショーにするためにSwiperを使用します。
スライドショーにするSwiperとは
SwiperとはJavaScriptライブラリです。jQueryに依存することなくレスポンシブ対応が可能なのでPCでもスマホでもスライドショーが実現できます。
そしてSwiperはカスタマイズの自由度も高いので、スライドショーにするスライド表現の幅も、実装するWebサイトに合わせて詳細に設定が可能です。
またスライドショーにするためにSwiperの必要なファイルをダウンロードしてきてサイトに設置する手間を軽減できるCDNで読み込む方法で実装も可能です。
LION MEDIAにSwiperを読み込む
今回はLION MEDIAにSwiperを読み込むときにCDNで読み込みをしてピックアップ記事をスライドショーで動かします。
Swiperを読み込むLION MEDIAのファイルはheader.phpとfooter.phpです。LION MEDIAのheader.phpとfooter.phpについては、LION MEDIAの子テーマlionmedia-childフォルダに子テーマを作成して読み込むのをおすすめします。
header.phpにはswiper.min.cssを読み込みます。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
footer.phpにはswiper.min.jsを読み込みます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
SwiperをLION MEDIAに読み込むCDNについては以下のSwiperのページで確認できます。
各ファイル内に記述する位置も説明します。
swiper.min.cssはLION MEDIAのheader.phpの<head></head>内に記述して読み込みます。
swiper.min.jsはLION MEDIAのfooter.phpの</body>直上に記述して読み込みます。
SwiperのCDNは古いバージョンを使ってます。最新バージョンだとブレイクポイントで切り替わるピックアップ記事の前後のレイアウトがしっくり来なかったためです。
LION MEDIAのファイルにswiper.min.cssとswiper.min.jsのパスを記述したらファイルを保存します。
LION MEDIAにHTMLとスクリプトを記述
LION MEDIAのピックアップ記事をスライドショーにするためにやる最後の作業は、LION MEDIAのテンプレートファイルにスライドショーにするHTMLとスクリプトのコードを記述する作業です。
スライドショーを動かす準備のときに読み込んでおいたswiper.min.cssとswiper.min.jsがLION MEDIAのピックアップ記事のHTML構造を使用して動作するようにします。
HTMLとスクリプトを記述するLION MEDIAのテンプレートファイルは以下の2つです。
- index.php
- footer.php
index.phpにHTMLを記述
LION MEDIAのピックアップ記事をマークアップしてるHTMLはindex.phpです。
index.phpの36行目付近にdiv要素で囲まれたulとliのリストタグでマークアップしたピックアップ記事の要素にスライドショーに使用するSwiperのクラスを記述します。
<div class="key swiper-container<?php if(get_option('fit_function_pickupSp')): ?> u-none-sp<?php endif; ?>">
<ul class="key__list swiper-wrapper">
<li class="key__item key__item-first swiper-slide">
<span class="key__cat bgc<?php if (isset($cat_meta[$cat_id01])) { echo esc_html($cat_meta[$cat_id01]);} ?> u-txtShdw"><?php the_category(' ' ,'' ,$post_id01); ?></span>
<a class="key__link" href="<?php echo get_permalink($post_id01); ?>">
<h2 class="key__title u-txtShdw"><?php echo get_post($post_id01)->post_title; ?></h2>
</a>
</li>
<li class="key__item key__item-second swiper-slide">
<span class="key__cat bgc<?php if (isset($cat_meta[$cat_id02])) { echo esc_html($cat_meta[$cat_id02]);} ?> u-txtShdw"><?php the_category(' ' ,'' ,$post_id02); ?></span>
<a class="key__link" href="<?php echo get_permalink($post_id02); ?>">
<h2 class="key__title u-txtShdw"><?php echo get_post($post_id02)->post_title; ?></h2>
</a>
</li>
<li class="key__item key__item-third swiper-slide">
<span class="key__cat bgc<?php if (isset($cat_meta[$cat_id03])) { echo esc_html($cat_meta[$cat_id03]);} ?> u-txtShdw"><?php the_category(' ' ,'' ,$post_id03); ?></span>
<a class="key__link" href="<?php echo get_permalink($post_id03); ?>">
<h2 class="key__title u-txtShdw"><?php echo get_post($post_id03)->post_title; ?></h2>
</a>
</li>
</ul>
</div>
追加記述する要素とクラス名は以下の3つです。
- <div class=”key<…略/>”>に swiper-containerを記述
- <ul class=”key__list”>に swiper-wrapperを記述
- <li class=”key__item”>にswiper-slideを記述
liタグに記述するswiper-slideのクラス名はLION MEDIAのピックアップ3記事を表示してるので3つのliタグ全てに記述します。
footer.phpにスクリプトを記述
LION MEDIAのfooter.phpにはスクリプトを記述します。スクリプトはLION MEDIAのピックアップ記事をどのようなスライドで動かすかのオプション設定のための記述で使用します。
スクリプトの記述位置は</body>直上に先に記述したSwiperのCDNのjsを記述した下に記述します。
<script>
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
slidesPerView: 3,
spaceBetween: 20,
centeredSlides : true,
speed: 4000,
effect: 'slide',
breakpoints: {
767: {
slidesPerView: 1,
spaceBetween: 0,
}
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
})
</script>
footer.phpに記述したスクリプトでスライドショーのオプション部分についても少し説明しておきます。
loop
trueだとループするようになります。
slidesPerView
1画面で見えるスライドの数
spaceBetween
スライドの間の距離を設定
centeredSlides
trueにすると、スライドのスタートが真ん中
speed
スライドの速度、数字が大きいほど遅くなります。
effect
スライドの仕方を選択
breakpoints
画面サイズごとのオプション設定。ブレイクポイントで切り替えたときのスライドショーの動作を指定でできます。
autoplay
自動再生の設定です。これがないと自動でスライドしません。
LION MEDIAのfooter.phpにスクリプトを記述した時点でサイトのトップページをブラウザで表示すると、ヘッダーメニュー下にピックアップ記事がスライドショーになっています。
ピックアップ記事をスライドショーにした表示
LION MEDIAのピックアップ記事をスライドショーにカスタマイズしたあとにブラウザで表示した動画を埋め込んでおきました。
こんな感じになるんだなくらいの参考にピックアップ記事のスライド動作を見てみてください。
PC画面のときのLION MEDIAピックアップ記事スライドショー
LION MEDIAのfooter.phpにスクリプトを記述したコードのeffect: ‘slide’,でピックアップ記事を右から左にスライドするエフェクトに設定してます。
そしてslidesPerView: 3,がスライドショーに表示する表示数を3で設定してます。LION MEDIAのピックアップ記事は3記事しかないのでslidesPerViewを3にすると元デザインを損なうことなくスライドショーにできます。
スマホ画面のときのLION MEDIAピックアップ記事スライドショー
やはりLION MEDIAのfooter.phpにスクリプトを記述したコードについてですが、breakpoints:767で設定すると、LION MEDIAのメディアクエリと同じ767px幅で合わせれらる設定にしてます。
slidesPerView: 1,ではLION MEDIAのスマホ画面ではピックアップ1記事が表示なので、スライドするとき1記事ずつスライドするように設定してます。