エス技研

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.

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

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

  関連記事

Category Order and Taxonomy Terms Orderでカテゴリ・タクソノミーのタームの順番を並び替える

標準機能では行えないカテゴリやタクソノミーの並び替えを行うプラグインCategory Order and Taxonomy Terms Orderの紹介です。

WordPressで使うおススメ FTP、テキストエディタ、圧縮解凍ソフト

WordPressサイトを構築、運用するために必要となるFTPソフト、テキストエディタ、圧縮解凍ソフトのオススメソフトを紹介。

highlight.jsの設定方法を解説。 Syntax Highlighterから乗換え、高速化にも最適

Crayon Syntax Highlighterの代替案としてhighlight.jsを試してみた。highlight.jsは設置簡単で軽量なシンタックスハイライト。デザインもCSS変更だけの簡単変更。

Broken Link Checkerのリンク生死チェックでサイトの品質向上!SEO対策!

Broken Link Checkerは記事内のリンクのリンク切れチェックをし自動的にリンク切れの対処をします。リンク切れは一覧表示されますので手動での処置も可能です。

Edit Author Slugで WordPressの不正ログイン・不正アクセスを回避

WordPressのセキュリティ強化に Edit Author Slugを使う理由と設定方法の解説をしています。

WordPressプログラム全体で定数や変数を利用する場合の設定方法

WordPressで関数を追加するときなど、全体で同じ変数を使いたいと思う場面の対処方法です。変数を記述する関数はfunctions.php、wp-config.phpのいずれか。

WordPress・Contact Form7、MW WP Form共通 細かなデザイン調整方法

お問い合わせフォームプラグインの Contact Form7、MW WP Formにおけるラジオボタン、チェックボックスなどの見た目を調整する小技を紹介。

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

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

Throws SPAM Awayでコメントスパム対策を完璧に。自動削除で運用の手間ゼロ

コメントスパム対策の決定版ともいうべきプラグイン。簡単な設定で自動的にスパムコメントを削除してくれるので煩わしい作業はゼロに。細かな設定も可能。

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

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