プラグインなしでLightbox機能を導入する

blog

通常、画像を拡大表示させるには、別ページに移動して画像を表示するか、別タブを開いて表示することになるかと思います。

Lightboxの機能とは、クリックするとこんな感じで、同一ページ内で拡大画像を表示できるものです。

 

 

今回は、Lightboxのプラグインは多数ありますが、プラグインは入れたくない場合について書いていきます。

*こちらは、wordpressのテーマ「stinger plus2」「twenty twelve」でしか確認していませんので、ご了解願います。

*子テーマ利用を前提にしています。

*「cocoon」など、既に標準装備されているテーマもあります。これらに導入すると機能が被ってしまってエラーが出ることもありますので、ご確認ください。

 

ファイル導入

公式サイトからファイルをダウンロードします。

解凍した中に、フォルダ「dist」と言うのがあって、この中の「css」「js」「images」内のファイルを使います。

lightbox_folder

css内

lightbox_css

js内

lightbox_js

「css」「js」は、それぞれひとつづつのファイルを使用します。「.min」が付いているものは、コードが圧縮されているようです。

これらをテーマ内にアップロードします。私は子テーマの方にアップしました。(全部アップロードしてしまっても良いです。)

テーマによっては、既に「css」「js」「images」3つのフォルダが存在している場合があります。その際は、それぞれの中にアップロードします。

wordpress

存在していない場合は、フォルダ丸ごとアップロードしてしまっても良いかと思います。

 

読み出しコード記入

*以下コードは、「lightbox.css」「lightbox-plus-jquery.js」を利用した例です。

コードの追加場所は、<head></head>内になります。テーマによって違うかもしれませんが、「stinger plus2」であれば、「header.php」にあります。</head>直前に入れれば良いのではないかと思います。

<link href="<?php echo get_stylesheet_directory_uri(); ?>/css/lightbox.css" type="text/css" rel="stylesheet" media="all" />
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/lightbox-plus-jquery.js" type="text/javascript"></script>

jQueryを利用していないテーマの場合は、

<?php wp_enqueue_script('jquery');?>

とかで呼び出す必要があります。

*「stinger 2plus」「twenty twelve」では不要でした。

 

拡大させたい画像へのリンク

拡大させたい画像のリンクに、「rel=”lightbox”」を付け加えることによっ機能します。

<a href="/test.jpg"><img src="/test2.jpg"></a>

だったら、

<a href="/test.jpg" rel="lightbox"><img src="/test2.jpg" ></a>

とかにします。

一個一個書き換えるのは面倒ですね。と思ったら、いっぺんに書き換える方法を見つけました。

このコードは、こちらのサイトの ページの画像をクリックすると画面内に拡大表示してくれる「Lightbox」をWordPressで使う方法 をそのまんまです。

以下をfunction.phpに追加します。

//画像リンクのAタグをLightboxに対応するように付け替え
function add_lightbox_property( $content ) {
  //プレビューやフィードモバイルなどで遅延させない
  if( is_feed() || is_preview() || st_is_mobile() )
    return $content;
   //既に適用させているところは処理しない
   if ( false !== strpos( $content, 'data-lightbox="image-set"' ) )
    return $content;
   //Aタグを正規表現で置換
  $content = preg_replace(
    '/<a([^>]+?)>\s*(<img[^>]+?&gt;)\s*<\/a>/',//Aタグの正規表現
    '<a${1} data-lightbox="image-set">${2}',//置換する
    $content );//投稿本文(置換する文章)
   return $content;
}
add_filter( 'the_content', 'add_lightbox_property', 11 );

テーマによっては、エラーが出ますが、その場合は「 || st_is_mobile()」部分を削除すればエラーは出なくなると思います。
(「twenty twelve」では保存できなかったので削除しました。)

この部分は、スマホでlightboxを機能させないためのものの様です。

*テーマによっては、「is_mobile()」でいけるかもしれません。

*この辺の条件分岐は
モバイルとの分岐はis_mobile()じゃないよ。