Advanced Custom Fields の使い方

• カスタムフィールドの追加方法
• カスタムフィールドの表示方法
  • テーマのファイルに設定する方法
  • ショートコードで表示させる方法

カスタムフィールドの追加方法

Advanced Custom Fields を使って独自のフィールドを追加するには、次のような形で編集・設定を行っていきます。

ここではテストとして、「記事タイトル下にリード文のフィールドを作成」を行っていきます。

1. [カスタムフィールド]  > [新規追加] をクリックします。
   
2. フィールドグループのタイトルを入力してください。
   その後、[場所] > [ルール] で [投稿タイプ] と [投稿] になるように設定してください。
   
3. [フィールドを追加] をクリックします。
   
4. フィールドの項目ラベル・フィールド名・フィールドタイプを入力していきます。
   
5. [設定] > [有効] を [はい] にしてください。
   これで編集は完了ですので、右上の [更新] ボタンをクリックしてください。
   
6. 次に、投稿ページにカスタムフィールドが表示されているかを確認します。
   [投稿] > [新規追加] をクリックし、記事のタイトルを入力しましょう。
   
7. 画面を下までスクロールすると、先ほど作成したカスタムフィールドが表示されていることが分かります。
   設定した項目に実際にリード文を書き、[更新] ボタンを押せば完了です。
   
8. ただし、ここまでの設定だけでは実際のページに内容は反映されません。
   詳しくは次の項目でお伝えします。

カスタムフィールドの表示方法

Advanced Custom Fields は、設定するだけではなく表示設定を行っておかないと、実際のページに内容が反映されません。

ここでは、次の2つの表示設定の方法をお伝えしていきます。

• テーマのファイルに設定する方法
• ショートコードで表示させる方法

テーマのファイルに設定する方法

まずは、WordPress テーマのPHPファイルに必要情報を記述する方法です。

今回は投稿ページでカスタムフィールドを表示させるため、「single.php」や「singlular.php」ファイルが該当します。

関数は「the_field();」を利用し、()内に含める関数は先ほど設定したフィールドグループの編集画面で確認することができます。

よって今回は、「the_field( ‘lead’ );」という関数をPHPファイルに挿入します。

ショートコードで表示させる方法

ショートコードを利用する場合、投稿編集ページの本文に を埋め込んでください。
上記の例の場合は、「」というショートコードを設置することで、値が表示されます。

また、特定の投稿記事で設定した値を取得する場合は、 のショートコードを利用します。
post_id（投稿ID）に記載する数字は、投稿編集画面のURLの「?post=」の後に記載された数字になります。

Advanced Custom Fields の使い方は以上です。

30種類以上の項目を使ってカスタムフィールドが作成でき、サイト制作の幅を大幅に広げることができます。

ユニークな項目があれば他社コンテンツとの差別化にもなるでしょう。

ぜひ、お試しください。