これから Nishiki Pro
テーマを使うなら1度は確認しよう!

Nishiki テーマおすすめ設定 テーマおすすめ設定を見る
  1. ホーム
  2. マニュアル
  3. Nishiki Pro:フックを使ってスライダー用 JavaScript ライブラリ「Swiper.js」を特定の条件をつけて好きなタイミングで読み込む方法

Nishiki Pro テーマには標準でスライダーコンテンツ作成用の JavaScript ライブラリ「Swiper.js」が同梱されています。

この「Swiper.js」は「スライダー」ブロック を使用したページで自動で一度だけ読み込まれる仕組みですが、好きなページで読み込むこともできます。

このページでは、その「Swiper.js」を好きなタイミングで読み込む方法について解説しています。

注意!

ここからの情報は、PHP でコードが書けたり、ワードプレスのカスタマイズ知識や技術をある程度持っている上級者向けの内容として公開しています。

カスタマイズ用のプラグインを作ったり、子テーマを作って functions.php 内にコードを追記するなどで実装してください。

このようなカスタマイズがスラスラできるようになると、ワードプレスを扱う技術力も向上し、自信にもつながります。

もし駆け出しや初心者の方でも「やってみようかなぁ・・・」と、やる気がある方は、ぜひ挑戦してみてください!

コードの使いどころ

そもそも、Swiper.js は設定項目が多く、様々なタイプのスライダーコンテンツが作れます。

Nishiki Pro テーマの「スライダー」ブロックはかなりの設定が可能ですが、「スライダー」ブロックを使用していないページ中で、さらに自分なりにカスタマイズしたい、と思うこともあるかもしれません。

そんなとき、このページのコードを使うと便利です。

サンプルコード

// Swiper.js を読み込む
if ( ! function_exists( 'nishiki_pro_custom_enqueue_swiper' ) ) {
    function nishiki_pro_custom_enqueue_swiper() {
        // Swiper.js がすでに読み込まれてたら処理をしない
        if ( wp_script_is( 'nishiki-pro-swiper' ) ) {
            return;
        }
        
        // Swiper.js までの URL 指定して登録
        wp_register_script( 'nishiki-pro-swiper', get_template_directory_uri() . '/assets/js/swiper/swiper-bundle.min.js', array(), false );
        
        // Swiper.js を読み込む
        wp_enqueue_script( 'nishiki-pro-swiper' );
    }
    
    // フックする
    add_action( 'wp_enqueue_scripts', 'nishiki_pro_custom_enqueue_swiper' );
}

コードのポイント

まず、ページによって Swiper.js がすでに読み込まれているかどうかを wp_script_is で判別しています。

このとき、wp_script_is に指定するハンドル名は nishiki-pro-swiper にしてください。他のハンドル名は指定しないでください。他のハンドル名を指定すると、Swiper.js がすでに読み込まれているかどうか判別できません。

すでに Swiper.js が読み込まれている場合は改めて読み込む必要がない(Swiper.js はページ内で一度だけ読み込めば OK です)ので、以降の処理はしません。

Swiper.js が読み込まれていない場合は、wp_register_script で Swiper.js ファイルまでの URL を指定して登録。wp_enqueue_script で読み込みます。

コード内では紹介していませんが、条件分岐の処理をはさむことで、特定のページ(トップページやカテゴリーページなど)のみ読み込む、なんてこともできます。

is_home()/is_front_page()/is_category() など、条件分岐ができる関数を使ってお好みで試してみてください。

おまけ

get_template_directory_uri() は親テーマのテンプレートフォルダまでの URI を取得できる関数で、覚えておくと便利です。

「Swiper.js」を読み込んだら

「Swiper.js」の 公式ドキュメント に使用できるパラメーターをまとめたページが公開されていますので、参考ください。

WordPress テーマ Nishiki Pro

「ウェブサイト運営に本当に必要とされる機能」をテーマ内にまとめて搭載した WordPress テーマです。

ブロックエディター機能を強化し、これまでの WordPress では難しかったコンテンツが簡単に作れます。

ブログ、ポートフォリオ、コーポレートサイト、ビジネスサイトなど、様々な目的のウェブサイトに対応できるテーマです。

最新情報をチェック!

Nishiki / Nishiki Pro テーマに特化した情報を「にしきちゃん」がお伝えします😀

  • リリース情報
  • 新機能の紹介
  • 便利な使い方
  • 開発中の機能紹介
  • 導入事例
  • あるある日常ネタ

など