Advanced Custom FieldでWordPressを本格CMSに！

2014.10.19

Wordpressを本格CMSに

WordPressを本格的CMSに変身させるプラグイン

WebサイトをHTML+CSSの知識がない方でも管理を行えるようにするためにはCMSの導入が必須となります。
そしてWordpressをCMS的に導入する場合には、「カスタムフィールド」での入力が必須となります。
しかしWordpressのデフォルトのカスタムフィールドの入力欄は決して使い勝手の良いものではありません。
以前はカスタムフィールドの入力をよりわかりやすくするためのプラグインは「カスタムフィールドテンプレート」を使っていました。
日本での使用率もとても高いプラグインだと思われます。
しかし、最近ではAdvanced Custom Fieldというさらに高機能で柔軟なプラグインを主に使うようなりました。

どんなところが高機能で柔軟なのか

豊富な入力タイプやAdd-onによる機能拡張、またデータを取り出す際に便利は独自関数などが上げられます。
今回はプラグインを導入する主な理由を2つほど例を交えて上げていきます。

豊富な入力タイプ

基本の1行テキスト入力欄や複数行のテキストエリアなどの他にWysiwygエディタ（ビジュアルエディタ）や画像などなど。
その他の項目は下の画像のスクリーンショットをご覧ください。
※一番下のRepeaterは有料のAdd-onにより追加された項目です。

便利な入力欄としては、Google Mapを表示するための入力欄や日付をカレンダーから選択できるデイトピッカーなどがあげられます。
デイトピッカーでは日付を入力する際にカレンダー方式から簡単に選択できるというメリットとそこに入っている数値をWordpressやPHPの関数で自由なフォーマット形式で出力できます。

Add-onでの機能追加

Add-onで機能を追加できるのもとてもアドバンテージがあります。
例えば写真ギャラリーが簡単に作成できる入力フィールドを追加できるAdd-onやボックス毎に入力欄をグルーピングできるAdd-onなどがあります。
その中でもオススメなのが、「繰り返しフィード（repeat）」というAdd-onです。

繰り返しフィード（repeat）Add-on使い方（例）

例えばボックス毎タイトルと記事というレイアウトのなどを作る時に便利です。
クライアントワークとしては、チェーン店などの店舗紹介ページなどを担当者が追加/編集できるようにすることが出来ます。

管理画面での設定方法（例）

「店舗案内」という新規フィールドグループを作成します。

「フィールドを追加」ボタンをクリックしてフィールドを追加。
フィールドタイプを「Repeater」に設定します。

「Repeater Field」で「Add Sub Field」ボタンをクリックして以下のように必要な項目を追加していきます。

画像（フィールドタイプ:image)を追加する時、返り値の設定に「画像オブジェクト」「画像URL」「画像ID」があります。
自作の関数などで画像情報を取得する場合は、画像IDが便利です。

「レイアウト」を「Row」にして項目を立て並びにしておきます。
レイアウトは項目の量などによりケースバイケースでTableとRowのどちらかを設定します。

右カラムの「公開」ボタンで設定終了です。

コンテンツの入力（例）

新規に投稿もしくは固定ページを作成します。

カスタムフィールド項目内の「Add Row」をクリックすると先ほど設定した項目の入力欄が表示されます。
項目の内容に合わせて入力していきます。

再度「Add Row」ボタンをクリックするとブランクの入力欄のセットが追加されます。
また、左端の番号でドラッグ＆ドロップして順番を変えることも出来ます。

入力が終わったら、次はページでの表示方法となります。

テンプレートファイルの作成（例）

サブフィールドを表示させる場合の基本的方法はプラグイン公式サイトにもあるように「have_rows」「the_rows」「the_sub_file」関数を使います。

if( have_rows('address') ):

    while ( have_rows('address') ) : the_row();

        // Your loop code
        $shop_name = get_sub_field('shop_name');
        $shop_address = get_sub_field('address');
       //以下省略〜

    endwhile;

else :

    // no rows found

endif;

という感じで値を取得できます。あとはtabelなりdlなりでコーディングして出力するだけです。
ただ上記の方法ですと、tableの項目部分(th)にあたる箇所はそのまま記述するしかありません。
Advanced Custom Fieldにはhave_rowsループの中でラベルを単独で取得する関数が用意されていないからです。

せっかく管理画面でラベル（項目名）を設定したのだから、設定したラベルを取得して表示したいという時もあります。
そういった時は、get_field_objects関数を使いカスタムフィールドに関する情報を取得して、そこからラベル情報を引っ張る方法が考えられます。
簡単な作成例を記述しておきます。

$fields = get_field_objects();
 foreach($fields as $field_name => $field_val) :
  if(get_field($field_name)):
  <section class="<?php echo esc_attr($field_val['name']); ?>">
  <h3>shop info</h3>

<?php
    while(has_sub_field($field_name)):
?>
    <div class="shopbox">
     <table>
      <tbody>

<?php
    foreach($field_val['sub_fields'] as $sub_k => $sub_v) :
      if($sub_v['name'] == 'image01') {//画像を別処理するため
      continue;
      }
?>
      <tr>
        <th><?php echo esc_html($sub_v['label']); ?></th>
        <td><?php echo esc_html(get_sub_field($sub_v['name'])); ?></td>
     </tr>
<?php
    endforeach;
?>

     </tbody>
    </table>
<?php
    if(get_sub_field('image01')) :
      $img_id = get_sub_field('image01');
      $img_obj = wp_get_attachment_image_src($img_id,$size='full');
      $img_alt = get_post_meta($img_id,'_wp_attachment_image_alt',true);
?>
    <div class="shopimg">
      <img src="<?php echo esc_url($img_obj[0]); ?>" alt="<?php echo esc_attr($img_alt); ?>">
    </div>
<?php
    endif;
?>
</div><!-- / .shopbox -->
<?php
  endwhile;
?>
</section>

Advanced Custom Fieldには豊富な関数が用意されています。
関数の情報など公式（英語）に詳しく載っているので参考になります。
Add-on含めこれからWordpressをCMSとしてカスタマイズする際には強力な助けになりますので是非。

ACF Documentation

Advanced Custom FieldでWordpressを本格CMSに！ - WEBサイト制作のElectric Fruits

CREATOR BLOG