テック•ワードプレス

WordPressで簡単にPhotoSwipeを利用する方法

2020年12月18日 by single コメントはまだありません

WordPressでサイトを構築し、画像をアップロードしたのですが、縮小されて、格好悪い。しかもクリックしても、拡大されないし、なんだか不便。

そこで、PhotoSwipeを組み込んでみた

WordPressで簡単にPhotoSwipeを利用する方法

このサイトにはPhotoSwipeで写真を表示するようにしてあります。

ギャラリー

  • シロクマ
  • レッサーパンダ

グーテンベルクの「ギャラリー」で写真を追加すると上のようになります。

画像

ペンギン
カピパラ

グーテンベルクの「画像」で写真を追加すると上のようになります。

写真をクリックしてみてください。

写真が拡大され、なおかつ、キャプションが追加されていませんか？

これがPhotoSwipeですね。LightBox見たいですが、わたしは、こちらほうが好きで、特に、スマホ・タブレットではうまく拡大できるのではないでしょうか。

PhotoSwipeを組み込むコード

<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js"></script>
<!-- httpsではなく httpなので、httpsサイトでは利用できません -->
<script type="text/javascript" src="http://free-jquery.com/demo/demo_01/jqueryphotoswipe/js/photoswipe/jquery.photoswipe.js"></script>

<script type="text/javascript"> 
/*//////////////////////////
// PhotoSwipeの設定を追加
//////////////////////////*/
function setPhotoSwipe(){
	try {
		var target = jQuery("figure img");
		if ( jQuery(target).length > 0 ) {

			jQuery(target).each(function(){
				var sImageSrc = jQuery(this).attr("src");
				var oCaption = jQuery(this).parent('figure').find('em');
				var sCaptinText = '';
				if ( oCaption != undefined ) {
					if ( jQuery(oCaption).length > 0 ) {
						var oLabel = jQuery(oCaption)[0];

						sCaptinText = jQuery(oLabel).html();
					}
				}
				if ( sCaptinText == "" ) {
					oCaption = jQuery(this).parent('figure').find('figcaption');
					if ( oCaption != undefined ) {
						if ( jQuery(oCaption).length > 0 ) {
							var oLabel = jQuery(oCaption)[0];

							sCaptinText = jQuery(oLabel).html();
						}
					}
				}
				if ( sCaptinText == "" ) {
					oCaption = jQuery(this).parent().parent().parent().parent('figure').find('.blocks-gallery-caption');

					if ( oCaption != undefined ) {
						if ( jQuery(oCaption).length > 0 ) {
							var oLabel = jQuery(oCaption)[0];

							sCaptinText = jQuery(oLabel).html();
						}
					}
				}
				jQuery(this).wrap('<a href="' + sImageSrc + '" title="' + sCaptinText + '" rel="multiimage"></a>');
			});
		} else {
			var target2 = jQuery("img");
			if ( jQuery(target2).length > 0 ) {
				jQuery(target2).each(function(){
					var sImageSrc = jQuery(this).attr("src");
					jQuery(this).wrap('<a href="' + sImageSrc + '" rel="multiimage"></a>');
				});
			}
		}
		jQuery("body").wrapInner("<div id='dvSwipe' />");
		jQuery("#dvSwipe").photoSwipe();
	} catch(e){
	}
}
jQuery(document).ready(function() {
	setPhotoSwipe();
});

</script>

ソース説明

jQuery

まず、jQueryを読み込みましょう。これがないと動きません

<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>

PhotoSwipe

次にPhotoSwipeのライブラリとCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js"></script>

jQuery PhotoSwipe

PhotoSwipeを簡単に利用できるようにライブラリを作ってくださった方がいらっしゃいます。それを利用することにします。

<script type="text/javascript" src="http://free-jquery.com/demo/demo_01/jqueryphotoswipe/js/photoswipe/jquery.photoswipe.js"></script>

ただ、このリンクは、httpのリンクなので、SSL化されたサイト（httpsのサイト）で、利用すると、httpsとhttpのリンク混在で、ライブラリを読み込めないエラーが発生することがあります。

また、このリンクはデモページのリンクなので、実際、外部サイトで利用するために公開されたリンクではありません。

以下の公式サイトでjsファイルをダウンロードできるので、それをダウンロードして利用するのが正しい利用法ですね。

jQuery PhotoSwipeの利用の仕方

jQuery PhotoSwipeは便利なのですが、なぜ、便利かというと、PhotoSwipeを適用したいエリア（DIVなど）を指定すれば簡単に適用できます。

例えば以下のコードだと、エリアB(AreaB）がPhotoSwipeの適用範囲になります。

<!-- エリアA -->
<div id="AreaA">
   <img src="photoA1.jpg" />
   <img src="photoA2.jpg" />
   <img src="photoA3.jpg" />
</div>
<!-- エリアB -->
<div id="AreaB">
   <img src="photoB1.jpg" />
   <img src="photoB2.jpg" />
   <img src="photoB3.jpg" />
</div>
<!-- エリアC -->
<div id="AreaC">
   <img src="photoC1.jpg" />
   <img src="photoC2.jpg" />
   <img src="photoC3.jpg" />
</div>

<script>
jQuery("#AreaB").photoSwipe();
</script>

つまり「jQuery(“#AreaB”).photoSwipe();」のように適用したいエリアを指定してあげれば、PhotoSwipeが適用されます。

サンプルでカスタマイズしないといけない点

サンプルでの以下の行をご自身のサイトに応じて修正してみてください。

jQuery("body").wrapInner("<div id='dvSwipe' />");
jQuery("#dvSwipe").photoSwipe();

このサンプルでは「body」タグ内の全領域をPhotoSwipeの適用範囲としてあります。シンプルなサイトならこれでいいかもしれませんが、ページによっては、サイトアイコンにまで適用されてしまい、意図しない動作になってしまうかもしれません。

ですので、どこのエリアにPhotoSwipeを適用すべきかは、多分、カスタマイズ・修正が必要になると思います。その点だけ注意してもらえればと思います。

キャプション自動設定

それ以外の長々としたコードは、キャプションの自動設定のコードになります。ご自由に利用してもらえればと思います。このコードを利用すると、グーテンベルグの「画像」や「ギャラリー」でキャプションを設定すると、自動的にPhotoSwipeでもキャプションを設定される設定になります。

２行で実現する方法

<script type="text/javascript" src="https://code.jquery.com/jquery.min.js" ></script>
<script type="text/javascript" src="https://www.single-life.tokyo/js/PhotoSwipeAutoCaption.js"></script>

この２行をWordPressの[外観]→[テーマエディタ]から、テーマファイルの中からheader.phpやfooter.phpを選択して、HTMLのコードの中にコピーしてもらえれば、うまく、動作するようになると思います。