ブログ記事内の画像リンクにjQueryプラグインのLightboxを実装しましたのでご紹介します。Lightboxの実装についてはWordPressのプラグインが多数存在しますが、やはり今回もプラグインなしでやってみました。
公式サイトよりダウンロード
Lightboxの公式サイトよりデータ一式をダウンロードします。
サイト上部の「DOWNLOAD」ボタンをクリックするとlightbox2-master.zipがダウンロードされますので解凍してください。ダウンロードしたフォルダ内にはいくつかファイルがありますが、使用するのはdistフォルダ内の以下のファイルです。
- cssフォルダ
- lightbox.css
- jsフォルダ
- lightbox.js
- imagesフォルダ
- close.png
- loading.gif
- next.png
- prev.png
cssフォルダにはlightbox.min.css、jsフォルダにはlightbox.min.jsという圧縮済みのファイルもそれぞれ入っていますのでカスタマイズせずにデフォルトのまま使う方はこちらでも大丈夫です。それぞれのファイルをサーバーにアップしといてください。
HTMLを編集
サーバーへのアップロードが完了したら次はHTMLの編集です。headタグ内の任意の場所に以下のコードを追加します。
<link rel="stylesheet" href="css/lightbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/lightbox.js" type="text/javascript"></script>各ファイルへのパスはサイトに合わせて適宜変更してください。
画像にリンクするaタグにrel=”rightbox”を追加
ファイルのアップロード、HTMLの編集が終わったら、次は画像にリンクするaタグにrel="rightbox"を追加します。ところが、既存のaタグに一つ一つ追加していくのはかなりの労力なので、functions.phpに以下のコードを追加します。
// 画像リンクにrel="lightbox"を追加
add_filter('the_content', 'rellightbox_replace');
function rellightbox_replace ($content){
global $post;
$pattern = "/<a(.*?)href=('|")(.*?).(bmp|gif|jpeg|jpg|png)('|")(.*?)>/i";
$replacement = '<a$1href=$2$3.$4$5 rel="lightbox"$6>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}これで完成です。以下にサンプルとして画像リンク貼っときます。
よく見かけるやつですね。
※R2.8.19追記 現在は一時的に実装を停止しています。
参考にした記事
実装方法は上の記事で理解できたんですが、肝心のrel="lightbox"をどうやって過去記事にも追加するかが謎だったので実装していませんでした。ところが、以下の記事を見つけたので一気に導入できました。
これで過去記事にもこれから書く記事にも画像リンクには自動的に付与されるのでとても便利です。
最後に
いかがでしたでしょうか。できればグループ化も自動的にできればいいんですが、とりあえずやり方が分からないので今のところは後回しです（笑）グループ化するにもグループ名をどうやって自動挿入するか、グループ名をどうするか、その辺がうまいことできればいいんでしょうけど今の私には皆目見当もつきません。でも見つけたら実装したいですね。