【WordPress】Swiperをショートコードで呼び出して画像を表示する

こんにちは、Ryohei（@ityryohei）です！

本記事では、WordPressのショートコードでSwiperを表示する方法をご紹介しています。

Swiperをショートコードで表示したいんだけど、良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

本記事でやりたいこと

タイトルにもあるように、Swiperをショートコードで呼び出して、スライダーに画像を表示できるようにします。高機能なスライダーは有能なプラグインがたくさんありますので、ここでの要件はシンプルに下記のような感じ！

ショートコード側で画像IDを指定して画像を表示する（複数指定可）
Swiperのオプションやスタイルはショートコード側から指定しない

予め用意済みのSwiperを呼び出して、画像だけをショートコード側で指定するようなイメージです！記事の中で画像だけのスライダーを使用したいケースに有効かなと思います。

では、早速やっていきましょう！

Swiperを使用するための準備

Swiperは無料で使用することができる高機能なスライダーのライブラリです。下記のサイトに必要なファイルが一式ありますので、ダウンロードします。

https://swiperjs.com/get-started

CDNで読み込む場合は下記をご利用ください。

CDN

//CSS

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

//JS

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

header.phpにCSSファイルを、footer.phpにJSファイルを追加しましょう。

後は上記のサイトに載っているようにCSSとJSを追加します。とりあえずここでは、公式サイトで紹介されている基本的なスタイル・スクリプトを設定します。

CSS

.swiper-container {

  width: 600px;

  height: 300px;

}

JS

const swiper = new Swiper('.swiper-container', {

  // Optional parameters

  direction: 'vertical',

  loop: true,

  pagination: {

    el: '.swiper-pagination',

  },

  navigation: {

    nextEl: '.swiper-button-next',

    prevEl: '.swiper-button-prev',

  },

  scrollbar: {

    el: '.swiper-scrollbar',

  },

});

上記をスライダーを表示したいページのCSSファイルとJSファイルに追加すると良いと思います。

以上、Swiperの準備は完了です。

続いて投稿内で使用するショートコードを作成します。本記事はショートコードの作成方法や使い方については説明は省略しておりますので、詳しくは下記の記事を読んでいただければと思います！

では、ショートコードを作成していきます。

ショートコードを作成する

ショートコードはテーマ内の関数として設定します。テーマ内の関数はfunctions.phpで管理されています。

Swiperを表示するためのショートコードは下記の通りです。下記をfunctions.phpに追加してサーバーにファイルをアップロードしましょう。

function swiper_func($atts){

  $a = shortcode_atts( array(

    'id' => '0000'

  ), $atts, 'swiper');

  $ids = explode(',', $a['id']);

  if(isset($ids)){

    ob_start();

    echo '<div class="swiper-container"><div class="swiper-wrapper">';

    foreach($ids as $id){

        $url = wp_get_attachment_url($id);

        echo '<div class="swiper-slide"><img src="'.$url.'" alt=""></div>';

    }

    echo '</div><div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div>';

    return ob_get_clean();

  }

}

add_shortcode('swiper', 'swiper_func');

ファイルをアップロードしたら早速ショートコードを使用してみてください。

使い方は簡単です。作成したショートコードを挿入したい箇所に書いて、下記のようにメディアの画像IDをカンマ区切りで指定するだけです。

ショートコードの使用方法

[swiper id="1, 2, 3, 4, 5"]

これでショートコードからSwiperで表示したい画像を指定することができます。

最後に

今回は本ブログでスライダーを表示するために本記事の内容を考えました。単純なスライダーであればこれくらいの内容でも良いですが、ブロックとして使用したい！もっと高機能なスライダーが作りたい！という要望であればプラグインを検討するのも良いかもしれません。素晴らしいプラグインがたくさん公開されているのもWordPressを採用するメリットですよね！オープンソース最高！

以上、WordPressでSwiperをショートコードで呼び出して画像を表示する方法のご紹介でした！