「WordPressで複数の画像を一覧にしてページに掲載したい！」と思ったことはありませんか？
関連する画像をまとめておくことで、画像を見やすくすることができます。そこで今回は、Wordpressで画像をまとめて表示できる「ギャラリー機能」についてや、カスタマイズ方法、おすすめのプラグインなどを紹介します。
ちなみにワードプレスを体系的に学ぶなら、筆者も受講したワードプレスを学べるプログラミングスクールがおすすめです。
CONTENTS
WordPressのギャラリー機能とは？
まずは「ギャラリー」という言葉について理解を深めておきましょう。
WordPressにおいて、「ギャラリー」とはメディアライブラリの機能の一つです。ギャラリーを使うことによって、複数の画像を一つの図のように一覧で表示することができます。（このギャラリー機能はVer2.5からスタートしました。）
WordPressのギャラリー機能を使うと、一つ一つの画像に対して画像を説明するためのページが自動で作成されます。
作成されたページにタイトルやキャプション、説明を入力できるので、ユーザーの興味を引きやすくなります。
ギャラリー機能を実装するためのプラグインも多く用意されていますが、プラグインを使わなくても実装することができます。
ギャラリーをカスタマイズする方法
ギャラリーをカスタマイズする場合の方法を4つの場合に分けて紹介します。
ギャラリーを編集する方法
WordPressに用意されているギャラリー機能は投稿ページや固定ページに配置することができます。
以下のような手順でギャラリーを編集することができます。
- ギャラリーを設置したい場所を決める
- ギャラリーを作成する
- ギャラリーに載せたい画像を選択し、設定する
- ギャラリーに載せる画像の設定やキャプションの設定などをする
- ギャラリーを設置するためのショートコードを挿入する
プラグインを使う場合やそうでない場合で若干手順が異なることはありますが、基本的には、この手順で作成することができます。
ギャラリーを設置したい場所を決める
投稿ページ、固定ページのどちらでも構いませんが、ギャラリーを設置したい場所を決めましょう。
ギャラリーを設置したい場所にカーソルを置いて、「ビジュアル」画面にある「メディアを追加」というボタンをクリックしてください。
ギャラリーを作成する
この通りに操作していくと、「ギャラリーを作成」というメニューボタンが左側に表示されます。このボタンをクリックしましょう。
ギャラリーに載せたい写真を選択して設定する
「ギャラリーを作成」というボタンをクリックすると、これまでにアップロードした画像が並んで表示されます。その画面でギャラリーに載せたい画像を選択しましょう。
画像が選択できたら、「ギャラリーを挿入」というボタンをクリックしてください。
ギャラリーに載せる画像の設定やキャプションの設定をする
ギャラリーには複数の画像を載せることになるはずです。後でスライド機能などを追加する場合に備えて、ギャラリーのタイトルや画像にキャプションなどを設定しておきましょう。
これらの設定をしなくてもギャラリーを作成することはできるので、必要になったときに設定してもOKです。画像を表示する順番もここで一緒に設定しておきましょう。
ギャラリーを設置するためのショートコードを挿入する
ここまで手順通りに行うと、ギャラリーを設置したい場所にショートコードが挿入されます。ショートコードが挿入されたら、ギャラリーの設置は完了です！
念のため、正しくギャラリーが設置されているか確認してみましょう。
ギャラリー写真にURLリンクを貼る方法
ギャラリーの中に入っている画像には任意のリンクを貼ることができません。そのため、ギャラリーの中から任意の画像を探す必要があります。
そうは言ってもギャラリーから任意の画像をすぐに探したいということもあるでしょう。そんなときにこの方法を使ってみましょう。
WP Ggallery Custom Links
今回は、「WP Gallery Custom Links」というプラグインを使った方法を紹介します。（日本語化したい場合は、翻訳ファイルをアップロードする必要があります。）
手順は以下のようになります。
- 「WP Gallery Custom Links」をインストールし、有効化する
- ギャラリーを作成する
- 任意のリンクを指定する
- ギャラリーを挿入する（ショートコードを貼る）
「WP Gallery Custom Links」をインストールし、有効化する
まずは、左側のメニューから「プラグイン」→「新規追加」をクリックしましょう。
検索フォームに「WP Gallery Custom Links」と入力し、プラグインのインストールと有効化をしましょう。
ギャラリーを作成する
「メディアを追加」をクリックして、ギャラリーを作成しましょう。
ギャラリーを作るための詳しい方法は先ほどの「ギャラリーを編集する方法」を参考にしましょう。
任意のリンクを指定する
「ギャラリーを作成」の右下に「WP Gallery Custom Links」の機能が追加されていると思います。「Gallery Link URL」に任意のリンクを入力しましょう。
「Gallery Link Target」は、リンクを同じウィンドウで開くか新しいウィンドウで開くかを選ぶことができます。
「Gallery Link OnClick Effect」は、OnClickのイベント発生時にエフェクト効果を維持するかどうか指定することができます。
「Gallery Link Additional CSS Classes」は、カスタムCSSを追加できます。「strong」や「em」タグに適用されます。
ギャラリーを挿入する（ショートコードを貼る）
ギャラリーが挿入されたかどうか確認してみましょう。
ギャラリー機能を使うためのプラグイン
ギャラリー機能を使うためのプラグインが用意されています。それぞれの用途に合わせたプラグインを紹介します。
ただし、ギャラリー機能のプラグインは、日本語に対応しているのが少ないので、英語対応のみのプラグインも含まれています。
ギャラリー機能を実装できるプラグイン
WP Photo Album Plus
「WP Photo Album Plus」は、ギャラリー機能の高度なカスタマイズが可能になっているプラグインです。
カスタマイズしやすくなっているので、あなた好みのギャラリーにすることが可能です。ギャラリーの内容や表示設定をカスタマイズすることができます。
また、画像をスライドショーも構築することができます。
Portfolio Gallery
「Portfolio Gallery」はポートフォリオやギャラリーを簡単に作成できるプラグインです。ギャラリーは、7種類の表示形式に対応しています。
名前に「ポートフォリオ」とあるように、ポートフォリオを作成することも可能です。デザインを学んでいる方はポートフォリオを作成することが多いようです。
そんなときにあなたの助けになってくれるでしょう。
Unite Gallery Lite
「Unite Gallery Lite」は無料で使用できるプラグインです。このプラグインは、「Unite Gallery」という有料版のプラグインが用意されています。
無料版では1つのギャラリーに掲載できる画像が12枚までという制限がありますが、有料版では、枚数制限はありません。
1つのギャラリーに多くの画像を掲載したいと考えているのならば、有料版も視野に入れて考えてみるのも良いでしょう。無料版で作成したギャラリーは有料版に移行したときでも引き継げます。
ギャラリー機能を拡張できるプラグイン
BNE Gallery Extended
「BNE Gallery Extended」は、名前だけ見るとように思うかもしれませんが、無料で利用できるプラグインです。
ショートコードを使って、メディアのギャラリー機能を拡張して3Dカルーセル表示やMasonry表示にすることができます。
ギャラリー機能をつけたい場所にショートコードを貼り付けるだけなので、比較的簡単に使用することができます。
Photo Gallery by WD
「Photo Gallery by WD」は、レスポンシブ対応していて、様々な表示方法の画像を追加したり、編集したりするためのツールやオプションが備わっているプラグインです。
さらに、作成したギャラリーに説明文を加えることも可能です。そのため、ギャラリーを閲覧する際の手助けになります。
「どこで撮影した写真なのか」といったように画像に説明文を加えたい場合にはおすすめです。
レスポンシブに対応したプラグイン
Foo Gallery（日本語対応済み）
「Foo Gallery」はレスポンシブ対応しているだけでなく、操作しやすいプラグインとしても有名です。
細かな調整をすることが可能ですし、Lightbox機能も備わっています。（「Lightbox」については後ほど詳しく説明します。）
ただし、「Foo Gallery」だけではLightbox機能を使うことはできないので、「FooBox Image Lightbox」というプラグインと併せて使う必要があります。
Slim Jetpack
「Slim Jetpack」は、「Jetpack」というプラグインの簡易版です。簡易版とは言っても15個の機能がまとまって入っているので、非常に便利なプラグインです。
このプラグインでは、スライドショーを作成したり、レスポンシブに対応させたり、タイル状に表示させるギャラリーを作ったりなど、あらゆることができます。
このプラグインをインストールしておけば、プラグインをたくさん入れる必要もなくなります。
Celtis Gallery Slider
「Celtis Gallery Slider」は、標準的なギャラリーと同じ方法で設置できますし、登録された画像をスライダーで表示することができます。
レスポンシブにも対応しているので、スマホやタブレット端末から閲覧してもレイアウトが崩れることはありません。
以前は、「JetPack」というプラグインがなければ動作しませんでしたが、Cieltispack Ver2.4.2からJetPackがなくても動作できるようになりました。
スライドショー形式で表示できるプラグイン
NextGEN Gallery（日本語対応済み）
「NextGEN Gallery」は、たくさんの画像を使ったギャラリーを作成する際に便利なプラグインです。画像をサムネイル形式で並べて一覧表示したり、スライドショー形式で表示したりできます。
このプラグインは、見出しにも記載してありますが、日本語に対応しています。英語の説明だけでは心配だという方でも使いやすいプラグインになっています。
その他にも、複数のギャラリーをまとめて管理できる「アルバム」という機能も用意されています。ギャラリー単位だけではなく、アルバム単位でも記事に表示することができます。
記事中の画像をカテゴリ分けできるプラグイン
Media Library Categories
「Media Library Categories」は、記事中の画像をカテゴリ分けできるプラグインです。
FTPなどを使って直接フォルダの変更をしてしまうと、投稿した記事に画像が表示されないといったトラブルが起こることがあります。
また、投稿数が増えてしまうと、再び同じ画像を使いたいと思ったときにも探しにくくなってしまいます。そんなときに非常な便利なプラグインです。画像だけでなく、音声や動画もカテゴリ分けして整理することができます。
Enhanced Media Library
「Enhanced Media Library」は、メディアライブラリにカテゴリを追加して画像などのファイルを整理し、見つけやすくしてくれるプラグインです。
画像ファイル1つ1つに対して分類カテゴリを設定できるので、後から画像を探すときにもすぐに見つけられます。うまく使いこなせるようになると、非常に便利なプラグインなのでぜひ活用してみましょう。
Media Library Assistant
「Media Library Assistant」は、画像専用のタグとカテゴリを使って画像を整理できるプラグインです。
このプラグインには、日本語で使えるようになる翻訳ファイルが用意されています。翻訳ファイルをダウンロードして、プラグインの中の「languges」というフォルダ内にアップロードしましょう。
アップロードするファイルは、「○○-ja.po」と「○○-ja.mo」という2つのファイルです。
ギャラリー機能が付いたテーマ
プラグインをインストールしなくても、既にギャラリー機能が用意されているテーマがあります。
ギャラリー機能が付いていて、写真プログに適しているテーマやおしゃれなテーマになっているテーマを3つ紹介します。
Surfarama（サーファラーマ）
「Surfarama」は、シンプルでクールなデザインになっている無料のWordPressテーマです。
画像を強調することに向いている4カラムになっていてピンタレスト風の外観になっています。
さらに、レスポンシブにも対応しているので、スマホやタブレット端末で表示してもレイアウトが崩れることはありません。
シンプルでクールなデザインのテーマですが、WordPress公式サイトで配布されているテーマです。そのため、WordPressが公式に認めているので、セキュリティなどの心配もほぼありません。
Electric
「Electric」はシンプルなデザインですが、機能面が充実しているテーマです。
記事に載せた画像をカテゴリ分けして、並べ替えて表示できます。多くの画像を載せることができるので、ポートフォリオサイトとしても使用することができます。
Oyster
「Oyster」は、フルスクリーンギャラリー機能が付いた有料のWordPressテーマです。
画像が大きく表示されるので、印象に残りやすいでしょう。画像をスライドショー形式で表示することもできるので、画像をたくさん使うような場合に向いています。
Lightboxとは？画面移動せずに画像が拡大する？
Lightboxは、サイト上でサムネイル画像を拡大表示する際に利用される、JavaScriptとCSSで動作するアプリケーションです。
実際にLightboxをWordPress上で使うと、画面を移動せずにクリックした画像が全面で拡大表示されるようになります。
パソコン上では見やすく表示されますが、スマホなどではLightboxがあることによってサイト自体が使いにくくなってしまうことがあります。
Lightboxを使う際には、スマホで確認しながら導入するようにしましょう。
Lightbox系のプラグイン
Lightbox系のプラグインを２つ紹介します。
ただし、Lightbox系のプラグインを２つ以上入れてしまうと、お互いに影響しあってバグやエラーが生じることがあります。必要なプラグインを１つだけインストールして使うようにしましょう。
WP jQuery Lightbox
「WP jQuery Lightbox」は、大きな画像をアップロードしてもスクリーンサイズに自動でサイズ調整してくれる機能を備えたプラグインです。
通常、サイト上に画像をアップロードする際には、もともとの画像を縮小して投稿することが多いでしょう。このプラグインを使うことによって、自動でサイズ調整してくれるので、画像のアップロードをするだけでOKなのです。
スマホでも表示が崩れることはないので、安心して利用できるでしょう。
Easy Fancy Box
「Easy Fancy Box」は、記事内にある画像やサムネイルをクリックしたときに拡大表示されるプラグインです。ただし、プラグインを有効化しただけでは拡大表示されません。Lightboxを有効にするためには、画像を挿入する際に設定する必要があります。
さらに、画像のタイトル表示や動画を埋め込めるような設定もできます。あなたの用途に合わせてカスタマイズしてみましょう。
Lightboxで画像を見やすくする方法
今回は「WP jQuery Lightbox」を使って画像を見やすくする方法を紹介します。
手順は以下のようになります。
- 「WP jQuery Lightbox」をインストールして有効化する
- 「WP jQuery Lightbox」の設定をする
「WP jQuery Lightbox」をインストールして有効化する
まずはプラグインのインストールと有効化をしましょう。検索フォームに「WP jQuery Lightbox」と入力してインストールを行いましょう。
「WP jQuery Lightbox」の設定をする
画像のように設定しておきましょう。同じように設定しておかないと、Lightbox効果が適用されないことがありますので、注意しましょう。
また、「添付ファイルの表示設定」の「リンク先」を「メディアファイル」に設定することも忘れずに行いましょう。この設定をしなければ、Lightboxが適用されません。
WordPressのギャラリー機能に関するまとめとWordPressの学び方
以上、いかがでしたか？
今回は、WordPressのギャラリー機能について説明してきました。画像をたくさん載せるような記事を投稿する場合には今回の記事を参考にしてみてください。また、ワードプレスについて体系的に学ぶのであれば、ワードプレスを学べるプログラミングスクールの受講がおすすめです。
最後まで読んでいただき、ありがとうございました。
