ずっと気になっていた。
お客様から任されているWEBサイトの画像ポップアップ機能が、WordPressのバージョンアップと共に消滅してしまったのを。
普通に画像は表示されるし、クリックで拡大表示もされるし、何よりも多分お客様も気付いていないだろうと思っていたのと、愛犬看取り～メンタルおかしい状況が続いてどうにもできなかったのもあって、放置していた。
でも、ちょっと元気が出て来たのでせめてローカルで試行錯誤しようと頑張ってみました。
２時間くらい頑張った…。
多分私以外誰も得しないから、続きに収納します。
2017年頃、このブログのリンク付き画像にはColorboxと言うjQueryによる仕組みを実装しポップアップされるようになっています。
前回は、レンタルブログサービスのライブドアブログでの設定方法でしたが、今回はWordPressと言うCMSへの実装。
今回の場合、プラグイン「jQuery Colorbox」が２年以上放置され、コアであるWordPressのアップグレードについて行けず機能を失ったと思われます。
手順は
１．公式サイト「Colorbox – a jQuery lightbox」
から「Download」ボタンでダウンロード保存する。適宜解凍（展開）する。
２．別途「colorbox」フォルダーを作りその中に、
必要なフォルダー「images」と、
必要なファイル
jquery.colorbox-min.jsと
をまとめる。※〇はデザインの番号。私は２が好きです。
３．functions.phpに追記
投稿画像リンクに特定のクラス名を自動的に付与する。
これはcolorboxと言うクラスが付与されるようにしています。（4行目）
リンク先が画像ではない場合はポップアップされない。
add_filter( ‘image_send_to_editor’, ‘addClass’ );function addClass( $html ) {$class = ‘colorbox’;if(preg_match(‘/<a href=”https?:\/\/+[-_.\/a-zA-Z0-9]+(?:png|jpg|jpeg|gif)”><img/’ , $html)){$html = str_replace( ‘<a ‘, ‘<a class=”‘. $class. ‘” ‘, $html );}return $html;}
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script><script type=”text/javascript” src=”<?php echo get_template_directory_uri(); ?>/js/colorbox/jquery.colorbox-min.js”></script><link href=”<?php echo get_template_directory_uri(); ?>/js/colorbox/colorbox.css” rel=”stylesheet” type=”text/css”><script>$(function() {$(“.colorbox”).colorbox({maxWidth:”98%”,maxHeight:”98%”,opacity: 0.7});});</script>
maxHeightは、画像が小さくなりがちなので、コメントアウトか削除してもいいかも。
参考サイト
「[WordPress] 画像挿入時にリンク先が画像の時のみ、aタグに独自クラスを付与する方法」
「[WordPress]メディアファイルへリンクしている画像をLightbox対応する」
「ColorboxでjQueryのモーダルウィンドウを実装する方法」
感謝の意を…ありがとうございます。
こうやってまとめると、どうってことないような簡単な事に思えるけど、参考サイト様にたどり着くのが本当に大変でした。
ただ、過去投稿した画像はポップアップしないので、colorboxクラスを追加していくか、放置するか…まぁ依頼された仕事じゃないから放置でいいかな…😭
