Bloosh Company

2021年3月1日

Development>WordPress

WordPressの画像情報を取得してlightgallery.jsのキャプションにする

, ,

サンプルまとめページはこちら

①基本の使い方lightgallery.jsとWordPressの組み合わせ
②アルバムの作り方lightgallery.jsとWordPressの組み合わせ
③アルバム複数設置(各アルバムは独立)lightgallery.jsとWordPressの組み合わせ
④アルバム複数設置(全画像表示)lightgallery.jsとWordPressの組み合わせ
lightgallery.jsの画像が2枚だけのときスライド方向が逆になる
lightgallery.jsの画像が1枚だけの場合サムネイルが表示されない問題

WordPressの画像情報を取得してlightgallery.jsのキャプションにする←いまここ

lightgallery.jsのサムネイル画像のサイズを小さくして動作を軽くする
 
ギャラリーの画像IDを利用して、WordPressに保存した画像情報をlightgallery.jsのキャプションにします。
WordPressのメディアに画像を保存すると、このように画像情報を入力できます。

これらを、lightgallery.jsのギャラリーのキャプションにするには、画像IDを利用します。
 
各サンプルの//画像IDをゲットの下に書きます。

//画像IDをゲット
$id = explode(",", $gallery["ids"])[$cnt];

$attachment = get_post( $id );

$captions = array(
	'alt' => get_post_meta( $id, '_wp_attachment_image_alt', true ),
	'caption' => $attachment->post_excerpt,
	'description' => $attachment->post_content,
	'title' => $attachment->post_title
);

そして、次のポイント。ソースコードに設置したギャラリーのブロックの近辺にこのように書きます。

<a href="<?php echo $src; ?>" data-sub-html="#caption-<?php echo $id ?>">
<span id="caption-<?php echo $id ?>">
	<?php echo $captions["description"]; ?>
</span>
</a>

 
ポイントは、キャプションを記述しているHTMLのセレクタを、data-sub-html=キャプションのブロックのIDと指定することです。
 
キャプションのブロックは、ギャラリーのブロックの外でも中でも大丈夫です。
他のギャラリーと共用してもOKです。

WordPressの画像情報を取得してlightgallery.jsのキャプションにする | ブルーシュカンパニー

<<次の記事

lightgallery.jsのサムネイル画像のサイズを小さくして動作を軽くする

前の記事>>

lightgallery.jsの画像が1枚だけの場合サムネイルが表示されない問題