ACFにテーブルのフィールドタイプを追加できる便利プラグイン：Advanced Custom Fields: Table Field

HTMLが分からないクライアントさんが、ウェブサイトの情報を更新しやすくするためにカスタムフィールドを用いることは多いと思います。

そんな時によく利用するのがWordPressプラグインのACF（Advanced Custom Fields）ですよね。

そんなACFのフィールドタイプにTableを追加できる「Advanced Custom Fields: Table Field」というプラグインがあります。

料金表などの作成には、とても便利ですので、ご紹介します。

Advanced Custom Fields: Table Fieldについて

「Advanced Custom Fields: Table Field」は、上図のように、フィールドタイプに「Table」を追加することができるプラグインです。

この「Table」フールドタイプには、下記の機能があります。

テーブルヘッダの有無を指定
テーブルの列と行を自由に追加・削除
ドラッグして列・行の順番を入れ替え

もちろん、オプションページやリピーターフィールド（繰り返しフィールド）でも利用できます。

Advanced Custom Fields: Table Fieldのインストール方法

「Advanced Custom Fields: Table Field」は、Wordpress.orgの公式プラグインにリリースされているので、管理画面で検索するか、下記のURLからZIPファイルをダウンロードして、管理画面にアップロードする方法があります。

Advanced Custom Fields: Table Field – WordPress plugin

管理画面で検索してインストール→有効化するほうが簡単で楽だと思います。

Advanced Custom Fields: Table Fieldの使い方

使い方は、他のフィールドタイプと、それほど大きく変わりはないので、直感的に操作できるはずです。

フィールドタイプで「Table」を選択すると、下図のような設定画面が表示されます。

フィールドラベル：投稿などの編集ページで表示する文字列を入力（日本語OK）
フィールド名：カスタムフィールド値の取得や表示に使用する識別子を入力
フィールドタイプ：こちらは「tabel」を選択済み
説明：投稿者に向けての補足説明を入力（編集ページに表示されます）
必須か：任意項目にするか必須項目にするかの設定
Table Header：テーブルヘッダの有無を設定
Table Caption：キャプションの使用の有無を設定

上図のように、HTMLがわからない人でも、表の行や列を追加・削除したり、表の並び順を変更したりなど、直感的に操作できる入力項目を簡単に設置できてしまいます。

Advanced Custom Fields: Table Fieldの出力方法

ACFのテーブルフィールドを出力するためには、下記のようなデータ処理をして出力する必要があります。

基本の使用例

$table = get_field( 'your_table_field_name' );
if ( ! empty ( $table ) ) {
echo '<table border="0">';
  if ( ! empty( $table['caption'] ) ) {
  echo '<caption>' . $table['caption'] . '</caption>';
  }
  if ( ! empty( $table['header'] ) ) {
  echo '<thead>';
    echo '<tr>';
      foreach ( $table['header'] as $th ) {
      echo '<th>';
        echo $th['c'];
        echo '</th>';
      }
      echo '</tr>';
    echo '</thead>';
  }
  echo '<tbody>';
    foreach ( $table['body'] as $tr ) {
    echo '<tr>';
      foreach ( $tr as $td ) {
      echo '<td>';
        echo $td['c'];
        echo '</td>';
      }
      echo '</tr>';
    }
    echo '</tbody>';
  echo '</table>';
}

こちらは基本の出力例なので、利用方法によってカスタマイズが必要です。

オプションページで使用する場合は、1行目が下記のようになります。

$table = get_field( 'your_table_field_name', option );

またGroupなどのサブフィールドで使用する場合は、1行目が下記のようになります。

$table = get_sub_field( 'your_table_field_name' );

ACFのテーブルフィールドを活用して、クライアントが管理しやすいWEBサイト制作を行っていきましょう。