【WordPress】今更聞けない標準ギャラリーの使い方

公開日:2017年11月7日 使い方など
Knowledge Base Wordpress パソコン カスタマイズ 設定

WordPressでサイトを作るとき、記事を華やかにしたり分かりやすく説明するのにメディアファイル(画像)を使用することはよくありますよね?

でもその画像って各投稿に挿入して終わりってなっていませんか?

写真アルバムのようなものを作りたいけど

  1. どうやるのか分からない
  2. プラグイン使わないとダメなのでは?
  3. プラグインの設定でいちいち画像を追加したりするのが面倒

など、いろいろと面倒な感じがしてしまいますよね?かくいう私もギャラリー系のプラグインを使ってサイトに写真集を作ってみた経験もあるのですが、やっぱり面倒・・・で放置となることがしばしばありました。

で、最近ふと気づいたのがWordPressって標準でギャラリー機能なかったっけ?ということ。使ってみたら案外便利というか簡単手軽だったので、知ってるよ~と言われそうですが敢えて紹介しておきます。

WordPress標準ギャラリーの挿入は本当に簡単

プラグインなどで写真ギャラリーを作るときよくある手順は

  1. メディアに写真をアップロードする
  2. プラグインで新規のギャラリーを作成し写真を追加
  3. ショートコードなどで投稿や固定ページへ挿入

そして追加やメンテナンスは手動で行う必要があり、しばらくの間何もしていないと面倒になって放置・・・となるのが関の山な場合が多いのかもしれません。

対してWordpress標準の写真ギャラリーは「ギャラリー表示したい場所にいつでもどこでも簡単にギャラリー挿入ができる」んです。

その方法は・・・を順に解説していきますね。

  1. 通常の投稿編集画面から「メディアを追加」ボタンをクリックします(普通に画像を挿入するときと一緒)
  2. 使用する画像をアップロードします(今までの画像を使う場合は必要ありません)
  3. 画面左上にある【ギャラリーを作成】をクリックします
  4. 【WordPress】今更聞けない標準ギャラリーの使い方

  5. 写真を選択します(キーボードの「ctrl」キーを押しながらクリックしていくと複数選択/解除ができます)
  6. 画面右下の【ギャラリーを作成】をクリックします
  7. 画面右上に設定項目があるので設定していきます
  8. 【WordPress】今更聞けない標準ギャラリーの使い方
    項目は

    1. リンク先/「添付ファイルのページ」または「メディアファイル」、「なし」から選択
    2. ※「メディアファイル」にしておくと画像がクリックされたときに拡大表示されます。「なし」にしておくとクリックされても何も変化しません

    3. カラム/写真の列数を指定します
    4. 下の設定でサイズを大きくしてもカラム数が多いと縮小表示になります

    5. ランダム/画像の並び順をランダムにする場合にチェックします
    6. サイズ/ギャラリー表示する画像のサイズを設定します
    7. 上のカラムとの兼ね合いを見ながら設定するといいでしょう

  9. 終わったら右下の【ギャラリーを挿入】をクリックします

これでギャラリーが挿入されます(挿入例です)。

うーーーん、思ったように表示されない・・・やり直しか・・・いやいや選択した画像が変わらなければショートコードの中身をちょっとカスタマイズするだけで変更できます(画像もIDが分かっていれば自由に増減できます)。

ギャラリーが挿入される位置には

[gallery link=”file” columns=”3″ size=”large” ids=”18751,18750,18748″ orderby=”rand”]
【注意】コードをコピーして使用する前に必ずお読みください

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

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

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

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

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

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

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

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

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

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

というようなショートコードが挿入されますよね?この中身を簡単に解説しておきます。

  1. link=”file”/画像がクリックされたときに拡大表示する場合は「file」、何もしない場合は「none」にします。ファイルのページへ移動する場合にはこのコードそのものを削除します
  2. columns=”3″/列数の設定です
  3. size=”large”/画像サイズの設定です「thumb(サムネイル)」「small(小)」「medium(中)」「large(大)」「full(フルサイズ)」から選びます
  4. ids=”18751,18750,18748″/画像のIDです
  5. orderby=”rand”/表示順をランダムにします(これを削除するとidsで設定した順番に表示されます)

