WordPress ギャラリー

概要 概要

画像ギャラリーは WordPress サイト上で複数の写真を共有する便利な方法です。WordPress メディアアップローダーのギャラリー作成機能を使用して、サイトのページや投稿にシンプルな画像ギャラリーを追加できます。

この記事では、メディアライブラリを使って画像ギャラリーを追加する方法を紹介し、生成されて投稿またはページに埋め込まれるギャラリーショートコードについて説明します。

トップ ↑

メディアライブラリを使った画像ギャラリーの追加 メディアライブラリを使った画像ギャラリーの追加

メディアアップローダーを使用って画像ギャラリーを段階的に追加する方法は次のとおりです。

: ギャラリーを追加する前に、「メディアの追加」機能やメディアアップローダーを使用した「メディアライブラリーへの追加および投稿へのメディアの挿入」をまず理解してください。

ステップ1 – カーソルを置く ステップ1 – カーソルを置く

ギャラリーはページや投稿のどの位置にも配置できます。空白ページに単体で、あるいはテキストの上、下、真ん中に配置できます。まずギャラリーを配置する場所にカーソルを置きます。段落の間にギャラリー配置する場合は下図のように改行を入力し、上下に空白のある新しい行にカーソルを置きます。

トップ ↑

ステップ2 – 「メディアを追加」ボタンをクリック ステップ2 – 「メディアを追加」ボタンをクリック

画像ギャラリーを挿入する位置にカーソルを置いた後は、編集ウィンドウの左上にある「メディアを追加」ボタンをクリックしてメディアアップローダーを起動します。表示されたポップアップウィンドウの左サイドの操作の一覧から「ギャラリーを作成」オプションを選択します。

トップ ↑

ステップ 3 – 含めたい画像を追加または選択 ステップ 3 – 含めたい画像を追加または選択

画像ギャラリーに追加する画像は、メディアアップローダーウィンドウの中央にある次のどちらかのオプションを使用して追加するか、選択してください。

  • ファイルをアップロード: 使用する画像をローカルコンピュータからアップロードエリアにドラッグしてアップロードします。複数の画像を追加できます。画像は自動的に画像ギャラリーとしてグループ化されます。
  • メディアライブラリ: メディアライブラリ内のこれまでにアップロードされた画像から画像ギャラリーに追加する画像を選択します。選択した画像の隣にチェックボックスが表示されます。

: 画像ギャラリーは、新しくアップロードした画像とこれまでにアップロードされた画像をどのように組み合わせても作成できます。作成の際には「ファイルをアップロード」タブと「メディアライブラリ」タブを自由に切り替えてください。

画像をアップロードするか選択すると、各画像のサムネイルの右上のチェックボックスにチェックが付けられます。またウィンドウの下部にサムネイルのリストが表示され、選択したすべての画像を一覧できます。選択後は ギャラリーを作成ボタンをクリックします。

トップ ↑

ステップ 4 – ギャラリーの編集 ステップ 4 – ギャラリーの編集

「ギャラリーを編集」ではページや投稿にギャラリーを追加する前に次のような編集が可能です。

  • 画像の配置換え: 画像のサムネイルをドラッグアンドドロップして、ギャラリー内で画像の順序を変更します。
  • 順序を逆にする: ギャラリー内で画像を逆に並べます。
  • 画像の説明を追加 ギャラリー内の各画像の下に表示される画像キャプションにオプションの説明を追加します。
  • 画像を削除: 画像の上にマウスを移動し「X」をクリックしてリストから画像を削除します。
  • さらに画像を追加: ギャラリーに画像を追加するには左サイドバーの「ギャラリーに追加」リンクをクリックし、「ファイルをアップロード」タブ、「メディアライブラリ」タブで画像をアップロードするか選択します。
  • ギャラリーをキャンセル: 左側のアクションで「ギャラリーをキャンセル」をクリックすると「ギャラリーを編集」ページを閉じ、画像ギャラリーをキャンセルします。

