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

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

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

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

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

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

１．管理画面配色下部

利用するフック

admin_color_scheme_picker

利用方法

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

２．管理バーの表示前後

利用するフック

personal_options または profile_personal_options

利用方法

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

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

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

３．連絡先情報のAIM以下

利用するフック

_wp_get_user_contactmethods

利用方法

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

４．プロフィール情報下部

利用するフック

show_password_fields

利用方法

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

５．パスワード欄下部

利用するフック

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

利用方法

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

カスタマイズ方法

１．連絡先情報のAIM以下のカスタマイズ

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

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

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

CODE 1

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

add_filter( 'user_contactmethods', 'custom_user_contactmethods' );

２．それ以外の箇所のカスタマイズ

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

１）show_password_fieldsフックにて、フォームを表示する処理を追加
２）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 ); ?>