WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

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

公開日:2017年12月4日 使い方など

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

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

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

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

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

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

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

具体的に書くと

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

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

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

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

momosiri.nagoya
Ordinary Life
https://momosiri.nagoya/cat-list-page/cyakun/
保護猫「モモ」「ココ」とのいつもの暮らし

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

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

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

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

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

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

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

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

add_filter('wpmediacategory_taxonomy' , function(){return 'category_media';} ); 
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

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

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

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

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

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

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

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

[gallery category = “画像カテゴリーのスラグ” size = “medium” columns = “2” order = “DESC” orderby = “post_date” link=”file”]
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

急に長くなりましたね。必要なのは「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】プラグインの概要については

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

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;}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

dl {margin: 0px 0;}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

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


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

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

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

【スポンサーリンク】