SWIPERでSLIDER

無料テーマを独自に改善する活動の一環として、前回は「おすすめ記事」を表示する部分について書きました。おすすめ記事として「固定ページ」を選択する仕様だったのを「投稿」から選択できるようにしました。今回はそのおすすめ記事をスライダー化しようと思います。スライダーは面白い機能ですがスクリプトを使って実装するのでレスポンスは低下してしまいます。あまり凝ったテーマやプラグインを使うとやれることは増えますがその分サイトが重くなります。そこで今回は出来るだけ軽く実装するということでプラグインを使わない方法でチャレンジします。

スライダーの基本となるライブラリは「Swiper」を使います。各所で絶賛されているライブラリです。専用のスタイルシートとライブラリのロードはCDNかダウンロードが選べます。今回はうまくいかなかった時の切り分けを分かりやすくする目的でダウンロードを選択しています。ダウンロードしたファイルの中の「dist」フォルダを子テーマにコピーします。子テーマを使っていない場合は親テーマ下です。ここでは「dist」を「swiper」に改名しています。

wp-content/themes/fotografie-child/js$ dir swiper/*
swiper/css:
total 44
-rwxr-xr-x 1 www-data 22252 Aug 28 13:10 swiper.css*
-rwxr-xr-x 1 www-data 19774 Aug 28 13:10 swiper.min.css*

swiper/js:
total 1220
-rwxr-xr-x 1 www-data 214461 Aug 28 13:10 swiper.esm.bundle.js*
-rwxr-xr-x 1 www-data 214607 Aug 28 13:10 swiper.esm.js*
-rwxr-xr-x 1 www-data 263569 Aug 28 13:10 swiper.js*
-rwxr-xr-x 1 www-data 120744 Aug 28 13:10 swiper.min.js*
-rwxr-xr-x 1 www-data 425969 Aug 28 13:10 swiper.min.js.map*

WordPressのテーマでJavaScriptをロードする方法はいろいろありますが、他の追加機能との兼ね合いもあり「template-tags.php」を子テーマの「functions.php」でロードする方法を採用しました。「Swiper」をロードする部分を抜き出すとこんな感じです。最後のJavaScript「swiper_slider()」は自分で作るスライダーの実装そのものです。子テーマでロードするので「get_stylesheet_directory_uri()」を使います。親テーマの場合は直接「functions.php」に「get_template_directory_uri()」を使って記述します。

function swiper_style() {
    wp_enqueue_style( 'swiper', get_stylesheet_directory_uri() .'/js/swiper/css/
swiper.min.css', array(), false, 'all');
}
add_action( 'wp_enqueue_scripts', 'swiper_style' );

function swiper_scripts() {
    wp_enqueue_script( 'swiper', get_stylesheet_directory_uri() .'/js/swiper/js/
swiper.min.js', array(), false, true);
}
add_action( 'wp_enqueue_scripts', 'swiper_scripts' );

function swiper_slider() {
    wp_enqueue_script( 'swiper_slider', get_stylesheet_directory_uri() .'/js/swi
per-slider.js', array(), false, true);
}
add_action( 'wp_enqueue_scripts', 'swiper_slider' );
 

念のため子テーマの「functions.php」です。「get_template_part( ‘inc/template’, ‘tags’ )」で呼び出します。

<?php
ob_start();
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}
get_template_part( 'inc/template', 'tags' );
function fotografie_child_languages(){
    load_theme_textdomain( 'fotografie', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'fotografie_child_languages' );
ob_end_clean();

自分で作るスライダーの実装の中身はこんな感じです。実際の実装とは違いますがこれでも十分動作します。「breakpoints」を使ってレスポンシブ対応としています。768はiPadの縦画面の横幅です。パソコンでは3記事、iPadの縦画面では2記事、スマホの縦画面では1記事となるようにしています。

var mySwiper = new Swiper ('.swiper-container', {
        loop: true,
        speed: 600,
        slidesPerView: 3,
        centeredSlides : true,
        direction: 'horizontal',
        effect: 'slide',
        pagination: {
            el: '.swiper-pagination',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        breakpoints: {
        980: {
            slidesPerView: 3
            },
        768: {
            slidesPerView: 2
            },
        480: {
            slidesPerView: 1
            }
        }
});

実装を組込む部分です。「Swiper」は専用のクラスが定義された部分に適用されますので適切な記述が必要です。前回の「おすすめ記事」でも手を入れた「display-featured.php」です。まずは改修前の状態から。「foreach」でループします。ループの回数は「カスタマイズ」で設定した記事数です。

   <div class="featured-content-wrapper <?php echo esc_attr( $layout ); ?>">
        <?php
        foreach ( $featured_posts as $post ) {
            setup_postdata( $post );
        // Include the featured content template.
        ?>
        <?php
            get_template_part( 'components/features/featured-content/content', 'featured' );
        }
        wp_reset_postdata();
        ?>
    </div><!-- .featured-content-wrapper -->

このループの部分にスライダーの設定をします。具体的には「class=”swiper-slider”」を記述して「Swiper」にスライド対象コンテンツであることを伝えます。ループの中でタグが完結することが重要です。

    <div class="featured-content-wrapper <?php echo esc_attr( $layout ); ?>">
        <div class="swiper-container"><!-- swiper-container -->
            <div class="swiper-wrapper"><!-- swiper-wrapper -->
        <?php
        foreach ( $featured_posts as $post ) {
                ?><div class="swiper-slide"><?php //swiper-slider
            setup_postdata( $post );
        // Include the featured content template.
        ?>
        <?php
            get_template_part( 'components/features/featured-content/content', 'featured' );
                ?></div><?php //swiper-slider end
        }
        wp_reset_postdata();
        swiper_slider();
        ?>
            </div><!-- swiper-wrapper end -->
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div><!-- swiper-container end -->
    </div><!-- .featured-content-wrapper -->

実際に画像等のコンテンツを出力するのは「get_template_part()」で呼び出している「content-featured.php」に実装されています。基本的にはそのまま流用しますがそのままではヘッダーに余分な情報が付加されて狙った通りに表示されないので「post_class()」をコメントアウトします。また「class=”post-thumbnail”」が悪さをするので「class=”post-thumbnail”」は削除します。

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <a class="post-thumbnail" href="<?php the_permalink(); ?>">

<article id="post-<?php the_ID(); ?>" <?php // post_class(); ?>>
    <a href="<?php the_permalink(); ?>">

最後にCSSの調整としてテーマカスタマイズの「追加CSS」で.entry-headerにwidth設定を追加します。

.entry-header {
	width: auto !important;
}

これでスライダーを実装することが出来ました。自動でスライドする設定を入れてみましたが、煩雑な感じだったので止めましたw　ぱっと見は「スタティック」な表示ですが、実は横に「スワイプ」出来るサプライズな演出となっています(自画自賛)