スポンサーリンク

WordPress ギャラリー機能で画像ギャラリーを作成

wordpressギャラリー機能

WordPressにはサムネイル画像を並べて表示させるギャラリーという機能があります。この機能を使うと、プラグインなしで画像ギャラリーを簡単に作成することができます。

例えば、ショートコード[gallery]を記事中に挿入すると、その記事内で使用した画像は全て画像ギャラリーとして表示させることができます。

もちろん、メディアライブラリにアップした画像を選択して表示させることも可能です。

スポンサーリンク

WordPress ギャラリー作成

では、メディアライブラリから画像を選択して、ギャラリーで表示させてみましょう。

まずは「投稿の編集」画面で「メディアを追加」をクリックします。

WordPress ギャラリー メディアを追加

左メニューの「ギャラリーを作成」を選択します。

WordPress ギャラリー ギャラリーを作成

メディアライブラリからギャラリーに追加したい画像をクリックして選択します。もちろん、画像は複数選択可能です。

WordPress ギャラリー 画像の追加

メディアライブラリから画像を6枚選択しました。

WordPress ギャラリー 画像選択

「ギャラリーを作成」をクリックして、ギャラリー画像を確定させます。

WordPress ギャラリー ギャラリーを作成

続いて、「ギャラリーの編集」に移ります。

WordPress ギャラリー ギャラリーを編集

画像にキャプション(説明文)を入力していきます。空白でもかまいません。

WordPress ギャラリー キャプション入力

「画像を並べ替えるにはドラッグ&ドロップ操作をしてください」とあります。ギャラリー表示順の変更は、ドラッグして画像を移動させればOKです。

WordPress ギャラリー 表示順の変更

右側にある「ギャラリーの設定」では、サムネイル画像をクリックしたときの挙動やカラム数を設定します。リンク先は「添付ファイルのページ」、「メディアファイル」、「なし」の3つが選択できます。

「添付ファイルのページ」は画像用のページが別途開きます。「メディアファイル」はアップされた画像がそのまま表示されます。「なし」はサムネイルだけが表示されます。

「カラム」は横並びで表示されるサムネイルの数を選択できます。カラム数に合わせてカラムの幅は自動調整されますが、あまり多すぎると見栄えが悪くなるので、適宜調整してください。「ランダム」にチェックを入れると、画像の並びがランダムになります。

WordPress ギャラリー ギャラリーの設定

最後に「ギャラリーの挿入」をクリックすると、ショートコードが自動的に生成されます。

WordPress ギャラリー ギャラリーの挿入

下記のショートコードが記事中に挿入されます。
[gallery link=”file” ids=”4284,4281,4239,4236,4224,4219″]

こんな感じでギャラリーが作成されました。

WordPress ギャラリーの設定

WordPressのギャラリー機能は、ギャラリーショートコードに追記することで、ギャラリー表示をカスタマイズすることができます。

columns
カラム数を指定します。表示領域に合わせてカラムの幅は適宜調整されます。初期値は”3″で、”0″を指定すると改行タグは挿入されません。

id・ids
投稿IDを指定することで、ギャラリーに画像を表示させます。

size
ギャラリーのサムネイル画像サイズを指定します。初期値は”thumbnail”で、他に”medium”、”large”、”full”が指定できます。

上記のコードを使って、先ほどのギャラリーをカスタマイズしてみました。ギャラリーのショートコードは以下のようになります。
[gallery link="file" size="medium" columns="2" ids="4284,4281,4239,4236,4224,4219"]

order
ギャラリー画像の表示順序を指定します。

orderby
ギャラリー画像の表示順序のキーとなる項目を指定します。”RAND”を指定すると、画像はランダムで表示されます。

itemtag
ギャラリーの画像とキャプションを囲むタグを指定します。初期値は”dl”です。”div”や”p”タグを用いてギャラリーをカスタマイズする場合に使います。

icontag
ギャラリー画像を囲むタグを指定します。初期値は”dt”です。

captiontag
キャプションを囲むタグを指定します。初期値は”dd”です。

link
サムネイル画像をクリックしたときのリンクを指定します。他のページや外部サイトにリンクすることもできます。

その他にも色々なオプションを利用してギャラリーの表示をカスタマイズすることができます。ギャラリーショートコードの使い方は、WordPress Codex日本語版に記載されています。いろいろ試してみてください。

WordPress ギャラリー機能の問題点 プラグイン併用も一考

WordPressのギャラリーは、簡単に画像ギャラリーを作成できるというとても便利な機能なのですが、そのままでは少し使いにくい部分があります。

たとえば、ギャラリーのサムネイル画像をクリックすると、新しいタブではなく同じタブでリンク先の画像が表示されるので、元のページに戻る時が少々面倒です。この辺は新しいタブで開くようにしたり、戻るボタンを追加するなどのカスタマイズが必要です。

また、ギャラリー関連のWordPressプラグインには、「Gallery」や「NextGEN Gallery」、「Galleriffic」など、より多機能なものが用意されています。WordPressデフォルトのギャラリー機能は使用せず、プラグインを使うというのも手です。

いわしはWordPressのギャラリー機能と、Lightbox系プラグインの「Lightbox Plus ColorBox」を併用しています。こうすることで、リンク先画像を開いた時の見栄えもよくなります。よかったら下記の記事をご参考に。

こちらはギャラリー機能に関するオススメ記事です。「Webデザインレシピ」さんがWordPressのギャラリー機能を徹底的にカスタマイズされています。jQueryのギャラリー系プラグイン「galleriffic」と併用する方法なども解説されてますよ。

http://webdesignrecipes.com/how-to-customize-wordpress-gallery/

使いづらいWordPressのギャラリーをけっこう使えるギャラリーにする方法

コメント

  1. nao より:

    すごく参考になりました!!
    画像にリンクを貼りたいのですが、やり方がわかりません...
    よかったら教えてください!!

    • wind-mill_iwashiblog より:

      コメントありがとうございます。
      拙い記事ですが、参考になったのなら何よりです(^^)
      画像のリンクですが、このようにすればOKです(細部は省略)。
      <a href=”リンク先URL”><img src=”画像URL”></a>
      画像のタグにリンクのタグを被せるイメージですね。
      これでわからない場合は再度コメントをお願いします。

  2. nao より:

    返信ありがとうございます^^!!

    上のように、ギャラリーで制作した画像にリンクはどう付ければいいですか??
    良かったら教えてほしいです!!
    お願いします。

    • wind-mill_iwashiblog より:

      画像をアップロードするときに「添付ファイルの表示設定」でリンクを張ればよいかと。一度試してみてください。

  3. […] WordPress ギャラリー機能で画像ギャラリーを作成 […]

タイトルとURLをコピーしました