この記事を読むのに必要な時間は約 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&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&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&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&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&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&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&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>
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="{"aperture":"5","credit":"","camera":"Canon PowerShot SX210 IS","caption":"","created_timestamp":"1364009619","copyright":"","focal_length":"21.135","iso":"80","shutter_speed":"0.002","title":""}" 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;
}このコードは元の画像リンクを差し替えます。
最悪、テーマが壊れ、サーバーに戻れなくなります。
また、プラグインによっては投稿内の画像にCSSクラスを指定し、lightbox効果を指定できるものもあります。(プラグインの仕様によりいろいろ)
.entry-content img
.archive img (アーカイブページ画像)
.post img (シングルページ画像)
.page img
ギャラリーに使用する場合には
.gallery img
.tiled-gallery-item img(JetPackタイルギャラリー用)
それでも動かない場合
諦めましょう。
冗談です。(≧≦)
たぶん上のことを一つずつチェックすれば動くと思います。
それでも動かない場合、きっと干渉しているプラグインがあると思いますので、ソースを見て本体のjqueryの読み込みの後に続くスクリプトを確認してください。
すべてのプラグインを停止してLightBoxのプラグインだけ有効にします。
ページを開いてLightBoxが動くか確認します。
動いたら他のプラグインに干渉していたということです。
地道な作業ですが、有効にしたいプラグインを１個ずつ有効にしては都度、ページを確認していきます。
動かなくなった(=干渉した)プラグインは使用するのを諦めましょう。
ここまでやって動かない
→ここまでしても動かない場合、テーマに原因があるか壊れています。
WordPressの初期テーマに戻して動かしたいLightBoxプラグインを試してみましょう。
それで動かないときはLightBoxプラグイン自体に原因があります。
LightBox系おすすめプラグイン
少し古いプラグインですが、FancyBox PrettyPhoto SlimBox HighSlide が利用できます。
このプラグインはスライドショーと付くところから写真が多いサイト向けです。
画像クラスを指定して使えるので便利です。筆者の他のサイトで使用しています。
lightboxを組み込み済みのプラグイン。
SwipeBox | prettyPhoto | FancyBox | Nivo Lightbox | Image Lightbox | TosRUs | Featherlight | Magnific Popup
全部で８個の中から選べます。おすすめです。
そして当ブログで長く使用しているSimple Lightboxです。
名前の通りシンプルで使いやすくておすすめ。
以上、LightBoxでした。
