WordPressプラグインでphotoをクリックするとじわーっと大きくなるlightboxを設置したく、プラグインを探し設置しました。しかし、いまいち使い方が良く分からない上に英語表記で英訳しないとなかなか理解しがたいし他にも同様のプラグインが色々あり選択するのも一苦労です。そこで、プラグインに頼らずもっと単純に設置できないかとGnaviモジュールlightboxの改良を参考にして考えたものが次のようなものです。
設置方法
1.ダウンロード
lightbox2を公式サイトからダウンロードします。
2.ファイルの設置
ダウンロードしたsrcフォルダ内の3つのフォルダ（css,images,js）をWordPressのフォルダ（wp-content→theme→利用中の子テーマ）の中に設置します。
3.コードの設置
子テーマのフォルダ内に本テーマのheader.phpをコピペし、このファイル内の<head>～</head>の間に以下のコードを追加します。
|
1 2 3 4 5 |
<head> ････････････ <link href="css/lightbox.css" rel="stylesheet" /> <script src="js/lightbox.min.js"></script> </head> |
4.投稿での記述方法
XOOPSの中で一番のお気に入りはで実際に利用したコードです。
|
1 2 3 |
<a href="http://www.ailove60.com/wp-content/uploads/2017/02/gnavim1.jpg" data-title='ソロツーリングと気ままな旅リスト' data-lightbox='XOOPS' target="_blank"> <img class="alignnone size-medium wp-image-548" src="http://www.ailove60.com/wp-content/uploads/2017/02/gnavim1-253x300.jpg" alt="" width="253" height="300" /></a> |
コードの data-title=’画像のタイトル’ data-lightbox=’グループ名’ とすれば複数の画像でグループ名を統一することによって順次画像送りが可能になります。
上記の方法ではHTMLでの編集が必要となります。自動的に適用する場合は子テーマのfunctions.php内に以下のコードを設置します。ただし、この方法では画像のタイトルは表示されません。また、投稿の際に画像リンクにメディアライブラリを指定する必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//画像リンクのAタグをLightboxに対応するように付け替え function add_lightbox_property( $content ) { //プレビューやフィードで遅延させない if( is_feed() || is_preview() ) return $content; //既に適用させているところは処理しない if ( false !== strpos( $content, 'data-lightbox="image"' ) ) return $content; //Aタグを正規表現で置換 $content = preg_replace( '/<a([^>]+?)>\s*(<img[^>]+?>)\s*<\/a>/',//Aタグの正規表現 '<a${1} data-lightbox="image">${2}</a>',//置換する $content );//投稿本文（置換する文章） return $content; } add_filter( 'the_content', 'add_lightbox_property', 11 ); |