WordPressの標準ギャラリーでカテゴリーから自動抽出&自動更新、画像クリックで拡大表示(Lightbox)をする方法

WordPressにはメディアライブラリに保存した画像を一覧表示する【ギャラリー】という機能があります。でも実際に使っている方は少ないかもしれません。ギャラリーは作れるけど都度画像を選択したりする必要がある(いちいち設定しなければならない)のが使わない最大の理由ではないでしょうか?

そこで登場するのがギャラリー系のプラグイン。いろいろな画像効果もあるし、画像のまとまりを作ってショートコードで投稿などに挿入すれば、プラグインの管理画面で画像を入れ替えるだけだから便利!!ですよね?でも・・・結局は画像の入れ替えが面倒になってそのまま・・・なんてことになっていませんか??

また、ギャラリー系のプラグインは

  1. メディアライブラリの画像に紐づけて管理するもの
  2. メディアライブラリの画像を特定のフォルダへコピーして管理するもの

の2種類があって、前者では画像を削除すると不具合が起こることがあり、後者ではどんどんファイルが増えてサーバーを圧迫することにもつながりますから一長一短です。

私も長くギャラリー系プラグインのお世話になりましたが、やっぱり画像のリフレッシュが面倒で放置となるパターンがほとんどです。

そこで考えたのが画像をアップロードするときに設定さえしておけば勝手に画像がリフレッシュできるギャラリーが作れないか?ということ。

具体的に書くと

  1. 画像にカテゴリーを設ける(通常の投稿カテゴリーとは別にする)
  2. WordPress標準ギャラリーを使ってカテゴリーに含まれる画像のギャラリーを自動更新で表示する
  3. ギャラリー画像がクリックされたときはライトボックス(拡大)表示する

を実現するということになります。普通のメディアライブラリの画像編集でカテゴリーに入れたり外したりするだけで勝手に画像が追加されたり削除されたりするギャラリーが作れ、しかもギャラリーの小さな画像をクリックすると拡大表示やスライドショー表示がされる、願ったりかなったりの機能です。

と言ってもこれを実現するのに難しいコードなんか書く知識もありませんから、Wordpressと言えばプラグイン!!ということでプラグインを2つ使って作成する方法を紹介します。

おっと、紹介する前にどんな感じになるのかが気になりますよね?私が管理・運営している地域猫ちゃんの日記サイト【がんばれ!わが町名古屋の地域猫】というサイトの猫ちゃんたちのプロフィールで実際に使用しています

ここの地域猫ちゃんの中では一番体が小さく痩せています。2015年夏頃腎臓を悪くして、前から管理しているお兄さんのお宅で療養していましたが、腎臓はよくならない(一旦悪くなったら治らない)ものの体調そのものは改善されたので外に出てきた猫ちゃんです。

の一番下にある写真集はここで紹介している方法を使って作成しています。画像をアップロードしたら写真集に載せたい場合だけ画像カテゴリーを設定すれば、ハイ!!自動更新の写真集の出来上がり!!メンテナンスが非常に楽になりました。

スポンサーリンク

標準の画像にカテゴリーを追加してギャラリー表示する方法

画像にカテゴリーを設けるプラグインはいろいろあるようですが、標準ギャラリーをカテゴリーから自動抽出できるものはなかなかありませんでしたがついに発見!!プラグイン名は【Media Library Categories】。

【Media Library Categories】プラグインの概要は

【Media Library Categories】はメディアライブラリにアップロードされた画像やファイルをカテゴリー分けして管理できるようにするプラグインです。

をご覧ください。早速これを使って画像のカテゴリー分けとギャラリーでの表示を行っていきます。

プラグイン有効化後に1手間かける

【Media Library Categories】を有効化したらまず行うことは、通常の投稿カテゴリーとの分離。これをしないと表示画面のカテゴリー一覧などに画像のカテゴリーまで表示されてしまうので絶対にやっておくべきカスタマイズです。

初心者の方にはちょっとドキドキするかもしれませんが、テーマのfunctions.phpを開き

add_filter('wpmediacategory_taxonomy' , function(){return 'category_media';} ); 

というコードを1行追加するだけの作業です。この方法、実はプラグイン公式紹介ページのFAQに記載されているのですが見落としている方も多いかもしれません。

ちなみにWordpressのバージョン4.9以降ではテーマファイルの更新ができない!!事態が発生することもあるので

Wordpressのバージョンを4.9にしてからテーマなどのカスタマイズをして更新したら「何かうまくいかなかったようです。変更が保存されていないかもしれません。手動で修正し、FTP 経由でファイルをアップロードすることもできます。」というメッセージが表示されて更新できないときの原因と対処方法を紹介します

を参考に対処してくださいね。

プラグインの設定自体はこれでおしまい!あとはダッシュボードメニューの【メディア】をマウスオーバーすると「カテゴリー」という項目が増えていますので通常の投稿と同様にカテゴリーを設定して、画像1つ1つにカテゴリーを設定していくだけです。

※画像カテゴリーのスラグは半角英数字にしておいた方が管理が楽ですしギャラリーを表示する際に間違いが起こりにくいと思います

カテゴリーで絞り込んだ自動更新ギャラリーの設置

WordPress標準のギャラリーは投稿や固定ページに[gallery ids=”〇〇”]というショートコードを挿入することで表示されます。ids=というところに画像のIDを入力すればその数の画像が並んだギャラリーを作ることができます。

今回はカテゴリーに属した画像をすべて表示するので少しコードを変更します。

[gallery category = “画像カテゴリーのスラグ” size = “medium” columns = “2” order = “DESC” orderby = “post_date” link=”file”]