ページや投稿にギャラリーを追加する前に、右サイドバーの「ギャラリーの設定」から以下のオプションを変更できます。

  • リンク先: 公開されたページや投稿のギャラリー内のサムネイルのリンク先を、添付ファイルのページ、または直接ソースの画像ファイルに設定します。
  • カラム: ギャラリー内の画像の列数を設定します。ほとんどのサイトで適切な 3列がデフォルトです。
  • ランダム: サイトが閲覧されるたびに画像サムネイルをランダムに並べ替えて、ギャラリーを表示します。
  • サイズ: ギャラリー内の画像サイズを変更します。可能なオプションは「サムネイル」「中」「大サイズ」「フルサイズ」です。

トップ ↑

既存ギャラリーの編集 既存ギャラリーの編集

ビジュアルエディター内にサムネイルを並べた画像ギャラリーが表示されます。

画像ギャラリーの任意の領域をクリックすると、上部にアイコンボタンが表示されます。「編集」ボタンをクリックするとギャラリーの画像や設定を編集できます。「削除」ボタンをクリックすると画像ギャラリーが削除されます。

トップ ↑

ギャラリーショートコード ギャラリーショートコード

上記の手順では、画像 ID やその他のオプションを使用してギャラリーショートコードが生成され、次のように投稿またはページに埋め込みます。

[gallery ids="729,732,731,720"]

このショートコードに直接オプションを指定できます。

トップ ↑

使い方 使い方

この構文を使用して指定できるオプションがいくつかあります。

[gallery option1="value1" option2="value2"]

トップ ↑

オプション オプション

次の基本オプションがサポートされています。

orderby

表示サムネイルの並べ替え方法を指定します。デフォルトは “menu_order” です。

オプション:

  • menu_order – 「メディアの追加」ポップアップの「ギャラリー」タブで画像の順序を変更できます
  • title – 画像のタイトルに基づいて、メディアライブラリ内の画像を並べ替えます。
  • post_date – 画像を日付/時刻で並べ替えます。
  • rand – 画像をランダムに並べ替えます。
  • ID

order

サムネイルの表示に使用されるソート順を指定します。ASC または DESC。たとえば ID の降順にする場合は以下のとおりです。

[gallery order="DESC" orderby="ID"]

columns

列数を指定します。ギャラリーには、各行の最後に break (<br>) タグが含まれ、必要に応じて列幅が計算されます。デフォルト値は3です。列が0に設定されている場合改行は含まれません。例えば4列のギャラリーを表示するには以下のようにします。

[gallery columns="4"]

id

投稿 ID を指定します。ギャラリーには、その投稿に添付されている画像が表示されます。 ID が指定されていない場合のデフォルトの動作としては、現在の投稿に添付された画像を表示します。例えば、投稿123に添付された画像を表示するには以下を使ってください。

[gallery id="123"]

size

サムネイル表示に使用する画像サイズを指定します。有効値には thumbnail/medium/large/full、または add_image_size() で登録されたその他の追加の画像サイズが含まれます。デフォルト値は「サムネイル」です。 thumbnail/medium/large の画像のサイズは、WordPress 管理パネルの「設定 → メディア」で設定できます。たとえば、中サイズの画像のギャラリーを表示する場合は以下のように記述します。

[gallery size="medium"]

さらに高度なオプションには以下のようなものがあります。

itemtag

各項目をギャラリー内で囲むために使用される XHTML タグの名前。デフォルトは “dl”。

icontag

ギャラリーの各サムネイルアイコンを囲むために使用される XHTML タグの名前。デフォルトは “dt”。

captiontag

各キャプションを囲むために使用される XHTML タグの名前。デフォルトは “dd” です。例えば div/span/p タグを使用するようにギャラリーマークアップを変更するには以下のようにしてください。

[gallery itemtag="div" icontag="span" captiontag="p"]

link

画像のリンク先を指定します。デフォルト値は、添付ファイルのパーマリンクにリンクします。オプション:

  • file – 画像ファイルに直接リンクします。
  • none – リンクなし。
[gallery link="file"]

include

指定した添付ファイルの画像のみを含むコンマ区切りの添付ファイル ID。

[gallery include="23,39,45"]

exclude

特定の画像を除外するコンマ区切りの添付ファイル ID。include exclude は一緒に使用できないことにご注意ください。

[gallery exclude="21,32,43"]

トップ ↑

リソースとギャラリープラグイン リソースとギャラリープラグイン

この記事は役に立ちましたか ? どうすればさらに改善できますか ?