[js]wpでswiperを仕込むときのメモ

地味な話。

こんな感じ
1. 出力位置
2. 出力順
jsファイルに設定をぶち込む場合

こんな感じ

まずファイル読み込み

<?php
add_action('wp_enqueue_scripts', 'add_headFiles');
function add_headFiles() {
    if(is_admin()) return;
    ⋮
    if(is_singlar('blog') || is_archive('blog')){
        wp_enqueue_style('swiper', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css', array(), '' );
        wp_enqueue_script('swiper', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', array(), '', true);
    }
    wp_enqueue_script('common', get_template_directory_uri().'/js/scripts.js', array(), '', true);
}

出力位置

第五引数で出力位置を決められる。
true にすると<body>下部に出力されるんで、jQueryに依存してないファイルは<head>内で読み込むと発火しなかったりするので、抑えておくポイント。

出力順

で、swiper.jsは、swiper.jsに限らないんだけど、オプション関係を書く場合は本体の後ろに書かないといけない。ページファイル内にベタ打ちでもいいんだけど、あっちこっちに書き込んでると調整するときにめんどくさくなるので一元管理したい気持ちがある。

第三引数で依存先を指定できるんだけど複数指定ができないので、「jQueryとswiperを依存先にする」を作ることができない。

複数条件を付けたい時は引数じゃなくてif文で振り分ける。

複数条件がだるかったら、「wp_enqueue_なんちゃらは上から順に出力される」ってルールもあるからそれで。

jsファイルに設定をぶち込む場合

こんな感じでswiperを扱うとして

<div class="swiper" id="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><picture><img src="https://placehold.jp/1000x1000.png?text=01" alt=""></picture></div>
        <div class="swiper-slide"><picture><img src="https://placehold.jp/1000x1000.png?text=02" alt=""></picture></div>
        <div class="swiper-slide"><picture><img src="https://placehold.jp/1000x1000.png?text=03" alt=""></picture></div>
        <div class="swiper-slide"><picture><img src="https://placehold.jp/1000x1000.png?text=04" alt=""></picture></div>
        <div class="swiper-slide"><picture><img src="https://placehold.jp/1000x1000.png?text=05" alt=""></picture></div>
        <div class="swiper-slide"><picture><img src="https://placehold.jp/1000x1000.png?text=06" alt=""></picture></div>
    </div>
</div>

こんな感じ

if (document.getElementById('swiper')){
    const swiper = new Swiper('.swiper', {
        loop: true,
        effect: "fade",
        autoplay: {
            delay: 10000,
            disableOnInteraction: false,
        },
    });
}

「if($(‘#swiper’).length){…}」でやるとjQueryを噛ませることになるから、存在チェックもjsで書いたほうがいいですね、というだけの話。

存在しなかったら走らないので、めんどくさかったらそもそも存在チェックしなくてもいい気がしたりする。でもまあ無駄な処理になるからチェックした方がいいよね。
というかそもそもがswiperあるところだけに記述すればいいって話でもあるんだけどさ。

まあそんな感じで。