WordPressのギャラリー機能の使い方｜写真の追加方法

• 
• 
• 

WordPressにはギャラリー機能がありまして、投稿ページや固定ページに写真集を配置できる事はご存知でしょうか？プラグイン無しでもギャラリーページは作れるんですよ。

WordPress2.5から備わっている機能で、勿論、現在の最新のWordPress3.8系にも備わっております。

スポンサーリンク

今回は、WordPressギャラリー機能の使い方と写真の追加方法についてWordPress3.8を利用して綴っていきます。

• ギャラリー機能の使い方の順番
• ギャラリー機能の細かい設定
• 設置したギャラリーに写真（画像）を追加～その１｜テキストモード
• 設置したギャラリーに写真（画像）を追加～その２｜ビジュアルモード
• ライトボックス導入でギャラリーの画像を拡大させる方法
• WordPressのギャラリー機能を使いこなそう！

ギャラリー機能の使い方の順番

※本文入力画面はテキストモード前提で進めます。

１まず、投稿ページでも固定ページでもギャラリーを設置したい場所にカーソルを置き、本文入力画面上の「メディアを追加」ボタンをクリックします。

２すると、”メディアを挿入”という写真（画像）をアップロードする画面が出てくるのですが、左側に「ギャラリーを作成」というメニューボタンがあるのでクリックします。

３これまでアップロードした写真が並んでいるので、ギャラリー用の写真をひとつずつ選択していきます。
選択し終わったら右下の「ギャラリーを挿入」ボタンをクリックしましょう。

※写真ひとつひとつに細かい情報を添えられるので、必要に応じて入力しておきましょう。
スライド機能などを追加する時の為に、”タイトル”、”キャプション”、”説明”などは必要になってくると思うので、後々の拡張の為にも設定しておいて損は無いです。

４”ギャラリーを挿入”ボタンをクリックすると、”ギャラリーを編集”画面に遷移するので、左側では写真の並び替えやキャプションの入力、右側ではギャラリーの仕様を設定できます。

左側：写真をドラッグ & ドロップで並び替える事ができます。
右側：リンク先は、ライトボックス（画像拡大機能）などのプラグインを使う場合の為に「メディアファイル」にしておきましょう。何も設定しない場合は「なし」にしておきましょう（画像にリンクが付きません）
カラム数は、ページの横幅と画像の横幅とを相談して数を決めましょう。

５ギャラリーの設定が済んだら「ギャラリーを挿入」をクリックしましょう。すると本文にギャラリーが追加されたというショートコードが挿入されるので、ギャラリーの設置完了です！

［gallery id="5277"］
［gallery ids="5277,5296,5299"］

写真１枚１枚にはidナンバーが付いていて、id（単数）やids（複数）には選択した写真のidナンバーが羅列します。

ギャラリー機能の細かい設定

※ショートコードの［ ］記号は半角です。

columns
カラム数を指定できます。各々の行の後には改行タグが挿入され、カラムの幅は適切に調整されます。初期値は 3 です。0 にすると改行タグは挿入されません。
※４カラムの場合

［gallery columns="4"］

id or ids
ギャラリーに表示する写真を写真に付いているIDで指定できます。
※idが5296の写真（画像）を表示

［gallery id="5296"］

size
初期値ではサムネイル画像のサイズでギャラリーに表示されます。
サムネイル以外のサイズの指定も可能で、 “thumbnail”, “medium”, “large”, “full” が設定できます。
※”medium（中サイズ）” の写真を表示する場合

［gallery size="medium"］

order
画像の表示順序を指定。初期値は “ASC” 。

orderby
画像の表示順序のキーとなる項目を指定。スペース区切りで複数指定ができます。
初期値は “menu_order ID” です。
“rand” （ランダム）の指定も可能。その場合、order の指定は無視される。

［gallery ids="4865,4866,4867,4868" orderby="rand"］

itemtag
ギャラリーの各項目（画像とキャプション）を囲む XHTML タグの名前を指定します。初期値は “dl” 。

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

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

※ギャラリーのマークアップを div, span, p タグに変更するなら以下のように指定

［gallery itemtag="div" icontag="span" captiontag="p"］

link
“file” を指定すると各画像は画像ファイルへリンクされます。
リンク先で「メディアファイル」を選択すると付きます。
初期値はメディアのパーマリンクへのリンクです。

include
表示したい添付画像のIDをコンマで区切って指定。

［gallery include="14,32,47"］

と指定すると、指定したIDの写真（画像）のみ表示されます。

exclude
表示したくない添付画像のIDをコンマで区切って指定。

［gallery exclude="7,13,21"］

と指定すると、指定したIDの写真（画像）は表示されません。
include と exclude の併用は不可。併用する場合は include が優先されます。

設置したギャラリーに写真（画像）を追加～その１｜テキストモード

写真（画像）データ１枚１枚にはメディア用のidナンバーが付いているので、「メディアライブラリ」ページにて、写真のサムネイル画像や写真タイトルにカーソルを乗せると、ブラウザ（chromeの場合）の右下に「post=5277」と表示されているので、5277が写真用idナンバーですので、ギャラリーのショートコード内のidsにidナンバーを追記すれば、写真を追加できます。

写真の詳細画面に遷移すれば、ブラウザのURL表示場所に「post=5277」とあるのでidナンバーがわかります。

ギャラリーから外したい写真がある場合は、該当する写真のidを削除すればOKです。

設置したギャラリーに写真（画像）を追加～その２｜ビジュアルモード

まず、ビジュアルモードをOFFにしてある場合は、ユーザーのプロフィール編集画面の「ビジュアルリッチエディッターを使用しない」のチェックを外します。

すると、ギャラリーが挿入された場所には上記写真のようなギャラリーエリア図が表示されます。
※何やらWordPress3.9からは図では無く、ギャラリーに表示される実際の写真（画像）がプレビューされて、ひと目で選択した写真が分かるようになるようです。

ギャラリー部分をクリックすると、ギャラリーエリアの左上にボタンが２つ表示されます。

左側のボタンは”ギャラリーを編集”。
右側のボタンは”ギャラリーを削除”。

”ギャラリーを編集”ボタンをクリックすると、「ギャラリーを編集」画面に遷移し、選択してある写真が表示されます。ギャラリーで表示してある写真の削除やキャプションの編集、ギャラリーの再設定が可能です。

ギャラリーに写真を追加する場合は、左側のメニューにある”ギャラリーに追加”ボタンをクリックします。
遷移した画面にて、追加する写真の選択やアップロードができます。

作業が完了したら右下の”ギャラリーを更新”ボタンをクリックすると写真の追加や削除、設定した内容が反映されます。

ライトボックス導入でギャラリーの画像を拡大させる方法

wp-jquery-lightboxというプラグインを利用すれば、ギャラリーで表示してある写真を拡大表示したりできます。この為に、ギャラリー設定でのリンク先は「メディアファイル」にしておきましょう！これを設定しておかなければライトボックスは動かないので注意です。

WordPressのギャラリー機能を使いこなそう！

いかがでしょうか？

プラグインを使わなくてもWordPressにはギャラリー機能が標準搭載しておりますので、一度試してみて下さい。凄く便利ですよ。
応用も可能で、ギャラリー機能を拡張するプラグインも多数あるので、用途に合わせてカスタマイズされてみて下さい。