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

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

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

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

GitHub - nextapps-de/spotlight: The most easy to integrate lightbox image gallery library for the Web.

The most easy to integrate lightbox image gallery library for the Web. - nextapps-de/spotlight

github.com

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

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

デモページはこちら。

Spotlight.js - Modern HTML5 Image Gallery

WinBox is the web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.

nextapps-de.github.io

Spotlightとは

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

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

JavaScriptを読み込む
ギャラリー表示したい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で利用するために必要なカスタマイズはたったこれだけ。

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

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

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

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

GitHub - nextapps-de/spotlight: The most easy to integrate lightbox image gallery library for the Web.

The most easy to integrate lightbox image gallery library for the Web. - nextapps-de/spotlight

github.com

ファイルを展開（解凍）すると「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;