スワイプ対応した軽量写真ギャラリー「Spotlight.js」をWordPress利用するカスタマイズ方法

高画質の写真サイト向けに以前から、以下のような条件のJavaScriptプラグインを探していました。

  • 動作が軽量
  • 高機能で画像の拡大・縮小などができる
  • スマホでも問題なく動作しスワイプ対応している

で最近、アンテナに引っかかったのがSpotlightというJavaScriptプラグインです。

Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies. - nextapps-de/spotlight

これが結構、簡単に実装できて使い勝手がよかったので紹介。

こんな感じの写真のギャラリー実装を簡単にできるようになります。

Spotlightのデモ

デモページはこちら。

WinBox is the web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.
スポンサーリンク
レクタングル(大)広告

Spotlightとは

Spotlightは、軽快に動作するJavaScriptのギャラリープラグインです。

Spotlightの使い方は非常に簡単で、以下の手順で簡単に実装できます。

  1. JavaScriptを読み込む
  2. ギャラリー表示したいa要素にclass=”spotlight”を追加する

要は、こんな感じでJavaScriptを読み込んで

<html>
<head>
    <script src="spotlight.bundle.js"></script>
    <title></title>
</head>
<body>
    <!-- CONTENT -->
</body>
</html>

あとは画像へのリンクに対してclassを付加してやれば良いだけです(※画像リンクではなくテキストリンクでもOK)。

<a class="spotlight" href="img1.jpg">
    <img src="thumb1.jpg">
</a>
<a class="spotlight" href="img2.jpg">
    <img src="thumb2.jpg">
</a>
<a class="spotlight" href="img3.jpg">
    <img src="thumb3.jpg">
</a>

スタイリング用のCSSも読み込む必要もなく、他にアイコンのようなリソースも使用しないので非常に軽量。

しかも、JavaScriptコードも一切書く必要がなく、かなり簡単に実装することができます。

あとは、これをWordPress向けに書いてやればいいだけです。

もちろん、高度なことをやろうと思えば、細かな設定も行うことが出来るようになっています。

カスタマイズに必要な主な手順

SpotlightをWordPressで利用するために必要なカスタマイズはたったこれだけ。

  1. Spotlightを子テーマ直下に設置する
  2. functions.phpにPHPコードを貼り付ける

基本的に、ファイルとコードのコピペで実装できます。

Spotlightを子テーマ直下に設置する

まずは、Spotlightからspotlight-master.zipファイルをダウンロードします。

Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies. - nextapps-de/spotlight

Spotlightファイルのダウンロード

ファイルを展開(解凍)すると「spotlight-master」というフォルダが出来るので、これをそのまま子テーマフォルダ直下にコピペします。

spotlight-master

functions.phpにPHPコードを貼り付ける

あとは、子テーマのfunctions.phpに以下のコードを貼り付けるだけです。

//Spotlightスクリプトを投稿・固定ページのフッターで読み込む
add_action( 'wp_enqueue_scripts', 'wp_enqueue_scripts_custom_demo' );
if ( !function_exists( 'wp_enqueue_scripts_custom_demo' ) ):
function wp_enqueue_scripts_custom_demo() {
	if (is_singular()) {
		//spotlightスクリプトの呼び出し
	  wp_enqueue_script( 'spotlight-js',  get_theme_file_uri('/spotlight-master/dist/spotlight.bundle.js'), array(), false, true  );
	}
}
endif;

//ターゲットに文字列が含まれているか
if ( !function_exists( 'includes_string' ) ):
function includes_string($target, $searchstr){
  if (strpos($target, $searchstr) === false) {
    return false;
  } else {
    return true;
  }
}
endif;

//画像リンクのAタグをSpotlightに対応するように付け替え
add_filter( 'the_content', 'add_spotlight_property', 11 );
if ( !function_exists( 'add_spotlight_property' ) ):
function add_spotlight_property( $content ) {
  //プレビューやフィードで表示しない
  if( is_feed() )
    return $content;

  //画像用の正規表現
  $img_reg = '\.jpe?g|\.png|\.gif|\.gif';
  $res = preg_match_all('/(<a([^>]+?('.$img_reg.')[\'\"][^>]*?)>)([\s\w\W\d]+?)<\/a>/i', $content, $m);
  if ($res && isset($m[1])) {
    //$alls = $m[0];
    $a_befors = $m[1];
    $i = 0;
    $count = 1;
    //class="spotlight"の追加
    foreach ($a_befors as $a_befor) {
      if (includes_string($a_befor, ' class="')) {
        if (preg_match('/ class="(.+?)"/i', $a_befor, $n)) {
        	//class内のクラス名の分解
        	$classes = explode(' ', $n[1]);
        	//spotlightが含まれているか
          if ( !in_array('spotlight', $classes) ) {
            $replaced_a = str_replace(' class="', ' class="spotlight ', $a_befor, $count);
            $content = str_replace($a_befor, $replaced_a, $content, $count);
          }
        }
      } else {
      	//classがない場合はclass="spotlight"を追加
        $replaced_a = str_replace('<a ', '<a class="spotlight" ', $a_befor, $count);
        $content = str_replace($a_befor, $replaced_a, $content, $count);
      }
      $i++;
    }
  }
  return $content;
}
endif;

Spotlightスクリプトの読み込み

SpotlightのJavaScriptファイルの読み込みは、ヘッダーでもフッターでもどちらでも動作するようです。

なので、本サンプルではフッターで読み込むようにしました。

画像リンクの置換処理

画像リンクの処理は、ざっくりとしたものになっています。

なので、「画像リンク」だけではなく、「画像へのテキストリンク」でも、ギャラリー表示されるようになっています。

ですので、「画像リンク」のみに反応するようにするには、もう少し正規表現を推敲する必要があるでしょう。

動作確認

上記カスタマイズをWordPress公式テーマの「Twenty Seventeen」で利用してみました。

エディターで画像を貼り付ける際は「リンク設定」項目の「リンク先」を「メディアファイル」にしてください。

エディターで画像を貼り付けてメディアファイルを選択する

何枚か同様に貼り付けた後、公開ページを開くと以下のように動作します。

Spotlightの動作確認

WordPress公式テーマでも問題なく動作するので、大抵のテーマであればカスタマイズを行えば動作するようになるかと思います。

まとめ

Spotlight、結構使い勝手が良かったです。

何より以下の3点が、ここまで上手く融合しているJavaScriptプラグインも、そう多くないような気がします。

  1. 軽量
  2. 高機能
  3. スマホ対応

WordPressで実装する場合は、本文内の画像リンクへの置換処理が少し大変ではあります。

けれど、大変な部分はそれくらい。

JavaScriptコードを書く必要がないということなので、JavaScriptが苦手な場合は、結構気軽に使えるかと思います。

サイト GitHub – nextapps-de/spotlight

デモ Spotlight.js Demo