LION MEDIAのピックアップ記事をスライドショーにする

WordPressテーマLION MEDIAのトップページに表示できるピックアップ記事のレイアウトが気になるのでスライドショーにするとどうなるのかカスタマイズをしてみました。

ピックアップ記事のレイアウトで特に気になるのはスマホ画面で表示した場合です。スクロール操作を必要とする横並びレイアウトなので視認しづらいと思うことがあります。

しかしピックアップ記事をスライドショーすることによってスクロールする必要がなくなるので視認性が良くなるわけであります。

1. LION MEDIAのピックアップ記事を表示する
- 1.1. ピックアップ3記事をカスタマイズ設定で指定
- 1.2. LION MEDIAのピックアップ記事を有効化
2. ピックアップ記事をSwiperでスライドショーにする
- 2.1. スライドショーにするSwiperとは
- 2.2. LION MEDIAにSwiperを読み込む
3. LION MEDIAにHTMLとスクリプトを記述
- 3.1. index.phpにHTMLを記述
- 3.2. footer.phpにスクリプトを記述
4. ピックアップ記事をスライドショーにした表示

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 CDN

各ファイル内に記述する位置も説明します。

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>