エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


Advanced Custom Fields(ACF)のアドオン・ギャラリーの使い方解説

      2017/03/11

Advanced Custom Fields(ACF)のアドオン・ギャラリーの解説

 

アドオン「ギャラリー」で出来ること

 
「Advanced Custom Fields」は、WordPressのカスタムフィールドを利用する時に非常に便利なプラグインですが、その Advanced Custom Fieldsにはさらに便利になる有料アドオンも用意されています。
 
その中から今回は「ギャラリー」について解説を行います。
 
 
アドオンの「ギャラリー」は、フィールドタイプ「ギャラリー」が利用できるようになるアドオンです。
 
簡単に説明すると、
フィールドタイプ「ギャラリー」は、フィールドタイプ「画像」の複数版です。
 
フィールドタイプ「画像」は 1枚単位で画像をアップロード、編集できるフィールドタイプですが、「ギャラリー」は複数枚の画像をまとめてアップロード、編集が出来るフィールドタイプとなっています。
 

フィールドタイプ「ギャラリー」と「画像」の相違点

 

  • 「ギャラリー」は複数ファイルの画像を扱える。「画像」は 1ファイル。
  • 「ギャラリー」は画像の縦横のサイズを制限できる。「画像」は制限できない。
  • 「ギャラリー」は画像の容量を制限できる。「画像」は制限できない。
  • 「ギャラリー」はファイルタイプを制限できる。「画像」は制限できない。

 
そのため、投稿画面でアップロードされるファイルの画像の縦横サイズ、ファイルの容量、ファイルタイプを制限したい場合は「ギャラリー」を利用する必要があります。
その上で、扱う画像が 1枚だけの場合は「最小選択数」「最大選択数」を「1」にすることでアップロードできる画像を 1枚に制限することができます。
 
また、同じくアドオンにある「繰り返しフィールド」を使うことで、投稿者の任意の枚数の画像をアップロードさせる仕組みを作ることは出来ますが、ファイルのサイズ、容量等で制限をしたい場合は「ギャラリー」を使う必要があると言えます。
 
 
また、その他の Advanced Custom Fieldsに関する解説記事は下記にありますので参考にしてください。
Advanced Custom Fields管理画面の全項目完全解説・カスタムフィールド決定版!
Advanced Custom Fieldsの全項目解説・公開側表示編集編
WordPressのカテゴリやタクソノミーにカスタムフィールド項目を追加する方法
Advanced Custom Fieldsの関数の全部の使い方を調べてみた
Advanced Custom Fields(ACF)のアドオン・ギャラリーの使い方解説
Advanced Custom Fields(ACF)のアドオン・繰り返しフィールドの使い方解説
WordPressのカスタムフィールド、カスタム投稿、カスタムタクソノミーとは?
Advanced Custom Fieldsのカスタムフィールドの登録上限が max_input_varsに影響する問題の対処方法
Advanced custom Fieldsのフィールドグループを簡単に複製する方法
Advanced custom Fieldsの条件判定活用方法・フィールドグループ複製より便利
 
 
※この解説の注意点を 1つ。
この記事は Advanced Custom Fields Pro版に基づいて解説をしていますので、有料アドオンを個別に追加した場合は違う箇所がある可能性はゼロではありません。
 
 


 

フィールドタイプ・ギャラリーの管理画面の解説

 
20151008_wp_01
 

フィールドラベル

入力画面のラベルとして表示される項目です。
 

フィールド名

プログラム上の変数名として使われる文字列になります。
日本語も使えるはずですが、半角英数字で設定する方が無難です。

説明

入力する内容の説明を記載します。
入力した情報は、フィールドラベルと入力フィールドの間に編集されます。
ちなみに、改行を入力しても改行されませんが、
タグを始め、HTMLタグは使用できます。
 

必須か?

入力フィールドの値が必須項目か、否かの条件設定です。
 

最小選択数

ギャラリーのフィールドを有効にするために必要な最小の画像数を指定します。デフォルト値は 0です。
 

最大選択数

ギャラリーのフィールドを有効にするために必要な最大の画像数を指定します。デフォルト値は 0です。
 

プレビューサイズ

投稿画面の「ギャラリー」の編集画面に表示される画像のサムネイルのサイズを指定します(公開側の画面ではなく、投稿画面で編集する際の画像の大きさの指定です)。
デフォルトは「サムネイル (150 x 150)」です。
 
選択肢は、以下になります。
  サムネイル (150 x 150)
  中 (300 x 300)
  大 (1024 x 1024)
  Thumb100 (100 x 100)
  Thumb150 (150 x 150)
  フルサイズ
 

ライブラリ

全て
すべての投稿、固定ページで利用できる画像として利用する場合に選択します。
投稿にアップロードされる
画像をアップロードした投稿、固定ページでのみの利用に限定する場合に選択します。
ユーザごとに編集できる投稿を限定している場合などでの利用が想定されるでしょう。
デフォルトは「全て」です。
 

最小

アップロードするファイルの縦・横のサイズ(px単位)と、ファイルの容量(MB単位)での最小値の制限をすることができます。
100kbなどを入力したい場合は、0.1MBの様に小数点形式で入力します。
※Ver.5.1.9で追加されました。
 

最大

アップロードするファイルの縦・横のサイズ(px単位)と、ファイルの容量(MB単位)での最大値の制限をすることができます。
※Ver.5.1.9で追加されました。
 

許可するファイルタイプ

アップロードを許可するファイルタイプを拡張子で指定することができます。
全て許可する場合は空白のままにして、複数設定する場合は「,(カンマ)」で区切ります。
※Ver.5.1.9で追加されました。
 

条件判定

