【WordPress】Smart Custom Fieldsのフィールドをテーマファイル内で定義するときのやり方まとめ

【WordPress】Smart Custom Fieldsのフィールドをテーマ側で定義するときのやり方まとめ

WordPressでカスタムフィールドを扱うプラグインとしては「Advanced Custom Fields」(略して「ACF」とも呼ばれる)が有名ですが、最近は「Smart Custom Fields」というプラグインを使っています。

基本的には管理画面で入力フィールドの定義をすればそれでOKですが、ローカル環境(開発環境)で作って、本番環境に移すことを考えると、項目数が多くなると結構ツライことになります。
(フィールド定義のエクスポート・インポート機能がないようなので…)

ただ、フィールド定義をPHPコード上で行う方法があるようなので、そのフィルターフック・関数の使い方をまとめておこうと思います。

Smart Custom Fieldsのフィールドをテーマ側で定義する

Smart Custom Fieldsはコードベースでカスタムフィールドの定義ができるようになっているので、テーマのfunctions.phpなどで入力項目の定義が可能です。

どうやって使うのかな?と軽く調べてみたところ…

カスタムフィールドを定義する配列で使える項目はまとめるのが面倒なので…プラグインのコードを直接確認してみてください(/plugins/smart-custom-fields/classes/fields/*)

という、わかりみしかない1文が書いてあったので、コードを眺めて自分でまとめてみたいと思います。

Smart Custom Fieldsの設定項目を追加する

編集項目が表示される部分(メタボックス)の追加

まずはSmart Custom Fieldsで入力域の大枠を追加する部分です。

/**
 * カスタムフィールドを定義
 *
 * @param array  $settings  MW_WP_Form_Setting オブジェクトの配列
 * @param string $type      投稿タイプ or ロール
 * @param int    $id        投稿ID or ユーザーID
 * @param string $meta_type post | user
 * @return array
 */
function my_smart_cf_register_fields( $settings, $type, $id, $meta_type ) {
    // SCF::add_setting( 'ユニークなID', 'メタボックスのタイトル' );
    $setting = SCF::add_setting( 'scf-meta1', 'Smart Custom Fieldsの設定項目' );
    $settings[] = $setting;
    return $settings;
}

add_filter( 'smart-cf-register-fields', 'my_smart_cf_register_fields', 10, 4 );
編集画面にメタボックスが表示された

これでひとまず編集画面に編集項目が表示される部分(メタボックス)が表示されます。

入力項目の追加

入力項目はSCF::add_settingで追加した設定に対してadd_groupでグループ・項目の追加をします。

function my_smart_cf_register_fields( $settings, $type, $id, $meta_type ) {
    // SCF::add_setting( 'ユニークなID', 'メタボックスのタイトル' );
    $setting = SCF::add_setting( 'scf-meta1', 'Smart Custom Fieldsの設定項目' );
    $fields = array();
    // $setting->add_group( 'ユニークなID', 繰り返し可能か, カスタムフィールドの配列 );
    $setting->add_group( 'group-id', false, $fields );
    $settings[] = $setting;
    return $settings;
}

add_filter( 'smart-cf-register-fields', 'my_smart_cf_register_fields', 10, 4 );

編集項目は上のコード内の$fields配列にいろいろ定義していく形になります。
(とりあえず上のコードをコピペして必要な部分をカスタマイズすれば楽だぞ!未来の俺!)

例えば、テキスト項目を追加する場合は次のような例になります。

function my_smart_cf_register_fields( $settings, $type, $id, $meta_type ) {
    // SCF::add_setting( 'ユニークなID', 'メタボックスのタイトル' );
    $setting = SCF::add_setting( 'scf-meta1', 'Smart Custom Fieldsの設定項目' );
    $fields = array(
        array(
            'name'  => 'text-1',
            'label' => 'これはテキストフィールドです',
            'type'  => 'text',
        ),
    );
    // $setting->add_group( 'ユニークなID', 繰り返し可能か, カスタムフィールドの配列 );
    $setting->add_group( 'group-id', false, $fields );
    $settings[] = $setting;
    return $settings;
}

add_filter( 'smart-cf-register-fields', 'my_smart_cf_register_fields', 10, 4 );
入力項目が表示されました

入力項目が表示されました!

特定のカスタム投稿タイプのみフィールドを追加する

カスタム投稿タイプによって振り分けを行う場合は、$type$meta_typeを使って条件判定します。

function my_smart_cf_register_fields( $settings, $type, $id, $meta_type ) {

    if ( 'post' == $meta_type && 'my_post_type' == $type ) {
        // SCF::add_setting( 'ユニークなID', 'メタボックスのタイトル' );
        $setting = SCF::add_setting( 'scf-meta1', 'Smart Custom Fieldsの設定項目' );
        $fields  = array(
            array(
                'name'  => 'text-1',
                'label' => 'これはテキストフィールドです',
                'type'  => 'text',
            ),
        );
        // $setting->add_group( 'ユニークなID', 繰り返し可能か, カスタムフィールドの配列 );
        $setting->add_group( 'group-id', false, $fields );
        $settings[] = $setting;
    }

    return $settings;
}

add_filter( 'smart-cf-register-fields', 'my_smart_cf_register_fields', 10, 4 );

カスタムフィールドの定義まとめ

それではここから、各フィールド定義を作るための配列の指定方法をまとめていきます…

各タイプの識別子はこちら▼
(クリックすると各定義部分に移動します)

テキストフィールド

テキストフィールド
array(
    'type'        => 'text', //*タイプ
    'name'        => 'name', //*名前
    'label'       => 'label', //ラベル
    'default'     => 'default', //デフォルト
    'instruction' => 'instruction', //説明文
    'notes'       => 'notes', //注記
),

テキストエリア

テキストエリア
array(
    'type'        => 'textarea', //*タイプ
    'name'        => 'name', //*名前
    'label'       => 'label', //ラベル
    'rows'        => 5, //行数
    'default'     => 'default', //デフォルト
    'instruction' => 'instruction', //説明文
    'notes'       => 'notes', //注記
),

真偽値

真偽値
array(
    'type'        => 'boolean', //*タイプ
    'name'        => 'name', //*名前
    'label'       => 'label', //ラベル
    'default'     => 0, //デフォルト
    'true_label'  => 'Yes', //TRUE ラベル
    'false_label' => 'No', //FALSE ラベル
    'instruction' => 'instruction', //説明文
    'notes'       => 'notes', //注記
),

メッセージ

メッセージ
array(
    'type'        => 'message', //*タイプ
    'name'        => 'name', //*名前
    'default'     => 'message', //メッセージ
    'notes'       => 'notes', //注記
),

チェックボックス

チェックボックス
array(
    'type'    => 'check', //*タイプ
    'name'    => 'name', //*名前
    'label'   => 'label', //ラベル
    'choices' => array(
        'key1' => '選択肢1',
        'key2' => '選択肢2'
    ), // 選択肢
    'check_direction' => 'horizontal', // 表示方向( horizontal or vertical )
    'default' => array(
        'key1',
        'key2'
    ), //デフォルト
    'instruction' => 'instruction', //説明文
    'notes'   => 'notes', //注記
),

ラジオボタン

ラジオボタン
array(
    'type'            => 'radio', //*タイプ
    'name'            => 'name', //*名前
    'label'           => 'label', //ラベル
    'choices'         => array(
        'key1' => '選択肢1',
        'key2' => '選択肢2'
    ), // 選択肢
    'radio_direction' => 'horizontal', // 表示方向( horizontal or vertical )
    'default'         => 'key1', //デフォルト
    'instruction'     => 'instruction', //説明文
    'notes'           => 'notes', //注記
),

セレクトボックス

セレクトボックス
array(
    'type'            => 'select', //*タイプ
    'name'            => 'name', //*名前
    'label'           => 'label', //ラベル
    'choices'         => array(
        'key1' => '選択肢1',
        'key2' => '選択肢2'
    ), // 選択肢
    'default'         => 'key1', //デフォルト
    'instruction'     => 'instruction', //説明文
    'notes'           => 'notes', //注記
),

ファイル

ファイル
array(
    'type'        => 'file', //*タイプ
    'name'        => 'name', //*名前
    'label'       => 'label', //ラベル
    'instruction' => 'instruction', //説明文
    'notes'       => 'notes', //注記
),

画像

画像
array(
    'type'        => 'image', //*タイプ
    'name'        => 'name', //*名前
    'label'       => 'label', //ラベル
    'instruction' => 'instruction', //説明文
    'notes'       => 'notes', //注記
    'size'        => 'full' // プレビューサイズ
),

WYSIWYG

WYSIWYG
array(
    'type'        => 'wysiwyg', //*タイプ
    'name'        => 'name', //*名前
    'label'       => 'label', //ラベル
    'default'     => 'default', //デフォルト
    'instruction' => 'instruction', //説明文
    'notes'       => 'notes', //注記
),

カラーピッカー

カラーピッカー
array(
    'type'        => 'colorpicker', //*タイプ
    'name'        => 'name', //*名前
    'label'       => 'label', //ラベル
    'default'     => '#000000', //デフォルト
    'instruction' => 'instruction', //説明文
    'notes'       => 'notes', //注記
),

日付ピッカー

日付ピッカー
array(
    'type'        => 'datepicker', //*タイプ
    'name'        => 'name', //*名前
    'label'       => 'label', //ラベル
    'default'     => '01/01/2018', //デフォルト
    'date_format' => 'dd/mm/yy', // 日付のフォーマット
    'max_date'    => '+10d', // 最大日付
    'min_date'    => '-10d', // 最小日付
    'instruction' => 'instruction', //説明文
    'notes'       => 'notes', //注記
),

時刻付き日付ピッカー

時刻付き日付ピッカー
array(
    'type'        => 'datetime_picker', //*タイプ
    'name'        => 'name', //*名前
    'label'       => 'label', //ラベル
    'default'     => '2018-01-01', //デフォルト
    'date_format' => 'Y-m-d h:i K', // 日付のフォーマット
    'max_date'    => '2018-12-31', // 最大日付
    'min_date'    => '2018-01-01', // 最小日付
    'time_24hr'   => false, // 24時間制
    'instruction' => 'instruction', //説明文
    'notes'       => 'notes', //注記
),

関連する投稿

関連する投稿
array(
    'type'        => 'relation', //*タイプ
    'name'        => 'name', //*名前
    'label'       => 'label', //ラベル
    'post-type'   => array( 'post', 'page' ), //投稿タイプ
    'limit'       => 0, // 選択できる個数
    'instruction' => 'instruction', //説明文
    'notes'       => 'notes', //注記
),

関連するターム(カテゴリー・タグ・カスタムタクソノミー)

関連するターム
array(
    'type'        => 'taxonomy', //*タイプ
    'name'        => 'name', //*名前
    'label'       => 'label', //ラベル
    'taxonomy'    => array( 'category', 'post_tag' ), //タクソノミー
    'limit'       => 0, // 選択できる個数
    'instruction' => 'instruction', //説明文
    'notes'       => 'notes', //注記
),

さいごに

ACFでは有料プラグインとなっている繰り返しフィールドも作れるので非常に助かってます!

あと、管理画面でフィールドを作っているときに、名前はそのままタイプだけ変えようとすると、名前までクリアされてやや面倒なのでコード上でやったほうが楽ですね(汗

もしお役に立ちそうならご活用下さい。

ではまた。