LightBoxが動かないときはソースを確認してみよう

更新日:2018/9/22 公開日:2017/11/19 WordPress

この記事は2018年9月22日に最終更新したものです。
現在は状況が異なる可能性がありますのでご注意ください。

この記事が気に入った方は「いいね」してくださるとヾ(*≧∀≦)ﾉﾞ嬉ｽｨ～★♪です。

この記事を読むのに必要な時間は約 16 分です。

script を読みこむ順番に注意しよう

1.ソースを見る。

動かないときは、まず、ソースを見てみましょう。
→ページを右クリック→ソース

Ctrl+Fキーで文字列を検索します。
jquery と打って検索してみましょう。

最初に

<script type='text/javascript' src='//あなたのURL/wp-includes/js/jquery/jquery.js'></script>

が見つかるはずです。

Lightboxプラグインは、これより下に入っています。

以下はこのブログで使用しているsimple-lightbox　のコードです。

<script type='text/javascript' defer='defer' src='https://www.never-giveup.net/wp-content/plugins/simple-lightbox/client/js/prod/lib.core.js?ver=2.7.0&#038;fver=20180625011058'></script>
<script type='text/javascript' defer='defer' src='https://www.never-giveup.net/wp-content/plugins/simple-lightbox/client/js/prod/lib.view.js?ver=2.7.0&#038;fver=20180625011058'></script> 
<script type='text/javascript' defer='defer' src='https://www.never-giveup.net/wp-content/plugins/simple-lightbox/themes/baseline/js/prod/client.js?ver=2.7.0&#038;fver=20180625011100'></script> 
<script type='text/javascript' defer='defer' src='https://www.never-giveup.net/wp-content/plugins/simple-lightbox/themes/default/js/prod/client.js?ver=2.7.0&#038;fver=20180625011102'></script>
<script type='text/javascript' defer='defer' src='https://www.never-giveup.net/wp-content/plugins/simple-lightbox/template-tags/item/js/prod/tag.item.js?ver=2.7.0&#038;fver=20180625011100'></script>
<script type='text/javascript' defer='defer' src='https://www.never-giveup.net/wp-content/plugins/simple-lightbox/template-tags/ui/js/prod/tag.ui.js?ver=2.7.0&#038;fver=20180625011100'></script>
<script type='text/javascript' defer='defer' src='https://www.never-giveup.net/wp-content/plugins/simple-lightbox/content-handlers/image/js/prod/handler.image.js?ver=2.7.0&#038;fver=20180625011059'></script>

footerに近いところにありました。

ご自分のLightboxプラグインのスクリプトが全体のどの辺にあるかチェックしてみましょう。

Lightboxプラグインを読み込む場所は、なるべくfooterに近いほうが他のプラグインから干渉を受けません。

たいていのLightbox系プラグインは、設定でheaderかfooterを選択できます。

2.リンクが切れてないか確認する。

プラグインのリンクを見つけたらクリックしてリンクが切れてないか確認しましょう。

3.スクリプトコードにdeferを加える。

本体のjqueryの後のスクリプトを順番よく読み込む為に「defer」を用いると良いでしょう。
deferを用いると書かれた順番にスクリプトが実行されます。

プラグインAsync JavaScriptで実装できます。
必ず設定で本体のjqueryを除外設定とすることがポイントです。

<script type='text/javascript'  defer='defer' src='https://www.never-giveup.net/wp-content/plugin/jquery-colorbox/jquery-colorbox.js'></script>

jquery.js は一番最初に読み込むスクリプト。
asynk deferを使い除外設定する。
lightbox系スクリプトは、footerに近いところで読み込むようにします。

<script type='text/javascript' src='https://www.never-giveup.net/wp-includes/js/jquery/jquery.js'></script>

画像リンクを確認しよう

どの画像に対し、lightboxを適用するのか指定する必要があります。
プラグインによって変わりますが、リンク(rel)の指定かクラスの指定が必要です。
rel=”lightbox” data-rel=” lightbox” (HTML5からはdataで)
(グループにする場合は、”lightbox-任意の文字列”)

<a href="https://www.never-giveup.net/images/2477.jpg" data-rel="lightbox"/><img src="https://www.never-giveup.net/images/2477.jpg" title="タイトル" alt="タイトル"/>

↓これは最新のJetPackの画像リンクです。写真のexif(meta情報)までご丁寧に読み込んでいます。そのためやたらに長～～くなっています。

<a href="http://https://www.never-giveup.net/images/2014/02/IMG_3407_r.jpg" data-rel="lightbox-gallery" class=""><img data-attachment-id="1595" data-orig-file="https://www.never-giveup.net/images/202/IMG_3407_r.jpg" data-orig-size="1600,1200" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;5&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;Canon PowerShot SX210 IS&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1364009619&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;21.135&quot;,&quot;iso&quot;:&quot;80&quot;,&quot;shutter_speed&quot;:&quot;0.002&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="IMG_3407_r" data-image-description="" data-medium-file="https://www.never-giveup.net/images/2014/02/IMG_3407_r-300x225.jpg" data-large-file="https://www.never-giveup.net/images/2014/02/IMG_3407_r-1066x800.jpg" src="https://www.never-giveup.net/images/2014/02/IMG_3407_r-646x485.jpg" width="646" height="485" align="left" title="IMG_3407_r" scale="0" class="tc-smart-load-skip tc-smart-loaded" style="width: 646px; height: 481px; display: block;"></a>

動かない場合はソースを読んで画像リンクを確認しましょう。

リンクにlightboxの文字列がないときはWPの編集画面で画像を編集するエディター↓で指定できます。

リンクrelにlightboxを書き加えます。

ギャラリーの場合は個別の画像に属性を付けられません。
テーマに変更を加える必要があります。

テーマの function.php に以下のフィルターを加え、画像リンクを置き換えます。

引用元

add_filter('the_content', 'my_addlightboxrel'); 
function my_addlightboxrel($content) {        
　　　global $post;        
　　　$pattern ="/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";        
　　　$replacement = '<a$1href=$2$3.$4$5 data-rel="lightbox" title="'.$post->post_title.'"$6>';        
　　　$content = preg_replace($pattern, $replacement, $content);        
　　　return $content; 
}

このコードは元の画像リンクを差し替えます。

※function.php　に手を加える場合、事前にコピーを保存しておきましょう。
最悪、テーマが壊れ、サーバーに戻れなくなります。

また、プラグインによっては投稿内の画像にCSSクラスを指定し、lightbox効果を指定できるものもあります。(プラグインの仕様によりいろいろ)

.entry-content img

.archive img　(アーカイブページ画像)

.post img　(シングルページ画像)

.page img

ギャラリーに使用する場合には

.gallery img

.tiled-gallery-item img(JetPackタイルギャラリー用)