デザイナーと繋がる!WebJoyクリエイターブログ WebJoyコミュ

2016年06月15日 WordPressWEB技術

advanced custom fields特集その3!Gallery Fieldの使い方

皆さんこんにちは!長崎のホームページ制作会社、合同会社WebJoyです。

カスタムフィールドなのに写真の扱いがかなり楽になります!

あるホームページの編集中の出来事。ホームページに画像を各項目にアップロード中。

pic

こんな経験ありませんか?写真のアップロード場所を間違えたらひとつひとつ項目の設定をし直さないといけないので正直面倒ですよね?

写真をもっと一気にアップしたり簡単に順番を変更できればいいと思いませんか?

実は、Gallery Fieldを使えばそんな願いも簡単に解決できるのです!

Gallery Fieldの使い方

今回も前回同様インストール→有効化を行います。

すると、下図のようにAdvanced Custom Fieldのフィールドタイプ欄に「Gallery」という選択肢が増えます。pic3

ここをGalleryにすることで便利な画像アップロード機能が追加されます。

画像の挿入

実際にカスタムフィールド設定ページの「位置」項目で指定した編集画面を開いてください。

すると、以下の様な項目が表示されると思います。

pic4

ここで「画像を追加する」をクリックするとメディアライブラリが起動します。

このメディアライブラリはShiftやControl(Command)キーで複数選択も可能です。選び終えたら右下の「選択」をクリックします。

すると以下の画像のように表示されます。なんと画像の上でドラッグをすることで画像の順番を入れ替えることができるのです。

pic5

出力方法

当然これだけでは表示はできません。以下の出力コードをPHPファイルへ貼り付けることで表示がされるようになります。foreach文内は任意のタグに置き換えてください。また、Repeater FieldやFlexible Content Fieldの中に設定したい場合は、get_field部分をget_sub_fieldに置き換えないと表示されないためお気をつけ下さい。

たったこれだけで出力も完了し、全ての設定が完了です。簡単でしょ?

まとめ

今までたくさん画像をアップする際にひとつひとつフィールドを作っていた方はぜひgallery Fieldを導入してみてください。金額も有料アドオン全て同じ金額で$20なので日本円で2000円程度です。


WebJoyで使用しているサーバー情報

合同会社WebJoyでは、エックスサーバーを主に使用しています。その理由はWordpressを運営する上で重要なサーバースペックが高く、かかる費用も安いため個人でのご契約でもおすすめしています。会社経営をする前から約8年間お世話になっているサーバーです。ブログを始めたい方は是非ご契約ください!上記の画像をクリックすることでエックスサーバーの公式サイトに移動します。

この記事を書いた人

長崎のホームページ制作会社 合同会社WebJoy
代表社員 朝永祐太

長崎県にてホームページ制作を行っております。今の時代、Webを活用するためにはブログは必須だと感じ、最近ではブログ集客に力を注ぎ始めました。
実際に当ブログのアクセスを増加させることでよりよい提案ができればと考えております。
そして、近い将来、有益な情報配信を主とした企業を目指しております!

関連記事

2017年12月10日コレで完結!Bootstrapの使い方3
2017年12月07日まだまだ出来ることたくさん!Bootstrapの使い方まとめ その2
2017年12月01日スマホサイト構築に便利!Bootstrapの使い方まとめ その1
2017年01月01日CSSで四則計算!CSS calcの使い方
2016年06月19日advanced custom fields特集その9!Table Fieldの使い方
  • Facebookページ
  • 公式twitterアカウント