プラグインに頼らないlightbox2の運用
2019/1/21 21:47:17作成
次に写真などの表示にlightbox2を導入し、同窓会の写真をギャラリーにて掲載する方法です。これは、lightbox2のプラグインをインストールすれば簡単な導入が可能で、関連するいくつかのプラグインを試してみましたがいまいち気に入ったものがなく、オリジナルのlightbox2をプラグインなしで利用することにしました。ここではサイトにスクリプトJQueryを設置しているという前提です。
手順
1.lightbox2を取得する
lightbox2をダウンロード（https://github.com/lokesh/lightbox2/）し、必要フォルダ、ファイルをFTPクライアントソフトを使ってサーバーに設置します。実際に使うのは解凍されたsrcフォルダ内にあるcssフォルダ,imagesフォルダ,jsフォルダのみです。それぞれを以下の場所に設置します。
設置場所
2.lightbox2をサイトに反映させる
次にサイトでlightbox2が利用できるようにします。
元のテーマのheader.phpをコピーし、<head>～</head>の</head>の直前に次の内容を追加したものを同じく以下の場所に設置します。
追加コード（赤い字の部分です）
設置場所
3.lightbox2の自動起動
以上の設定だけでは写真を掲載するたびにdata-title="タイトル名" data-lightbox="グループ化名"を記述しなければなりません。タイトル名はさておいて写真掲載時にリンク先を設定しただけで自動でlightbox2が起動するようにするには、元となるテーマ名_child内のfunctions.phpに以下のコードを追加する必要があります。実際に使ってみるとUltimate Member一覧表の写真もlightbox2が中途半端に起動するため、対応するページ番号のみを指定しそれ以外は起動しないようにしてみました。
functions.phpに追加するコード
なお、ギャラリーで写真掲載する際はギャラリー設定でリンクに添付ファイルのページを設定する必要があります。
手順
1.lightbox2を取得する
lightbox2をダウンロード（https://github.com/lokesh/lightbox2/）し、必要フォルダ、ファイルをFTPクライアントソフトを使ってサーバーに設置します。実際に使うのは解凍されたsrcフォルダ内にあるcssフォルダ,imagesフォルダ,jsフォルダのみです。それぞれを以下の場所に設置します。
設置場所
public_html/ホームページ/wp-content/themes/元となるテーマ名_child/cssフォルダ,imagesフォルダ,jsフォルダ2.lightbox2をサイトに反映させる
次にサイトでlightbox2が利用できるようにします。
元のテーマのheader.phpをコピーし、<head>～</head>の</head>の直前に次の内容を追加したものを同じく以下の場所に設置します。
追加コード（赤い字の部分です）
<head class="no-js">
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php endif; ?>
<?php wp_head(); ?>
<link href="<?php echo get_stylesheet_directory_uri() ?>/css/lightbox.css" rel="stylesheet" />
<script src="<?php echo get_stylesheet_directory_uri() ?>/js/lightbox.min.js"></script>
</head>設置場所
public_html/www.example.com/wp-content/themes/元となるテーマ名_child/上記の編集したheader.php3.lightbox2の自動起動
以上の設定だけでは写真を掲載するたびにdata-title="タイトル名" data-lightbox="グループ化名"を記述しなければなりません。タイトル名はさておいて写真掲載時にリンク先を設定しただけで自動でlightbox2が起動するようにするには、元となるテーマ名_child内のfunctions.phpに以下のコードを追加する必要があります。実際に使ってみるとUltimate Member一覧表の写真もlightbox2が中途半端に起動するため、対応するページ番号のみを指定しそれ以外は起動しないようにしてみました。
functions.phpに追加するコード
//画像リンクのAタグをLightboxに対応するように付け替え
function add_lightbox_property( $content ) {
//プレビューやフィードモバイルなどで遅延させない
if( is_feed() || is_preview() )
return $content;
//既に適用させているところは処理しない
if ( false !== strpos( $content, 'data-lightbox="image"' ) )
return $content;
//Lightboxに対応するページのみ（149,152）指定する
if( is_page( array( 149,152 ) ) ){
//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 );なお、ギャラリーで写真掲載する際はギャラリー設定でリンクに添付ファイルのページを設定する必要があります。
投票数:57
平均点:3.51
