SWIPERでSLIDER

閲覧数: 84(0)

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

スライダーの基本となるライブラリは「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 ぱっと見は「スタティック」な表示ですが、実は横に「スワイプ」出来るサプライズな演出となっています(自画自賛)

【最終更新日: 2019年5月20日】
カテゴリーIT閑話, 公開タグ, , , ,
パンくずリスト詳細
2020年5月12日

テーマの「マイナーチェンジ」に伴って「パンくずリスト」の仕様を若干変更しました。一つ前のテーマではパ  続きを読む

カテゴリーを制限する
blank
2020年5月11日

過去に何度も書いた「カテゴリー制限」の話、元はと言えば初期に書かれた「非公開」の記事が原因です。トッ  続きを読む

マイナーチェンジ
blank
2020年3月23日

かれこれ一年近くほったらかしだったので、気合をいれて「テーマ変更」と思っていたのですが、、、いろいろ  続きを読む

6月の検索ワードまとめ
blank
2019年6月30日

6月の検索ワードのまとめです。 意外なところで「zabbixダウングレード」が複数回検索され、単独の  続きを読む

アクセシビリティ対策
blank
2019年6月23日

テーマカスタマイズの一環で、トップページに一覧表示されている「写真を左右交互に表示する」ようにした際  続きを読む

dockerとproxy
blank
2019年6月18日

dockerやdocker-composeをプロキシ環境下で使うのに苦労したので忘れないようにメモし  続きを読む

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください