WordPressのユーザー管理画面カスタマイズまとめ

会員サイトや複数の編集者で運用されるようなサイトの場合、ユーザーのプロフィールなどを表示するケースが多いかと思います。

その際、デフォルトのWordPressのユーザーの項目では、物足りなかったり、逆に余計な項目が存在したりしてしまいます。

そこで、ユーザーの管理画面がどの程度カスタマイズ可能かをまとめてみました。
※ 本記事は、WordPressの3.1を元に記述しています。古いバージョンや今後のバージョンでは、適用できない場合もあり得ますのでご了承下さい。

カスタマイズが可能な箇所

ユーザーの管理画面で、項目の編集や追加が可能な箇所は、下記5箇所になっています。(関数内部のフックなどを利用すれば、まだ他にも可能かもしれません。)

1.管理画面配色下部

利用するフック

admin_color_scheme_picker

利用方法

1)管理画面の配色欄内にフォームなどを追加
2)一旦、セルを閉じ、新たな行にて個人設定内に新たな項目を追加することも可能。
※ 2)の手法の際には、優先度を10以上にすること。
※ 管理画面の配色が単色のみの場合は適用されない。

2.管理バーの表示前後

利用するフック

personal_options または profile_personal_options

利用方法

1)personal_optionsフックを利用する場合は、「管理バーの表示」前後に追加可能。管理バーの優先度は10であるため、前に追加したい場合は、優先度を10以下、後に追加した場合は、優先度を10以上とする必要がある。

2)profile_personal_optionsがプロフィールページのみの適用となるため、ユーザーの編集ページにて、個人設定下に別項目を追加したい場合は、本フックにて、一旦テーブルを終了し、別テーブルを追加することも可能。その際は、優先度を極力大きくすることが望ましい。

3)profile_personal_optionsフックを利用する場合は、個人設定カテゴリ下に新たな情報カテゴリを追加することが可能。ただし、プロフィール編集ページのみの適用となる。

3.連絡先情報のAIM以下

利用するフック

_wp_get_user_contactmethods

利用方法

1)連絡先情報の「AIM」「Yahoo IM」「Jabber / Google Talk」を追加・削除することが可能
※ 配列をフックするのみで比較的簡単に項目追加が可能
※ ただし、フォームはテキストフィールドに限られる。

4.プロフィール情報下部

利用するフック

show_password_fields

利用方法

1)プロフィール情報欄下に項目追加が可能。
※ 新規ユーザを追加ページでも同様のフックがあるため、ユーザー画面のみに適用されるよう分岐処理を行う必要がある。また、フィルターフックの転用であるため、return値が必要なことと、本義的ではないため、あまりおすすめしません。

5.パスワード欄下部

利用するフック

show_user_profile, edit_user_profile
※ プロフィールページでは、show_user_profileが、ユーザーの編集ページでは、edit_user_profile が適用されます。

利用方法

1)「あなたについて」「ユーザーについて」の下に新たな情報カテゴリーを追加することが可能

カスタマイズ方法

1.連絡先情報のAIM以下のカスタマイズ

user_contactmethodsにフックしフィルタリングするだけでカスタマイズが可能。

1)user_contactmethodsフックにて、デフォルトの配列をフィルタリングする処理を追加

例:デフォルト項目を削除し、ツイッター、スカイプ、フェイスブックを追加する

CODE 1

function custom_user_contactmethods( $user_contactmethods ) {
	return array(
		'twitter'  => 'ツイッター',
		'skype'    => 'スカイプ',
		'facebook' => 'フェイスブック'
	);
}

add_filter( 'user_contactmethods', 'custom_user_contactmethods' );

2.それ以外の箇所のカスタマイズ

連作先情報以外に独自の項目を追加するには、フォームの表示、更新処理の処理を独自に記述する必要があります。
ここでは、サンプルとしてプロフィール情報下に趣味の項目を追加してみます。

1)show_password_fieldsフックにて、フォームを表示する処理を追加
2)profile_updateフックにて、データをアップデートする処理を追加

CODE 2

function add_user_hobby_form( $bool ) {
	global $profileuser;
	if ( preg_match( '/^(profile\.php|user-edit\.php)/', basename( $_SERVER['REQUEST_URI'] ) ) ) {
?>
	<tr>
		<th scope="row">趣味</th>
			<td>
				<input type="text" name="user_hobby" id="user_hobby" value="<?php echo esc_html( $profileuser->user_hobby ); ?>" />
			</td>
		</tr>
<?php
	}
	return $bool;
}
add_action( 'show_password_fields', 'add_user_hobby_form' );

function update_user_hobby( $user_id, $old_user_data ) {
	if ( isset( $_POST['user_hobby'] ) && $old_user_data->user_hobby != $_POST['user_hobby'] ) {
		$user_hobby = sanitize_text_field( $_POST['user_hobby'] );
		$user_hobby = wp_filter_kses( $user_hobby );
		$user_hobby = _wp_specialchars( $user_hobby );
		update_user_meta( $user_id, 'user_hobby', $user_hobby );
	}
}
add_action( 'profile_update', 'update_user_hobby', 10, 2 );

注意点

・ファイルアップロードを行う場合は、user_edit_form_tagにフックを行い、フォームタグにenctype属性の出力を行う必要があります。

CODE 3

function add_enctype_attr2user_edit_form_tag() {
	echo ' enctype="multipart/form-data"';
}
add_action( 'user_edit_form_tag', 'add_enctype_attr2user_edit_form_tag' );

表示方法

get_userdata関数の引数にユーザーのIDを指定し、追加した項目を含めた全てのユーザーの情報を取得することができます。

CODE 4

<?php $userdata = get_userdata( $post->post_author ); ?>
<?php echo esc_html( $userdata->user_hobby ); ?>

「WordPressのユーザー管理画面カスタマイズまとめ」への3件のフィードバック

  1. 古いエントリへのコメントですみません。
    WP3.3.1での話なのですが、CODE 2で使用しているprofile_updateフックから渡される$old_user_data が stdClassなので、$old_user_data->meta_key_name のような参照ができないようです。
    従って、CODE 2の18行目にある新旧の値の比較は無意味になってしまっています。
    少しアレンジして使っていたのですが、一度入れた値を空文字列にできなくなっていたので気が付きました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です