[WordPress]ユーザーのプロフィールに任意のフィールドを追加する

  • 更新日:
  • 公開日:

タイトルの通り、WordPressでユーザーのプロフィールに任意のフィールドを追加する方法です。

サンプルとして、コードには以下5点のフィールドを用意しました。

  • テキスト
  • テキストエリア
  • セレクト
  • チェックボックス
  • ラジオボタン

ユーザーのプロフィールにフィールドを追加する方法

大まかに2つのコードで対応します。

  1. プロフィールにフィールドを追加
  2. 追加したフィールドの保存処理

プロフィールにフィールドを追加

下記のコードをfunctions.phpに追加すると、ユーザー編集画面に各フィールドも追加されます。

// プロフィールに任意のフィールドを追加するサンプル
function add_profile_sample_fields( $user ) {
    ?>
    <h2><?php _e( '追加情報のサンプル' ); ?></h2>

    <table class="form-table">
        <tr>
            <th><label for="text-sample"><?php _e( 'テキスト' ); ?></label></th>
            <td>
                <input type="text" name="text-sample" id="text-sample" value="<?php echo esc_attr( get_the_author_meta( 'text-sample', $user->ID ) ); ?>" class="regular-text" placeholder="<?php _e( 'テキストフィールドのサンプル' ); ?>" />
            </td>
        </tr>
        <tr>
            <th><label for="textarea-sample"><?php _e( 'テキストエリア' ); ?></label></th>
            <td>
                <textarea name="textarea-sample" id="textarea-sample" cols="30" rows="5" placeholder="<?php _e( 'テキストエリアのサンプル' ); ?>"><?php echo esc_attr( get_the_author_meta( 'textarea-sample', $user->ID ) ); ?></textarea>
            </td>
        </tr>
        <tr>
            <th><label for="select-sample"><?php _e('セレクト' ); ?></label></th>
            <td>
                <select name="select-sample" id="select-sample">
                    <option value="">選択</option>
                    <option value="A" <?php selected( get_user_meta( $user->ID, 'select-sample', true ), 'A' ); ?>>A</option>
                    <option value="B" <?php selected( get_user_meta( $user->ID, 'select-sample', true ), 'B' ); ?>>B</option>
                    <option value="C" <?php selected( get_user_meta( $user->ID, 'select-sample', true ), 'C' ); ?>>C</option>
                </select>
            </td>
        </tr>
        <tr>
            <th><?php _e( 'チェックボックス' ); ?></th>
            <td>
                <label>
                    <input type="checkbox" name="checkbox-sample" value="1" <?php checked( get_user_meta( $user->ID, 'checkbox-sample', true ), '1' ); ?> />Yes
                </label>
            </td>
        </tr>
        <tr>
            <th><?php _e( 'ラジオボタン' ); ?></th>
            <td>
                <fieldset>
                    <label>
                        <input type="radio" name="radio-sample" value="A" <?php checked( get_user_meta( $user->ID, 'radio-sample', true ), 'A' ); ?> />A
                    </label>
                    <label>
                        <input type="radio" name="radio-sample" value="B" <?php checked( get_user_meta( $user->ID, 'radio-sample', true ), 'B' ); ?> />B
                    </label>
                </fieldset>
            </td>
        </tr>
    </table>
    <?php
}

// ユーザープロフィール編集画面にフィールドを追加する
add_action( 'show_user_profile', 'add_profile_sample_fields' );

// 自分のプロフィール編集画面にフィールドを追加する
add_action( 'edit_user_profile', 'add_profile_sample_fields' );

このコードを追加すると各フィールドが表示されることが確認できます。tableタグやクラス名などは既存のHTMLと統一させているので、同じ形式で表示されます。

このように表示されます

追加したフィールドの保存処理

次に、ユーザー情報の更新ボタンを押したときに、追加した各フィールドの入力値も保存されるよう処理を追加します。

下記コードをfunctions.phpなどに貼り付けると、上述で追加したユーザーフィールドが保存されるようになります。

// 追加した任意のフィールドを保存するサンプル
function update_profile_sample_fields( $user_id ) {
    // 現在のユーザーに[$user_id]を編集する権限があることを確認
    if ( ! current_user_can( 'edit_user', $user_id ) ) {
        return false;
    }

    // 追加した任意の各フィールドを保存用に配列化(カスタムフィールドのキー名と値)
    $meta_keys = array(
        'text-sample'       => $_POST['text-sample'],
        'textarea-sample'   => $_POST['textarea-sample'],
        'select-sample'     => $_POST['select-sample'] ,
        'checkbox-sample'   => $_POST['checkbox-sample'] ,
        'radio-sample'      => $_POST['radio-sample']
    );

    // [$user_id]のユーザーメタを作成または更新
    foreach( $meta_keys as $key => $value ) {
        update_user_meta( $user_id, $key, $value );
    }

    // 1つの場合は以下の1行で完了
    # update_user_meta( $user_id, 'text-sample', $_POST['text-sample'] );

    return true;
}

// ユーザー自身のプロフィール編集画面の更新に保存アクションを追加する
add_action( 'personal_options_update', 'update_profile_sample_fields' );

// ユーザープロフィール編集画面の更新に保存アクションを追加する
add_action( 'edit_user_profile_update', 'update_profile_sample_fields' );

フィールドのname値と値を連想配列化し、 foreach構文を使いupdate_user_meta()で保存しています。追加するフィードが1つの場合はコメントアウトしている1行分で対応しましょう。


参考:

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone