プラグインに頼らないlightboxの設置

投稿日: カテゴリー

WordPressプラグインでphotoをクリックするとじわーっと大きくなるlightboxを設置したく、プラグインを探し設置しました。しかし、いまいち使い方が良く分からない上に英語表記で英訳しないとなかなか理解しがたいし他にも同様のプラグインが色々あり選択するのも一苦労です。そこで、プラグインに頼らずもっと単純に設置できないかとGnaviモジュールlightboxの改良を参考にして考えたものが次のようなものです。

設置方法
1.ダウンロード
lightbox2を公式サイトからダウンロードします。

2.ファイルの設置
ダウンロードしたsrcフォルダ内の3つのフォルダ(css,images,js)をWordPressのフォルダ(wp-content→theme→利用中の子テーマ)の中に設置します。

3.コードの設置
子テーマのフォルダ内に本テーマのheader.phpをコピペし、このファイル内の<head>~</head>の間に以下のコードを追加します。

4.投稿での記述方法
XOOPSの中で一番のお気に入りはで実際に利用したコードです。

コードの data-title=’画像のタイトル’ data-lightbox=’グループ名’ とすれば複数の画像でグループ名を統一することによって順次画像送りが可能になります。

上記の方法ではHTMLでの編集が必要となります。自動的に適用する場合は子テーマのfunctions.php内に以下のコードを設置します。ただし、この方法では画像のタイトルは表示されません。また、投稿の際に画像リンクにメディアライブラリを指定する必要があります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください