WordPressにはメディアライブラリに保存した画像を一覧表示する【ギャラリー】という機能があります。でも実際に使っている方は少ないかもしれません。ギャラリーは作れるけど都度画像を選択したりする必要がある（いちいち設定しなければならない）のが使わない最大の理由ではないでしょうか？
そこで登場するのがギャラリー系のプラグイン。いろいろな画像効果もあるし、画像のまとまりを作ってショートコードで投稿などに挿入すれば、プラグインの管理画面で画像を入れ替えるだけだから便利！！ですよね？でも・・・結局は画像の入れ替えが面倒になってそのまま・・・なんてことになっていませんか？？
また、ギャラリー系のプラグインは
- メディアライブラリの画像に紐づけて管理するもの
- メディアライブラリの画像を特定のフォルダへコピーして管理するもの
の２種類があって、前者では画像を削除すると不具合が起こることがあり、後者ではどんどんファイルが増えてサーバーを圧迫することにもつながりますから一長一短です。
私も長くギャラリー系プラグインのお世話になりましたが、やっぱり画像のリフレッシュが面倒で放置となるパターンがほとんどです。
そこで考えたのが画像をアップロードするときに設定さえしておけば勝手に画像がリフレッシュできるギャラリーが作れないか？ということ。
具体的に書くと
- 画像にカテゴリーを設ける（通常の投稿カテゴリーとは別にする）
- WordPress標準ギャラリーを使ってカテゴリーに含まれる画像のギャラリーを自動更新で表示する
- ギャラリー画像がクリックされたときはライトボックス（拡大）表示する
を実現するということになります。普通のメディアライブラリの画像編集でカテゴリーに入れたり外したりするだけで勝手に画像が追加されたり削除されたりするギャラリーが作れ、しかもギャラリーの小さな画像をクリックすると拡大表示やスライドショー表示がされる、願ったりかなったりの機能です。
と言ってもこれを実現するのに難しいコードなんか書く知識もありませんから、WordPressと言えばプラグイン！！ということでプラグインを２つ使って作成する方法を紹介します。
おっと、紹介する前にどんな感じになるのかが気になりますよね？私が管理・運営している日記サイト【Ordinary Life】というサイトのモモのフォトアルバムおよびココのフォトアルバムで実際にこの方法を使って写真アルバムを表示させています。
画像をアップロードしたら写真集に載せたい場合だけ画像カテゴリーを設定すれば、ハイ！！自動更新の写真集の出来上がり！！メンテナンスが非常に楽になりました。
個人のサイトのフォトアルバムでも使えますし、不動産系のサイトや中古車販売店などの画像紹介でも使えると思います。
標準の画像にカテゴリーを追加してギャラリー表示する方法
画像にカテゴリーを設けるプラグインはいろいろあるようですが、標準ギャラリーをカテゴリーから自動抽出できるものはなかなかありませんでしたがついに発見！！プラグイン名は【Media Library Categories】です。
早速これを使って画像のカテゴリー分けとギャラリーでの表示を行っていきます。
プラグイン有効化後に１手間かける
【Media Library Categories】を有効化したらまず行うことは、通常の投稿カテゴリーとの分離。これをしないと表示画面のカテゴリー一覧などに画像のカテゴリーまで表示されてしまうので絶対にやっておくべきカスタマイズです。
初心者の方にはちょっとドキドキするかもしれませんが、テーマのfunctions.phpを開き
/*** Media Library Categoriesのカテゴリーを通常と分離 ***/
add_filter('wpmediacategory_taxonomy' , function(){return 'category_media';} );というコードを１行追加するだけの作業です。この方法、実はプラグイン公式紹介ページのFAQに記載されているのですが見落としている方も多いかもしれません。
ちなみにWordPressのバージョン4.9以降ではテーマファイルの更新ができない！！事態が発生することもあるので
を参考に対処してくださいね。
プラグインの設定自体はこれでおしまい！あとはダッシュボードメニューの【メディア】をマウスオーバーすると「カテゴリー」という項目が増えていますので通常の投稿と同様にカテゴリーを設定して、画像１つ１つにカテゴリーを設定していくだけです。
※画像カテゴリーのスラグは半角英数字にしておいた方が管理が楽ですしギャラリーを表示する際に間違いが起こりにくいと思います
カテゴリーで絞り込んだ自動更新ギャラリーの設置
WordPress標準のギャラリーは投稿や固定ページに
[gallery ids=""]というショートコードを挿入することで表示されます。ids=というところに画像のIDを入力すればその数の画像が並んだギャラリーを作ることができます。
今回はカテゴリーに属した画像をすべて表示するので少しコードを変更します。
[gallery category = "カテゴリーのIDまたはスラグ" size = "medium" columns = "4" order = "DESC" orderby = "post_date" link="file"]※WordPress5.0以降でブロックエディタを使用している場合は、ショートコードブロックへ上記ショートコードを挿入してください（クラシックブロックでは不具合が出ることがあります）
急にショートコードが長くなりましたね。必要なのは「category = “画像カテゴリーのIDまたはスラグ”」の部分だけです。ここに先ほど作成したカテゴリーのIDもしくはスラグを入力します。
ではその他の要素（パラメーター）についてちょこっと解説します
size = “medium”
一覧表示される画像のサイズです。「thumb(小)」「medium(中)」「large(大)」「full(元画像の大きさ)」から指定します。ページの幅やカラム（列）数により変更しても拡大縮小されない場合があります
columns = “2”
ギャラリー表示する列数です
order = “DESC”
画像の並び順です。「ASC(昇順)」「DESC(降順)」から選択します。
orderby = “post_date”
画像の並び替えに使う要素です。通常は画像のアップロード日である”post_date”でしょう。
link=”file”
このパラメーターの必要性については後述します
列数指定したのに表示されない、大きな画像が表示されてしまう、全部縦並びになってしまうときは
WordPressのバージョンの問題やテーマの問題、他のプラグインとの競合などにより、
- 列指定したのに全部の画像が縦並びに表示されてしまう
- 大きな画像が縦並びに表示されてしまう
といった不具合が起こることがあります。上記のように原因はさまざまですが、以下のような対処をしてみてください。
１．WordPress標準のギャラリー表示デザインを停止する
原因の１つに、ギャラリー用のデザインが呼び出されない、もしくは、設定されていない可能性があります。それを解消するために、WordPress標準のギャラリーショートコードに関するデザインを適用しないようにします。
以下のコードをテーマのfunctions.phpの末尾へ追加してください
//本体ギャラリーCSS停止
add_filter( 'use_default_gallery_style', '__return_false' );２．新たにデザインコードをテーマのCSSへ追記する
１の処置でギャラリーショートコードのデザインに関する設定がなくなりましたので、以下のコードをテーマのCSS末尾へ追加して、新たにデザインを与えます
/*-- ギャラリーのデザイン --*/
.gallery { /** ギャラリーを囲むボックス **/
width: 100%;
margin-bottom: 20px !important;
overflow: hidden;
}
.gallery br {display: none;} /** 自動で挿入される clearfix の余白解除 **/
.gallery-item { /** 画像共通のスタイル **/
float: left;
margin-bottom: 0 !important;
}
.gallery-icon { /** 画像を囲む dt のスタイル **/
text-align: center;
}
.gallery-icon img {
width: 100%;
height: auto;
margin-bottom: 10px !important;
}
.gallery-caption { /** キャプション **/
color: #222;
font-size: 12px;
margin: 0 0 10px;
text-align: center;
}
.gallery-columns-1 .gallery-item { /** カラムなし **/
width: 100%;
margin-right: 0;
}
.gallery-columns-2 .gallery-item { /** 2カラム **/
width: 48%;
margin: 0 1%;
}
.gallery-columns-3 .gallery-item { /** 3カラム **/
width: 31.33333%;
margin: 0 1%;
}
.gallery-columns-4 .gallery-item { /** 4カラム **/
width: 23%;
margin: 0 1%;
}
.gallery-columns-5 .gallery-item { /** 5カラム **/
width: 18%;
margin: 0 1%;
}
@media screen and (max-width: 640px) {
/* 640px以下用の記述 */
.gallery-columns-3 .gallery-item, .gallery-columns-4 .gallery-item {
width: 48%;
margin: 0 1%;
}
.gallery-columns-5 .gallery-item {
width: 31.33333%;
margin: 0 1%;
}
}※上記コードについてはWordPress標準のギャラリーのCSSをカスタマイズする方法を参考にさせていただきました。
３．ギャラリーショートコードの画像サイズを再指定する
先程紹介したショートコードの内容で「size = “medium“」とした部分があります。これを一番小さい画像サイズの「size = “thumbnail“」へ変更することで、特に３列表示よりも大きい列数では画像が大きく表示されるのを防ぐことができます。
複数のカテゴリーに紐づいた画像はどうなる？
一応意地悪テストとして複数のカテゴリーに登録した画像をギャラリー表示したらどうなる？というのを試してみました。どちらかだけ表示されたりしたらちょっと残念なので・・・。
結果は・・・どちらのカテゴリーのギャラリーにもきちんと画像が抽出表示されました。大成功！！です。
ギャラリーの画像をクリックされた時にきれいな拡大画像を表示する方法
カテゴライズしたギャラリーを表示できたらOKという方はこの先を見る必要はありません。ここからはもう１歩進んで画像がクリックされたときによりきれいに表示する方法の紹介です。
ギャラリーに表示された小さな画像をクリックしたときに拡大表示などをする効果のことを「Lightbox」と言います。こういう単語が分からないとプラグインを探すのも苦労しますよね？いろいろリリースされていますが今回は【ARI Fancy Lightbox】を使用します。他のプラグインでも実現は可能ですからいろいろ試してみるのも面白いと思います。
Lightbox表示できないときのチェックポイント
WordPress標準のギャラリーを挿入しただけではほとんどのLightbox系プラグインでは正常に動作しないことが多いのご存じですか？決してプラグインが悪いわけではないと思われますので今回使うプラグインでない方も試してみてください。
その前になぜギャラリーでLightbox表示ができないのかを簡単に解説すると、ほとんどのテーマではギャラリー表示された画像をクリックしたときに単独ページで表示するようになっています。
一方通常挿入した写真はクリックしたとき画像のURL(オリジナル画像)を表示するようになっていることが多いです。
Lightbox系のプラグインは画像のURLを開こうとした時初めて動作するためギャラリーの画像がクリックされた時の動作を指示する必要があるのです。
試しにLightbox系のプラグインが動かないと方は通常の画像を挿入して動作するか試してみてください。通常の画像で正常動作するようであれば次の設定を追加することでギャラリーでもきちんと動作するようになる可能性が高いです。
やり方は簡単、通常のギャラリー挿入ショートコードの中に「link=”file”」という要素を追加するだけです（先ほどのショートコードサンプルには既に挿入済です）。
想像ですがなぜこの処理が必要なのか、なぜプラグインの紹介文には記述がないかというと、昔はギャラリー画像がクリックされたときの動作についてテーマ側で制御していなかったため、プラグインを導入するだけでLightboxが機能したからなのでしょう。
【ARI Fancy Lightbox】でもギャラリーのショートコードに【link=”file”】パラメーターを追記すればきちんと動作します。
おまけ ギャラリー表示のキャプションを消す方法
自動更新されるギャラリーはできたし、拡大表示も格好良くなった、めでたしめでたし・・・とはいきません。テーマや環境にもよる部分ではありますが、WordPress標準のギャラリーではキャプション（画像名）が画像の下に表示されるようになっています。
これを表示しておきたい方はそのままの方がいいとは思うのですが、画像だけを並べたい場合にはとても邪魔な存在になります。
そんなときはテーマのCSSに
.gallery-caption {display: none;}を追記すれば消すことができます。また、ギャラリーは個々の画像がdlというタグでリスト化されていますから、画像の上下の隙間が気になるときは
dl {margin: 0px 0;}を追記すれば隙間を極力なくすことができます。
これらのカスタマイズは環境やテーマによるところもありますから実際にはデベロッパーツールなどでどの要素を調べて行ってくださいね。
【ARI Fancy Lightbox】のLightbox表示で画像の拡大をさせないようにする方法
ここまでで、固定ページや投稿へWordPress標準のギャラリー＋ライトボックス表示をさせることはできるようになり、表示したいメディアにカテゴリーの紐づけをしておけば、ノーメンテナンスで画像ギャラリーを管理できるようになりました。が、運用していくうちに、個人的にはもう１つ困ることが出てきました。
それは、「Lightbox(拡大)してスライド表示された画像をクリックすると更に画像が拡大されてしまうこと」です。スライド表示時に画像をクリックすると、結構な倍率で表示され、画像によっては背景まで精細に見えてしまうんです。企業のサイト（不動産などの室内画像）などではこの方が都合がよいかもしれませんが、個人のブログなどではちょっとそこまで拡大されるのは・・と感じるかも知れません。
そこで、テーマのCSSまたは、追加CSSへ以下を追加して、拡大スライド表示時の画像がクリックで拡大されないようにします。
/***** ARI Fancy Lightboxでライトボックス表示時の画像拡大を禁止する *****/
.fancybox-can-zoomIn .fancybox-image-wrap {
cursor: pointer;
pointer-events: none;
}たったこれだけの簡単なコードを追加するだけで、前述したようなクリック＆画像の拡大が無効になります。
ここまでいろいろ説明させていただいた後でいうのも気が引けるのですが、実はこれを１つのプラグインで実現できます。プラグイン名は【Media Library Assistant】です。
ただこのプラグインはちょっと複雑な仕様になっているので設定や設置に戸惑うかもしれません。どうしても１つのプラグインでやりたい方はチャレンジしてみてくださいね。
このページの変更履歴
| 日付 | 変更履歴 |
|---|---|
| 2017年12月 4日 | ページの公開 |
| 2020年12月 2日 | ・コードコピー時に文字化けが起こらないように修正 ・ギャラリーデモページのリンク切れ修正 ・ギャラリーショートコードでうまく表示されない場合の対応方法を追加 |
| 2021年 1月 3日 | ライトボックス表示時に画像をクリックしても拡大されないようにするCSSコードの紹介部分を追加しました |