試しにいろいろ変更してみると自在に表現が変えられます。

写真を選んで表示方法を選んで挿入という手順ですから簡単ですよね?その画像集を別の投稿で使いたければショートコードをコピーするだけで複製できます。

【WordPress】サムネイル付の投稿や固定ページの一覧をCSSなしできれいに表示する2つの方法

独自のウィジェットエリアを追加する方法

【WordPress】プラグイン任せで大丈夫??画像に含まれる位置情報などのEXIFデータ削除


キャプションを非表示にする方法

以上が基本的なギャラリーの挿入方法ですが、1つ難点があります。それは画像にキャプション(画像の簡単な説明)情報が入っているものを挿入したとき。スマホなどで撮影した画像をそのまま挿入すると写真番号などがそのままキャプション情報としてアップロードされ、それがギャラリーに表示されてしまうのです。

いちいちキャプション情報を画像から削除するのも面倒ですし、安易に削除するとこの情報を使っている他の投稿への影響もあるかもしれませんから、ギャラリーの時だけ非表示にしてしまいましょう。

非表示にするにはテーマのCSSを編集します。子テーマを使っている場合は子テーマのCSSへ以下のコードを追加するだけで非表示になります(子テーマでない場合にはCSSの中から該当する部分を探して追記する必要があるのでとても面倒ですし、CSSの知識が必要になりますから子テーマの使用をおすすめします)

子テーマの場合、以下のコードをコピペするだけです

.gallery-caption {
    display: none;
}
【注意】コードをコピーして使用する前に必ずお読みください

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

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

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

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

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

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

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

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

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

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

※テーマによってはclass名が違う場合がありますのでデベロッパーツールなどで調べて行えばいいでしょう

ギャラリーショートコードで表示されない画像があるときは

WordPress標準のギャラリー機能を使うには

[gallery size = “medium” columns = “4” order = “DESC” orderby = “post_date” link=”file” id=”123,234,567″]
【注意】コードをコピーして使用する前に必ずお読みください

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

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

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

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

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

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

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

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

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

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

といった感じのショートコードが一般的です。

さんざん解説させていただきましたが上の場合だと

  • size = “medium”/画像サイズは「中サイズ」
  • columns = “4”/4列で表示
  • order = “DESC”/降順で並び替え
  • orderby = “post_date”/日付を元に並び替え
  • link=”file”/リンク先をファイルとする
  • id=”123,234,567″/この画像をギャラリーに表示する

という条件に合ったギャラリーが表示されます。

ではメディアに保存された画像すべてを上の条件で表示する場合はどうでしょう?単純に「id=”123,234,567″」を削除すればいいと思いますよね??

試しにそうしてみてください。

・・・きちんとすべての画像が表示されましたか??されませんよね?何ででしょう・・・。

これにはちゃんと理由があります。

WordPressの画像は2種類あります。それは

  1. 投稿や固定ページの編集画面から「メディアを追加」をクリックして画像をアップロードして挿入したもの
  2. ダッシュボードの「メディア」から直接画像をアップロードしたもの

この2つの違いは、前者が「どこかの投稿や固定ページで使われている画像」、後者が「どこにも紐づいていない画像」という認識になります。

上のショートコードの使い方のように「id=”123,234,567″」の部分を単純に削除した場合には1の「どこかに紐づいた画像」の一覧が表示されます。

そして以下のようにした場合

[gallery size = “medium” columns = “4” order = “DESC” orderby = “post_date” link=”file” id=””]
【注意】コードをコピーして使用する前に必ずお読みください

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

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

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

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

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

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

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

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

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

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

メディアの中にある画像すべてが表示されるようになります。

違いは赤字の部分、「id=””」と画像idを元に抽出しますけど特定の画像idはありませんよ(関係なくすべてですよ!)という意味になるんですね。

試しに単純に「id=”123,234,567″」を削除したショートコードと「id=””」としたショートコードを2つ用意して見比べてください。違いがはっきり分かると思います。

このことはWordpressの公式解説サイト(codex)

でさらっと書かれていますので見落としがちなところですが、何で画像が表示されないの~~????と頭から煙が上がりそうになったときには思い出していただけるといいかと思います。

ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

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

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報