エス技研

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.

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

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

  関連記事

タクソノミーの一覧をショートコードで編集・ソート機能付き・wp_list_categories

カスタムタクソノミーのターム一覧をショートコードで編集する方法の解説です。Category Order and Taxonomy Terms Orderを利用してソート機能を追加したバージョンです。

WordPressで WPtouchを入れてモバイルテーマを「OFF」にしたら元に戻れなくなった

WPtouchを入れてモバイルテーマを「OFF」にしたら元に戻れなくなった。これは「wp_footer」の設定に問題があるからだった。

Search RegexでWordPress投稿の文字列を検索・置換する使い方解説

WordPressの投稿テキストを検索、置換するプラグイン Search Regexの使い方の詳細解説です。

WordPressの Google XML Sitemapsで WebMaster Tools用の sitemap.xmlを生成

WordPressの Google XML Sitemapsで WebMaster Tools用の sitemap.xmlを生成する方法を説明しています。

WordPressのメディア設定でアップロードするファイルの保存場所を変更する方法

メディアのアップロードするファイルの保存先を変更する方法の解説。現在はオプションとなっていますので、/wp-admin/options.phpから設定します。

Theme My Loginでメール認証、管理者承認付の会員管理・基本編

会員管理をするプラグインTheme My Loginの解説。メール認証、管理者認証、reCAPTCHAによるいたずら登録を防止し、ログイン攻撃対応のセキュリティも備わっている。

Advanced Custom Fields(ACF)のアドオン・繰り返しフィールドの使い方解説

Advanced Custom Fieldsのアドオン・繰り返しフィールドについて解説。繰り返しフィールドは投稿者が入力フィールドを追加しながら情報を入力できるフィールドを提供。

WordPress データベースを管理するための強い味方のプラグイン WP-DBMANAGER

データベースを管理するための強い見方のプラグイン「WP-DBMANAGER」の使い方の説明です。

WordPressの 外観のテーマのための関数の並び順

WordPressのカスタマイズの際にテーマのテンプレートを編集しますが、そのテーマファイルの並び順の解説です。

WordPressのテーマ管理方法とテーマのHTML編集のポイント解説

テーマ変更で無限の可能性!テーマの選び方と設定方法、デザイン修正のためのHTML修正のポイントを解説。