ワードプレス:ショートコードで記事内に画像スライダー

画像スライダーを作るワードプレスのプラグインはたくさんあります。

でも、凝った仕様のものが多いんですよね。

自分が求めているのは、シンプルに記事内からサクッと画像スライダーを生成できるもの。

結局見つけることができなかったので、自作ショートコードにより、実装することにしました。

以下では、その手順を説明します。

必要な画像スライダーの要件

具体的には、次の要件をみたすような画像スライダーが必要です。

  • ショートコードとWP画像IDを書くだけで、画像スライダーを記事内に埋め込める
  • 表示中の画像以外のサムネイル画像も表示
  • 表示画像をクリックすると、拡大表示できる(ライトボックス)

完成したショートコードのデモはこちら

利用する jQuery ライブラリ

今回利用する jQuery のライブラリは2つ。

1つ目は、画像スライダーライブラリの「lightSlider」。

もう1つは、ライトボックス・エフェクトライブラリの「lightGallery」です。

JavaScript の実装

「Insert Headers and Footers」というプラグインを使って、Javascript のコードを書いていきましょう。

Headers:ライブラリのCDN

ライブラリのCDNリンクを取得。

取得したリンクを「Insert Headers and Footers」の「Scripts in Header」に書きます。

# Scripts in Header
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/css/lightgallery.min.css
" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery.min.js"></script>

ポイント

  • 「.min.css」と「.min.js」だけでOK

これでライブラリのインポートは完了。

Footers:JavaScript

続いて、「Insert Headers and Footers」の「Scripts in Footer」に、JavaScript のコードを書きます。

# Scripts in Footer
<script type="text/javascript">
(function($) {
  $(document).ready(function() {
    if ($("#lightslider")) {
      $("#lightslider").lightSlider({
      item: 1,
      gallery: true,
      minSlide:1,
      maxSlide:3,
      slideMove:1,
      slideMargin:5,
      mode: 'slide',
      onSliderLoad: function() {
          $("#lightslider").lightGallery({
          });    
      }
      }); 
    };
  });
})( jQuery );
</script>

ポイント

  • ワードプレスに書く jQuery コードは、「(function($) {…})( jQuery )」でラップする
  • lightSlider のコールバックで lightGallery を適用している
  • lightSlider の細かいオプション設定はこちら
  • 「lSPrev」「lSNext」のスタイルを変えたい場合はこちら

自作ショートコードの実装

残りは、自作ショートコードの実装のみです。

やりたいことは、次のようなショートコードを記事内に書くだけで、画像スライダーを表示できるようにすること。

# ショートコード例
lightslider ids="965,964,961"

先ほど書いた JavaScript のコードを適用する「#lightslider」と「画像素材のURL」の埋め込みが必要です。

functions.php

ワードプレスの管理画面より、「外観 > テーマの編集」と進みます。

利用しているテーマの「functions.php」を開き、自作ショートコードを追加します。

/**
 * Custom shorcodes 
 * */
function insert_light_slider($atts) {
    extract(shortcode_atts(array(
        'ids' => ''
    ), $atts));
    $ids_array = explode(',', $ids);
    $temp_head = "<ul id=\"lightslider\">";
    $temp_foot = "</ul>";
    $temp_body = "";
    foreach($ids_array as $value) {
        $img_url = wp_get_attachment_url($value);
        $temp_body = $temp_body."<li data-thumb=".$img_url ." data-src=".$img_url."><img src=".$img_url ."></li>";
    }
    return $temp_head.$temp_body.$temp_foot;
}
add_shortcode('lightslider', 'insert_light_slider');

ポイント

  • add_shortcode メソッドで、自作ショートコードを定義
  • wp_get_attachment_url メソッドで画像IDから画像URLを取得
  • 任意のIDを付したHTMLテンプレートを返す

必要なセットアップは以上。

完成したショートコードのデモはこちら

WordPress の画像スライダー生成にお困りですか?

WordPress の画像スライダー生成に関するご依頼・ご相談はこちらからお気軽にどうぞ 😀

Sources

兵庫県西宮市生まれのフリーランスRailsエンジニア。海外を拠点にデジタルノマド生活中。/ 前職・資格:公認会計士 / プログラミング言語:Ruby, JavaScript, HTML, CSS / 日本語・英語
コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です