判定条件は、「選択肢」系のフィールドタイプと組み合わせて利用する項目です。
条件判定は、説明すると長くなりますので、「カスタムフィールド決定版!Advanced Custom Fields全項目完全解説・管理画面編/Advanced Custom Fieldsの選択肢項目の条件判定」を参照してください。
 

ラッパーの属性

投稿画面での幅や、CSSで設定する class、idを指定することができ、投稿画面でのデザインを希望通りに設定する際に利用します。
 
表示される画面のイメージは、次の項目に記載しています。
 
 

フィールドタイプ・ギャラリーの投稿画面の解説

 
フィールドタイプの各設定を行うと、投稿画面での入力画面は以下のようになります。
 
「ラッパーの属性」の「width」を 100%にすると下記の様になります。
20151008_wp_02
 
「ラッパーの属性」の「width」を 50%にすると下記の様になります。
20151008_wp_03
 
 

フィールドタイプ・ギャラリーのテンプレートへの編集方法の解説

 
フィールドタイプ「ギャラリー」で保存された情報を、テンプレートファイルへ編集する方法です。
 
保存されている画像の情報は、フィールドタイプ「画像」の「返り値:画像オブジェクト」を選択したものとほぼ同じものが取得できます。ギャラリーは、複数の画像を登録しますので、値は配列で取得できるところが違います(取得できる値も微妙に違いますが)。
そのため、値を取得する方法、編集する方法も「返り値:画像オブジェクト」の時とほぼ同じです。
 
 
値の取得方法は、以下のようになります。

 
「get_field()」関数については、下記にも記事を書いていますので参考にしてください。
 「Advanced Custom Fieldsの全項目解説・公開側表示編集編/Advanced Custom Fieldsの入力値を取得する関数
 「Advanced Custom Fieldsの関数の全部の使い方を調べてみた/get_field()
 
 
「$s_images = get_field ( ‘s-gallery’ );」で取得できる値は、下記の様になります。
 

 
 
これを必要に応じて編集していきますが、編集方法のサンプルは以下のようになります。
 

 
 
実際に表示される画面は、下記の様になります。
 
20151008_wp_04
 
デザインを整えるためには CSSにて ul、liタグの設定をする必要があります。
また、基本的な処理は下記の「フィールドタイプ・画像」と同じになりますのでこちらも参考にしてください。
 「Advanced Custom Fieldsの全項目解説・公開側表示編集編/フィールドタイプ・画像
 
 

フィールドタイプ・ギャラリーをショートコードで編集方法の解説

 
ギャラリーの画像を簡単に編集する方法として、ショートコードを利用する方法も用意されています。
具体的には、下記のようなソースコードで処理を行うことができます。
 

 
上記のソースコードで下記の画面になります。
20151008_wp_05
 
 
ショートコードでは、引数に画像の IDを指定することで画像を編集することが出来ます。
 
画像 IDのみを取得する方法は、「Advanced Custom Fieldsの関数の全部の使い方を調べてみた/get_field()」で解説をしていますが、「get_field()」関数の 3つ目の引数に falseを指定することで取得することが出来ます。
「ギャラリー」の場合は、「画像ID」を配列として取得できます。
 
取得した画像 IDの配列を「implode()」関数で「,(カンマ)」でつなげて、ショートコードの「ids」の値として設定することで公開側のページに編集することができるようになります。
 
また、ショートコードで値を編集する方法は「Advanced Custom Fieldsの関数の全部の使い方を調べてみた・Shortcode」を参照してください。

 - WordPress

GoogleAdwords

GoogleAdwords

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

※入力いただいたコメントは管理者の承認後に掲載されます。

  関連記事

テキストエディタ秀丸で正規表現による置換の方法の解説

秀丸で正規表現による置換を行うポイントを紹介。置換をしながら特定のキーワードは置換せずに置換結果に残す方法を実例を上げながら解説しています。

プラグインが原因で起動しないWordPressを復旧させる方法解説

プラグインが原因で WordPressが起動できなくなった、ログインできなくなった場合の対処方法の解説です。

Captchaを使って WordPressのコメントスパム対策をする

コメントスパム対策として入力させない対策の一つとしてCAPTCHAという方法がありそれを簡単に実装できるプラグインCaptchaの解説です。

wp_mail()関数でWordPressのスパム対策済のメールフォーム作成

WordPressでメール送信フォームを作成するための関数「wp_mail()」の使い方の解説。CC、BCC、添付ファイルも HTMLメールも設定可能。

AdminerはWordPressのデータベース管理プラグインの決定版!

データベース管理プラグインはAdminerがあれば他に必要ありません。なぜならDB管理ツールAdminerと同じものをプラグインとして提供しているからです。

Advanced custom Fieldsの条件判定活用方法・フィールドグループ複製より便利

Advanced custom Fieldsの条件判定を使ってカテゴリごとに入力項目を変化させる方法を実例を用いて解説します。投稿フォーム構築が格段にレベルアップします。

実測比較・レンタルサーバスピード選手権!WordPressが速いのは?

WordPressが一番速く動くレンタルサーバはどれだ!実際にこのエス技研ブログをコピーして8つのサーバを比較。結果はヘテムル、X10、さくらプレミアムが同レベルで優秀。

Comment Rating FieldでWordPressのコメントに口コミサイト機能を追加

口コミサイトを構築するためのプラグイン。評価点を投票する仕組みをコメント投稿機能に追加する方法で実現。口コミサイトを構築するには十分な機能を提供。

WordPressのSEOタイトル、キーワード、ディスクリプション編集解説

ヤフーやグーグルの検索結果を見ながらSEO視点でタイトル、ディスクリプションを書く際の基準を解説!スマホ対策も解説!

WordPress 任意のファイルを読み込むショートコードの処理

投稿ページにショートコードを利用して任意のファイルを読み込む処理の解説です。