プラグインやjQueryを使わないWordPressの画像ギャラリー作成方法をご紹介します。
WordPressにはサムネイル画像を並べて表示するギャラリーという機能があります。この機能はメディアライブラリの画像を選択して、ギャラリーのように一覧表示ができる機能で、プラグインやjQueryを使わずに画像ギャラリーを作成することができます。
また、ショートコード［gallery］を記事中にそのまま挿入すると、その記事内で使用した画像は、全て画像ギャラリーとして表示させることができます。
もちろん、レスポンシブ対応なのでスマホやタブレットでもギャラリー表示は崩れず、ショートコードに追記すると、ギャラリーのカスタマイズも可能です。
添付ファイルページで各画像ごとの説明も表示できるので、ギャラリーで画像を一覧表示して、説明ページで作品を詳しく解説するといった使い方ができます。
WordPress ギャラリー作成
では、メディアライブラリから画像を選択して、ギャラリーを作成してみましょう。手順は以下の通りで、それほど難しくありません。画像サイズや列数などのカスタマイズも可能です。
- ギャラリー画像を選択
- ギャラリーを編集
- ギャラリーの設定
最後に「ギャラリーの挿入」をクリックすると、ショートコードが自動的に生成されて、そのページにギャラリーが表示されます。
ギャラリー画像を選択
まずはギャラリーを作成したいページの編集画面で「メディアを追加」をクリックします。
左メニューから「ギャラリーを作成」を選択します。
メディアライブラリからギャラリーに追加したい画像をクリックして選択します。もちろん、画像は複数選択可能です。ギャラリーに追加する画像は右上にチェックが入ります。
メディアライブラリから画像を6枚選択しました。選んだ画像は下部で確認できます。
「ギャラリーを作成」をクリックして、ギャラリー画像を確定させます。
ギャラリーを編集
続いて、「ギャラリーを編集」に移ります。ここでは画像にキャプションを付けたり、ギャラリー画像の並び替えができます。
必要に応じて画像にキャプション（説明文）を入力していきます。空白でもかまいません。
ギャラリー表示順の変更は、メディアファイルの画像をドラッグドロップして移動させればOKです。右上の「順序を逆にする」をクリックすると、画像の並びが逆になります。
ギャラリーの設定
右側にある「ギャラリーの設定」では、ギャラリー画像のサイズやサムネイル画像をクリックしたときの挙動、ギャラリー画像のカラム数（列数）を設定します。
リンク先は「添付ファイルのページ」、「メディアファイル」、「なし」の3つが選択できます。
「添付ファイルのページ」は画像の説明ページが別途開きます。「メディアファイル」は元サイズの画像が表示され、「なし」はサムネイルだけ表示されます。
「カラム」は横一列に表示される画像の数を選択できます。カラム数に合わせてカラムの幅は自動調整されますが、あまり多すぎると見栄えが悪くなるので、適宜調整してください。「ランダム」にチェックを入れると、画像の並びがランダムになります。
「サイズ」でギャラリーの画像サイズを選択します。
各サイズごとの寸法を変更する場合は、WordPressのダッシュボードから「設定」→「メディア」に進み、メディアライブラリに画像を追加する際の大きさを入力すればOKです。
最後に右下の「ギャラリーの挿入」をクリックすると、ショートコードが自動的に生成されます。
画像ギャラリーのショートコードはこんな感じです。
［gallery link="file" ids="4714,4713,4712,4711,4710,4709"］
以下は実際に作成した画像ギャラリーです。リンク先はメディアファイル、カラムは3、画像サイズはサムネイルです。Lightbox系のプラグインをインストールしておくと、メディアファイル選択時に拡大表示したときの見栄えがよくなります。
-
- 祇園祭
-
- 京都地方裁判所の桜
-
- 花市の枝桜
-
- 鉢植えの桜
-
- ハリストス教会の桜
添付ファイルの詳細設定
ギャラリーの設定でリンク先を「添付ファイルのページ」にした場合は、画像の説明ページにリンクします。これは各画像ごとに1ページずつ作成されます。
添付ファイルページを利用する場合は、画像をクリックして添付ファイルの詳細をきちんと設定すると、画像の説明ページに情報を反映させることができます。
代替テキスト
画像の代替テキスト（ALTタグ）を入力します。検索エンジンでは画像の情報を得るために利用され、SEOでは重要な要素なので、なるべく入力してください。
タイトル
添付ファイルページのタイトルとして表示されます。
キャプション
ギャラリーの画像下に説明文（キャプション）が表示されます。
説明
添付ファイルページの本文になります。さらに詳しく入力する場合は、ダッシュボード左メニュー「メディア」→「ライブラリ」から該当の画像を選び、左下の「さらに詳細を編集」をクリックすると、投稿作成と同じようなエディターが使えるようになります。
ここでは添付ファイルページの説明作成にタグが使えるので、通常の記事と同じような感覚で説明を作成できます。もちろん、長文入力もOKです。
添付ファイルの詳細は、こんな感じで添付ファイルページに反映されます。
添付ファイルページの使い方ですが、写真ギャラリーで作品を一覧表示して、添付ファイルページで各作品ごとの詳しい説明をするという感じでしょうか。
WordPress ギャラリーのカスタマイズ
WordPressのギャラリー機能は、ギャラリーのショートコードに追記することで、ギャラリー表示をカスタマイズすることができます。
columns
カラム数を指定します。表示領域に合わせてカラムの幅は適宜調整されます。初期値は”3″で、”0″を指定すると改行タグは挿入されません。
id・ids
投稿IDを指定することで、ギャラリーに画像を表示させます。
size
ギャラリーのサムネイル画像サイズを指定します。初期値はthumbnailで、他にmedium、large、fullが指定できます。
上記のコードを使って、先ほどのギャラリーをカスタマイズしてみました。画像サイズを中に、カラムを2に変更しています。
-
- 祇園祭
-
- 京都地方裁判所の桜
-
- 花市の枝桜
-
- 鉢植えの桜
-
- ハリストス教会の桜
ギャラリーのショートコードは以下のようになります。
［gallery size="medium" link="file" columns="2" ids="4714,4713,4712,4711,4710,4709"］
order
ギャラリー画像の表示順序を指定します。
orderby
ギャラリー画像の表示順序のキーとなる項目を指定します。”RAND”を指定すると、画像はランダムで表示されます。
itemtag
ギャラリーの画像とキャプションを囲むタグを指定します。初期値は”dl”です。”div”や”p”タグを用いてギャラリーをカスタマイズする場合に使います。
icontag
ギャラリー画像を囲むタグを指定します。初期値は”dt”です。
captiontag
キャプションを囲むタグを指定します。初期値は”dd”です。
link
サムネイル画像をクリックしたときのリンクを指定します。他のページや外部サイトにリンクすることもできます。
その他にも色々なオプションを利用してギャラリーの表示をカスタマイズすることができます。ギャラリーショートコードの使い方は、WordPress Codex日本語版に記載されています。いろいろ試してみてください。
画像ギャラリーはLightboxと併用で
WordPressのギャラリーは、簡単に画像ギャラリーを作成できる便利な機能です。Lightbox系のプラグインを併用すると、拡大表示したときの見栄えがよくなるのでオススメです。
ただし、WordPressのギャラリーは少し使いにくい部分があります。
たとえば、ギャラリーのサムネイル画像をクリックすると、新しいタブではなく同じタブでリンク先の画像が表示されるので、元のページに戻る時が少々面倒です。この辺は新しいタブで開くようにしたり、戻るボタンを追加するなどのカスタマイズが必要です。
また、ギャラリー関連のWordPressプラグインには、「Gallery」や「NextGEN Gallery」、「Galleriffic」など、より多機能なものが用意されています。WordPressデフォルトのギャラリー機能は使用せず、プラグインを使うというのも手です。
WordPressのギャラリー機能と、Lightbox系プラグインの「Lightbox Plus ColorBox」を併用すると、リンク先画像を開いた時の見栄えもよくなります。よかったら下記の記事をご参考に。
