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

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

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

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

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

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

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

ファイル導入

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

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

css内

js内

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

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

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

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

読み出しコード記入

＊以下コードは、「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()じゃないよ。

wordpressの管理画面から、function.phpなどの.phpファイルを編集した場合、うまく動作しない時があります。

その際は、ftpソフトなどでいったん該当ファイルをローカルに保存して、そこで編集を行います。

編集した.phpを、ftpソフトなどで再度アップロードする事で正常動作する場合があります。

.phpを編集する際は、サクラエディタ　が、エラーが少ないのではないかと思います。

上のエディタで保存する場合は、文字コード「UTF-8」、BOM「チェック無し」がエラーが少ないのでは無いかと思います。