Advanced-Custom-Fieldsn「ギャラリーフィールド」購入
Advanced Custom Fields

Advanced Custom Fieldsで枚数制限無しのギャリーを作る

Advanced Custom Fields「ギャラリー」Add-Ons(有料:$25.00 AUD)

私の大好きなAdvanced Custom Fieldsは、とてつもなく便利でサイト制作には今や欠かせない存在です。だって楽なんだもん。

しかし、例えばファッション関係の洋服を紹介するギャラリーや、中古車屋さんの車の写真を色々と載せたいギャラリー、または不動産サイトのようなギャラリーを作成する時に、「画像」のフィールドタイプを数個用意する様な形だと、枚数が制限される上に削除や並び替えが面倒でちょっと不格好ですよね。

そんな時にAdvanced Custom Fields有料アドオンがあると見事なまでに格好良く解決してくれます。
まず見てみてみましょう。管理画面はこのようになります。

  • Advanced-Custom-Fields「ギャラリー」Add-Ons削除も簡単
  • Advanced-Custom-Fields「ギャラリー」Add-Ons移動も簡単
  • Advanced-Custom-Fields「ギャラリー」Add-Ons並び替えも簡単

と、この様に素晴らしく便利なギャラリーが使えるようになるAdvanced Custom Fields「ギャラリーアドオン」$25.00 AUDいかがですか奥さん!

「ギャラリー」Add-Ons購入

「Add-ons」から「購入してインストール」
「カスタムフィールド」→「Add-ons」から「ギャラリーフィールド」の「購入してインストール」から購入ページに移動。

「カスタムフィールド」→「Add-ons」

製作者サイトからPayPalで購入
製作者サイトに飛んで、画面右側の「PurchasePurchase Add-on」のボタンから会員登録して購入。
$25だけど、1サイトに使うだけならどれかアドオン一使うと他のアドオン全部使える案内が来るので、そういう場合はギャラリーアドオンでも繰り返しアドオンでも一つ買えばOK。でもプロの方はAdvanced Custom Fields PROを買うことをおすすめしますよ。絶対に損はしませんから。

Advanced Custom Fieldsn「繰り返しフィールド」Add-Ons

zipファイルをダウンロード
PayPal支払いできるので、支払ってZIPファイルをダウンロードしましょう。
ダウンロードしたZIPファイルは、解凍してFTPでwp-content/plugins/フォルダに入れるか、プラグインの新規追加からプラグインをZIPファイルごとアップロードして下さい。
アドオンは全て、普通のプラグインの様にインストールして有効化することで機能が使えるようになります。

【Advanced Custom Fields】「繰り返しフィールド」Add-Onsダウンロード(この画像は繰り返しフィールドのものです)

「ギャラリーフィールド」の使い方

使い方は実は説明する程の事でもありません。フィールドタイプの中に「ギャラリー」が追加されますので、それを選択すればOK!最小枚数や最大枚数の設定。ファイルサイズの上限の設定、許可するファイルタイプ(拡張子)等も設定できます。

Advanced-Custom-Fieldsn「ギャラリーフィールド」使い方

とまあこれだけでページ上部で紹介したギャラリー機能が使えるようになります。
次は表示するときの方法をご紹介いたします。

表示のさせ方

表示はこんな感じです。

$s_images = get_field( 'Photo' );
$s_images_count = count($s_images);
if ( $s_images ) {
	foreach ( $s_images as $key => $s_image ) {
		echo'<li class="is-active" data-caption="' .  $s_image['alt'] . '">';
		echo'<div class="dtlslider_cstphoto">';
		echo'<div class="dtlslider_cstphoto-inner">';
		echo'<img src="' . $s_image['url'] . '" alt="" />';
		echo'</div>';
		echo'<div class="dtlslider_cstphoto-count">' . $key . '/' . $s_images_count . '</div>';
		echo'</div>';
		echo'</li>';
	}
}

上記はjquery.bxslider.jsを使う時の書き方ですので、自分流に直して書いてくださいね。
因みにforeachの中で$s_imageに対してprint_rすると

(
    [ID] => 1473
    [id] => 1473
    [title] => 100026830423_go
    [filename] => 100026830423_go-1.jpg
    https://kurubusi.net => http://ドメイン/wp_test/wordpress/wp-content/uploads/2016/04/100026830423_go-1.jpg
    [alt] => 
    [author] => 1
    [description] => 
     => 
    [name] => 100026830423_go-2
    [date] => 2016-04-27 05:32:48
    [modified] => 2016-04-27 05:32:48
    [mime_type] => image/jpeg
    [type] => image
    [icon] => http://ドメイン/wp_test/wordpress/wp-includes/images/media/default.png
    [width] => 800
    [height] => 533
    [sizes] => Array
        (
            [thumbnail] => http://ドメイン/wp_test/wordpress/wp-content/uploads/2016/04/100026830423_go-1-150x150.jpg
            [thumbnail-width] => 150
            [thumbnail-height] => 150
             => http://ドメイン/wp_test/wordpress/wp-content/uploads/2016/04/100026830423_go-1-300x200.jpg
            [medium-width] => 300
            [medium-height] => 200
            [medium_large] => http://ドメイン/wp_test/wordpress/wp-content/uploads/2016/04/100026830423_go-1-768x512.jpg
            [medium_large-width] => 660
            [medium_large-height] => 440
            [large] => http://ドメイン/wp_test/wordpress/wp-content/uploads/2016/04/100026830423_go-1.jpg
            [large-width] => 660
            [large-height] => 440
            [minnow-site-logo] => http://ドメイン/wp_test/wordpress/wp-content/uploads/2016/04/100026830423_go-1.jpg
            [minnow-site-logo-width] => 300
            [minnow-site-logo-height] => 200
        )

)

これだけ沢山の情報が入っているので、コレを自由に使っていい感じにしてくださいね。

まとめ

先程も書きましたが、販売サイトにログインして、1サイトだけで使うならアドオン一つ購入して、再度ログインすると、サービスで全部一回だけ使っていいよーっていうのが来てるので、1サイトの場合はそれでOK!
でもプロの方は他のアドオンも絶対に使えるものだからAdvanced Custom Fields PROを購入することをおすすめしますよ~!

著者