WordPressでサイトを作るとき、記事を華やかにしたり分かりやすく説明するのにメディアファイル（画像）を使用することはよくありますよね？
でもその画像って各投稿に挿入して終わりってなっていませんか？
写真アルバムのようなものを作りたいけど
- どうやるのか分からない
- プラグイン使わないとダメなのでは？
- プラグインの設定でいちいち画像を追加したりするのが面倒
など、いろいろと面倒な感じがしてしまいますよね？かくいう私もギャラリー系のプラグインを使ってサイトに写真集を作ってみた経験もあるのですが、やっぱり面倒・・・で放置となることがしばしばありました。
で、最近ふと気づいたのがWordPressって標準でギャラリー機能なかったっけ？ということ。使ってみたら案外便利というか簡単手軽だったので、知ってるよ～と言われそうですが敢えて紹介しておきます。
WordPress標準ギャラリーの挿入は本当に簡単
プラグインなどで写真ギャラリーを作るときよくある手順は
- メディアに写真をアップロードする
- プラグインで新規のギャラリーを作成し写真を追加
- ショートコードなどで投稿や固定ページへ挿入
そして追加やメンテナンスは手動で行う必要があり、しばらくの間何もしていないと面倒になって放置・・・となるのが関の山な場合が多いのかもしれません。
対してWordPress標準の写真ギャラリーは「ギャラリー表示したい場所にいつでもどこでも簡単にギャラリー挿入ができる」んです。
その方法は・・・を順に解説していきますね。
- 通常の投稿編集画面から「メディアを追加」ボタンをクリックします（普通に画像を挿入するときと一緒）
- 使用する画像をアップロードします（今までの画像を使う場合は必要ありません）
- 画面左上にある【ギャラリーを作成】をクリックします
- 写真を選択します（キーボードの「ctrl」キーを押しながらクリックしていくと複数選択／解除ができます）
- 画面右下の【ギャラリーを作成】をクリックします
- 画面右上に設定項目があるので設定していきます
項目は
- リンク先／「添付ファイルのページ」または「メディアファイル」、「なし」から選択
※「メディアファイル」にしておくと画像がクリックされたときに拡大表示されます。「なし」にしておくとクリックされても何も変化しません
- カラム／写真の列数を指定します
下の設定でサイズを大きくしてもカラム数が多いと縮小表示になります
- ランダム／画像の並び順をランダムにする場合にチェックします
- サイズ／ギャラリー表示する画像のサイズを設定します
上のカラムとの兼ね合いを見ながら設定するといいでしょう
- 終わったら右下の【ギャラリーを挿入】をクリックします
これでギャラリーが挿入されます（挿入例です）。
うーーーん、思ったように表示されない・・・やり直しか・・・いやいや選択した画像が変わらなければショートコードの中身をちょっとカスタマイズするだけで変更できます（画像もIDが分かっていれば自由に増減できます）。
ギャラリーが挿入される位置には
[gallery]というようなショートコードが挿入されますよね？この中身を簡単に解説しておきます。
- link=”file”／画像がクリックされたときに拡大表示する場合は「file」、何もしない場合は「none」にします。ファイルのページへ移動する場合にはこのコードそのものを削除します
- columns=”3″／列数の設定です
- size=”large”／画像サイズの設定です「thumb(サムネイル)」「small(小)」「medium(中)」「large(大)」「full(フルサイズ)」から選びます
- ids=”18751,18750,18748″／画像のIDです
- orderby=”rand”／表示順をランダムにします（これを削除するとidsで設定した順番に表示されます）
試しにいろいろ変更してみると自在に表現が変えられます。
写真を選んで表示方法を選んで挿入という手順ですから簡単ですよね？その画像集を別の投稿で使いたければショートコードをコピーするだけで複製できます。
キャプションを非表示にする方法
以上が基本的なギャラリーの挿入方法ですが、１つ難点があります。それは画像にキャプション（画像の簡単な説明）情報が入っているものを挿入したとき。スマホなどで撮影した画像をそのまま挿入すると写真番号などがそのままキャプション情報としてアップロードされ、それがギャラリーに表示されてしまうのです。
いちいちキャプション情報を画像から削除するのも面倒ですし、安易に削除するとこの情報を使っている他の投稿への影響もあるかもしれませんから、ギャラリーの時だけ非表示にしてしまいましょう。
非表示にするにはテーマのCSSを編集します。子テーマを使っている場合は子テーマのCSSへ以下のコードを追加するだけで非表示になります（子テーマでない場合にはCSSの中から該当する部分を探して追記する必要があるのでとても面倒ですし、CSSの知識が必要になりますから子テーマの使用をおすすめします）
子テーマの場合、以下のコードをコピペするだけです
.gallery-caption {
display: none;
}※テーマによってはclass名が違う場合がありますのでデベロッパーツールなどで調べて行えばいいでしょう
ギャラリーショートコードで表示されない画像があるときは
WordPress標準のギャラリー機能を使うには
[gallery size = "medium" columns = "4" order = "DESC" orderby = "post_date" link="file" id="123,234,567"]といった感じのショートコードが一般的です。
さんざん解説させていただきましたが上の場合だと
- size = “medium”／画像サイズは「中サイズ」
- columns = “4”／４列で表示
- order = “DESC”／降順で並び替え
- orderby = “post_date”／日付を元に並び替え
- link=”file”／リンク先をファイルとする
- id=”123,234,567″／この画像をギャラリーに表示する
という条件に合ったギャラリーが表示されます。
ではメディアに保存された画像すべてを上の条件で表示する場合はどうでしょう？単純に「id=”123,234,567″」を削除すればいいと思いますよね？？
試しにそうしてみてください。
・・・きちんとすべての画像が表示されましたか？？されませんよね？何ででしょう・・・。
これにはちゃんと理由があります。
WordPressの画像は２種類あります。それは
- 投稿や固定ページの編集画面から「メディアを追加」をクリックして画像をアップロードして挿入したもの
- ダッシュボードの「メディア」から直接画像をアップロードしたもの
この２つの違いは、前者が「どこかの投稿や固定ページで使われている画像」、後者が「どこにも紐づいていない画像」という認識になります。
上のショートコードの使い方のように「id=”123,234,567″」の部分を単純に削除した場合には１の「どこかに紐づいた画像」の一覧が表示されます。
そして以下のようにした場合
[gallery size = "medium" columns = "4" order = "DESC" orderby = "post_date" link="file" <font color="red">id=""</font>]メディアの中にある画像すべてが表示されるようになります。
違いは赤字の部分、「id=””」と画像idを元に抽出しますけど特定の画像idはありませんよ（関係なくすべてですよ！）という意味になるんですね。
試しに単純に「id=”123,234,567″」を削除したショートコードと「id=””」としたショートコードを２つ用意して見比べてください。違いがはっきり分かると思います。
このことはWordPressの公式解説サイト（codex）ギャラリーショートコードの使い方でさらっと書かれていますので見落としがちなところですが、何で画像が表示されないの～～？？？？と頭から煙が上がりそうになったときには思い出していただけるといいかと思います。
