プラグイン Advanced Custom Fields の使い方

About WordPress

プラグイン「Advanced Custom Fields」の使い方を簡単にメモ。

1:参考ページ

以下のページが(古いが)とてもわかりやすく Advanced Custom Fields の解説をしていると思うので貼っておく。

2:プラグインのインストール

  1. プラグインの新規追加「Advanced Custom Fields」検索してインストール
  2. ダッシュボードに「カスタムフィールド」が表示される
  3. ブロック繰り返しのアドオンプラグイン「Repeater Field」を利用する場合は、手動でプラグインインストールをする(Repeater Field 有料アドオン)

3:フィールドエリア作成後のフィールド表示設定

Advanced Custom Fields フィールドを複数作ることが出来る。フィールドグループとして区分されてフィールドごとに設置設定が変えることができることが魅力です。

各フィールドの設置位置設定を「位置」でしっかり設定しましょう。

4:フィールド作成後にサイト表示をするためのスニペット

通常のカスタムフィールド作成(非繰り返しボックス)

基本設計

まずは、カスタムフィールドを使えるように通常ループのスニペット。

これに挟まれるようにカスタムフィールド表示用コードを記述。

“type” の部分を Advanced Custom Fields 側で設定した語句へ変更する。

HTML ページへの記述例

有料アドオン「Repeater Field」を用いた繰り返しボックス設計

有料アドオン「Repeater Field」を用いた繰り返しボックスを利用すると、通常の Advanced Custom Fields 作成とは異なる手順になる。

フィールドタイプの選択肢として「Repeater(繰り返し)」が選択できるようになる。

これを選ぶと「Repeater Fields」という新たな項目が追加されて、ここで設計したサブフィールドが、メインフィールド内で繰り返しボックスとなる。

注意

注意点:画像挿入フィールドを設定するときに、返り値で「画像のURL」を選択しないとせっかくアップした画像が表示されないので注意したい。

注意02

フィールドタイプ」で「テキストエリア」を選択したときに、「Placeholder Text=最小文字数」を「0」に「Character Limit=最大文字数」は制作サイトによっては設定する。フィールド内の文字数によって型崩れをおこしてしまう場合の対策として制限をもうけるのだ。

基本設計

まずは、カスタムフィールドを使えるように特殊なループスニペット。

「fieldname」部分は設計した任意のフィールド名に変更する。

このフィールド名は繰り返しボックスを使うよ! という命令のループなのだ。

繰り返しボックスは以下のスニペットを挟み込む。

わかりやすくするために <h3> ではさんで表記。「name」の部分は設計した任意のサブフィールド名に変更する。

HTML ページ記述例

このデザインを繰り返しボックスとして利用したい場合の例。

メインフィールド(HTMLに記述するときには「フィールド名」が必要になる)
↓フィールドラベル:フィールド名

  • フィールド名:applist

サブフィールド(HTMLに記述するときには「フィールド名」が必要になる)

  • アプリ名称:name
  • 画像:contents-img
  • Download テキスト:dl-url-title
  • Download リンク先の URL:dl-url
  • Reference テキスト:ref
  • Reference リンク先 URL:ref-url
  • 説明:description

このサンプルコードの場合はこんな感じで設計されている。

繰り返しボックス応用編

画像添付用のサブフィールドを作成する

画像自体の URL を入力する部分と alt テキストを入力する部分、2つのサブフィールドが必要になる。

ライトボックス等の関係でリンク付きの画像添付用サブフィールドを作成

画像にリンクを付けたい場合は、<a> タグを画像に追加し、画像の返り値が「画像の URL」になっているのでリンクにも画像のフィールド名 PHP を挿入してあげる。

この場合拡大表示でライトボックスを使用したいので、Lightbox のパスをリンクにマニュアルで挿入してある(Lightbox によって臨機応変に)。

ソースコードをそのまま反映させる(非繰り返しも共通)

例えば、Google マップの添付なら、ifream を HTML へ添付する。

カスタムフィールドの「フォーマット」の項目を「Convert HTML into tags」に選択すると、ソースコードをそのままプレーンで反映できるので、Google ナップから ifream タグで囲われている「埋め込みコード」を選んで貼り付ければ CSS で設定した通りのGoogle マップが反映される。


以上が Advanced Custom Fields 使い方メモだ。

コメントを残す

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