プラグイン無しでWordPressにLightbox「PhotoSwipe」を実装しよう!

javascriptの「LightBox」系プラグインは数多く存在しますが、その中でもLightBoxの決定版とも言える「PhotoSwipe」(スマホ対応)をWordPressプラグインを使用せずに、コードのみで実装したいと思います。
コードで実装したい経緯として、過去にWordpressプラグインで機能追加しようとした際にうまく動作しなかった記憶があるため、Wordpressの「PhotoSwipe」プラグインに対しての拒絶反応も少なからずあります…。

そして今回、コードを書こうと思ったのですが、先にやりたい事をやっていた方が居らっしゃったので、コチラのサイトで紹介されていたものを参考に実装する事にしました!

 

 

動作サンプル

※クリックで画像を拡大、スワイプで画像切り替えも出来ます。

 

仕様・前提

・有効なテーマディレクトリ内にPhotoSwipe本体を設置してください(下記コードでは”./library/photo-swipe/”を設置)
・LightBox表示したい画像は「メディアファイル」へリンクを設定している必要があります

 

コード実装

functions.phpと、テーマで使用しているメインのjsファイルに下記コードを追加します。

 

functions.php用コード

※46-47行目のCSSファイルのPATH、49-50行目のjsファイルへのPATHは環境に合わせて変更して下さい

 

Javascriptコード

 

最後に

個人的に現時点で至高のLightboxだと確信している「PhotoSwipe」のWordpressへの実装メモでした。
この辺りの処理は、一度実装してしまえば後々編集する必要も無い箇所なので、コードを編集出来る方はこういった実装もありです!
簡単な処理はプラグインに頼り切らず、トラブルが起きた際に自身で対処出来るようにしておきたいですね!