急に長くなりましたね。必要なのは「category = “画像カテゴリーのスラグ”」の部分だけです。ここに先ほど作成したカテゴリーのスラグを入力します。

ではその他の要素(パラメーター)についてちょこっと解説します

  1. size = “medium”
  2. 一覧表示される画像のサイズです。「thumb(小)」「medium(中)」「large(大)」「full(元画像の大きさ)」から指定します。ページの幅やカラム(列)数により変更しても拡大縮小されない場合があります

  3. columns = “2”
  4. ギャラリー表示する列数です

  5. order = “DESC”
  6. 画像の並び順です。「ASC(昇順)」「DESC(降順)」から選択します。

  7. orderby = “post_date”
  8. 画像の並び替えに使う要素です。通常は画像のアップロード日である”post_date”でしょう。

  9. link=”file”
  10. このパラメーターの必要性については後述します

これで投稿や固定ページにショートコードを挿入すれば自動更新ギャラリーの完成です。やってみてください。

複数のカテゴリーに紐づいた画像はどうなる?

一応意地悪テストとして複数のカテゴリーに登録した画像をギャラリー表示したらどうなる?というのを試してみました。どちらかだけ表示されたりしたらちょっと残念なので・・・。

結果は・・・どちらのカテゴリーのギャラリーにもきちんと画像が抽出表示されました。大成功!!です。



ギャラリーの画像をクリックされた時にきれいな拡大画像を表示する方法

カテゴライズしたギャラリーを表示できたらOKという方はこの先を見る必要はありません。ここからはもう1歩進んで画像がクリックされたときによりきれいに表示する方法の紹介です。

ギャラリーに表示された小さな画像をクリックしたときに拡大表示などをする効果のことを「Lightbox」と言います。こういう単語が分からないとプラグインを探すのも苦労しますよね?いろいろリリースされていますが今回は【ARI Fancy Lightbox】を使用します。他のプラグインでも実現は可能ですからいろいろ試してみるのも面白いと思います。

【ARI Fancy Lightbox】プラグインの概要については

【ARI Fancy Lightbox – WordPress Popup】は画像・動画・地図などいろいろなものをかっこよく拡大表示できるようにするプラグインです

をご覧ください。いろいろな効果が与えられるプラグインですから面白いと思います。

Lightbox表示できないときのチェックポイント

WordPress標準のギャラリーを挿入しただけではほとんどのLightbox系プラグインでは正常に動作しないことが多いのご存じですか?決してプラグインが悪いわけではないと思われますので今回使うプラグインでない方も試してみてください。

その前になぜギャラリーでLightbox表示ができないのかを簡単に解説すると、ほとんどのテーマではギャラリー表示された画像をクリックしたときに単独ページで表示するようになっています。

一方通常挿入した写真はクリックしたとき画像のURL(オリジナル画像)を表示するようになっていることが多いです。

Lightbox系のプラグインは画像のURLを開こうとした時初めて動作するためギャラリーの画像がクリックされた時の動作を指示する必要があるのです。

試しにLightbox系のプラグインが動かないと方は通常の画像を挿入して動作するか試してみてください。通常の画像で正常動作するようであれば次の設定を追加することでギャラリーでもきちんと動作するようになる可能性が高いです。

やり方は簡単、通常のギャラリー挿入ショートコードである
[gallery ids=”〇〇”]
に【link=”file”】というパラメーターを与え
[gallery ids=”〇〇” link=”file”]
としてやるだけです。

想像ですがなぜこの処理が必要なのか、なぜプラグインの紹介文には記述がないかというと、昔はギャラリー画像がクリックされたときの動作についてテーマ側で制御していなかったため、プラグインを導入するだけでLightboxが機能したからなのでしょう。

【ARI Fancy Lightbox】でもギャラリーのショートコードに【link=”file”】パラメーターを追記すればきちんと動作します。

おまけ ギャラリー表示のキャプションを消す方法

自動更新されるギャラリーはできたし、拡大表示も格好良くなった、めでたしめでたし・・・とはいきません。テーマや環境にもよる部分ではありますが、Wordpress標準のギャラリーではキャプション(画像名)が画像の下に表示されるようになっています。

これを表示しておきたい方はそのままの方がいいとは思うのですが、画像だけを並べたい場合にはとても邪魔な存在になります。

そんなときはテーマのCSSに

.gallery-caption {display: none;}

を追記すれば消すことができます。また、ギャラリーは個々の画像がdlというタグでリスト化されていますから、画像の上下の隙間が気になるときは

dl {margin: 0px 0;}

を追記すれば隙間を極力なくすことができます。

これらのカスタマイズは環境やテーマによるところもありますから実際にはデベロッパーツールなどでどの要素を調べて行ってくださいね。


ここまでいろいろ説明させていただいた後でいうのも気が引けるのですが、実はこれを1つのプラグインで実現できます。プラグイン名は【Media Library Assistant】です。

何でもできそうなブログCMS唯一の弱点だと個人的に思っているメディア(画像・音声・動画)ファイルや添付ファイルの管理を格段に改善するのが「Media Library Assistant」です。古くからあるプラグインなのですが、たくさんある機能を英語表記のまま使うのが大変なので敬遠されがちでしたが、翻訳ファイルも作りましたので併せて紹介します。

ただこのプラグインはちょっと複雑な仕様になっているので設定や設置に戸惑うかもしれません。どうしても1つのプラグインでやりたい方はチャレンジしてみてくださいね。

役に立つ情報でしたらぜひSNSやメールでシェアしてください
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
ページ先頭へ