タイトルの通り、WordPressでユーザーのプロフィールに任意のフィールドを追加する方法です。
サンプルとして、コードには以下5点のフィールドを用意しました。
- テキスト
- テキストエリア
- セレクト
- チェックボックス
- ラジオボタン
ユーザーのプロフィールにフィールドを追加する方法
大まかに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行分で対応しましょう。
参考: