Bloosh Company

2021年2月22日

Development>WordPress

①基本の使い方lightgallery.jsとWordPressの組み合わせ

, , , ,

2021.9.23 追記
lightgallery.jsが新しくなりました。
Ver2の使い方はこちら
 
 

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

①基本の使い方lightgallery.jsとWordPressの組み合わせ←いまここ

②アルバムの作り方lightgallery.jsとWordPressの組み合わせ
③アルバム複数設置(各アルバムは独立)lightgallery.jsとWordPressの組み合わせ
④アルバム複数設置(全画像表示)lightgallery.jsとWordPressの組み合わせ
lightgallery.jsの画像が2枚だけのときスライド方向が逆になる
lightgallery.jsの画像が1枚だけの場合サムネイルが表示されない問題
WordPressの画像情報を取得してlightgallery.jsのキャプションにする
lightgallery.jsのサムネイル画像のサイズを小さくして動作を軽くする
 
まずは公式サイトからlightgallery.jsのプラグインをゲットします。
画面右上のタブもしくは「View on github」をクリックしてgithubへ。
ZIPでダウンロードします。

必要なファイルは、基本的には

です。下の3つは無くてもまあ動きます。
minのほうがより軽量です。
 
他に、サムネイル機能を使うときは

です。画像をクリックして大きくしたとき、下部に他の画像を小さく表示するための機能です。
動作サンプルで確認してね。
 
また、同じページ内に複数ギャラリーを設置するときは

が必要です。
 
ダウンロードしたZIPフォルダを解凍したら、WordPressを設置しているサーバー上のトップ/wp-content/themes/該当テンプレートフォルダの中に、必要なファイルをアップロードします。

こんな感じ。

 
そしたら、読み込みの設定をします。
WordPressのheader.phpにこのように書きます。
(本当は wp_enqueue_script()とかで読み込むのが良いけど、分かりやすくしてます)

<html>
	<head>

		~~~

		<link type="text/css" rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/css/lightgallery.css" />


		<script src="<?php echo get_template_directory_uri() ?>/js/lightgallery.js"></script>

		<!-- ↓追加機能を使う場合は、lightgallery.jsの下に読み込む -->
		<script src="<?php echo get_template_directory_uri() ?>/js/lg-hash.js"></script>
		<script src="<?php echo get_template_directory_uri() ?>/js/lg-thumbnail.js"></script>
	</head>
	<body>
		~~~

 
 
WordPressの管理画面で記事作成。そこでギャラリーを設置します。

メディアを追加⇒左端のギャラリーを作成をクリック。
ギャラリーにしたい画像を数枚選んで、右下のギャラリーを作成ギャラリーを挿入をクリックして挿入します。
記事画面には、
[gallery ids="3709,3707,3687"]
このようなショートコードが挿入されているはずです。
 
最後に、記事のテンプレートファイルのソースコードに手を加えます。

<?php if ( get_post_gallery() ) : ?>

	<div id="gallery0">

		<?php

		$gallery = get_post_gallery( $post, false );

		foreach( $gallery['src'] as $cnt => $src ) :

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

		?>

			<a href="<?php echo $src;?>">

				<img src="<?php echo wp_get_attachment_image_src($id, "thumbnail")[0];?>" >
			</a>

		<?php endforeach; ?>

	</div>

<?php endif?>

 
ループ内に記述してください。
まず、ギャラリーが1つしかないのでget_post_gallery()でギャラリーを取得します。
<a href="">のなかに大きい画像を指定します。
これがクリックしたとき大きく表示される画像になります。
<img src="">の中に、ページで通常表示してる画像を指定します。
wp_get_attachment_image_src($id, "thumbnail")でサムネイルサイズの画像を取得できます。配列なので0番目を指定して取得。
サイズは、管理画面の設定メディアで設定してるサイズを指定できます。
 

<script type="text/javascript">

	lightGallery(document.getElementById('gallery0'), {
		thumbnail:true
	});
</script>

ギャラリーを取得したら、ソースコードの最後のあたりにこれを書きます。
ギャラリーを囲ってるブロックをIDで指定しています。
また、thumbnail:trueでサムネイル機能をオンにしてます。
動作サンプルで確認してね。

①基本の使い方 – lightgallery.jsとWordPressの組み合わせ #WordPress #JavaScript #lightgalleryjs #ギャラリー #画像 #軽量化

<<次の記事

②アルバムの作り方lightgallery.jsとWordPressの組み合わせ

前の記事>>

lightgallery.jsの画像が2枚だけのときスライド方向が逆になる