添加自定義字段到 Ultimate Member 的賬號設置頁面

最近一個項目中，用到了 Ultimate Member 插件，而這個插件前端賬號修改頁面，不支持直接設置字段，只能通過鉤子來實現(xiàn)。

在本示例中，我們需要添加一個昵稱（nickname）字段，同時，我們也要修改用戶的“公開顯示為”（display_name）字段為昵稱。因為WordPress默認會調(diào)用這個 display_name 作為用戶在網(wǎng)站上顯示的名稱，如果不更新這個字段，用戶顯示的名稱會默認為用戶名，而不是昵稱。

最終實現(xiàn)的效果如下圖所示：

由于是直接在前端更新了字段的值，所以在后臺的用戶資料中，“昵稱”和“公開顯示為”兩個字段都會同步更新：

所用到的完整代碼如下：

/**
 * Add custom fields to UM Account general
 *
 * @param int $user_id
 * @param array $changes
 */
function wpkj_um_after_account_general() {
	$custom_fields = [
		'nickname' => __('昵稱'),
	];

	foreach ($custom_fields as $key => $value) {

		$fields[ $key ] = array(
				'title' => $value,
				'metakey' => $key,
				'type' => 'text',
				'label' => $value,
		);

		apply_filters('um_account_secure_fields', $fields, 'general' );

		$field_value = get_user_meta(um_user('ID'), $key, true) ? : '';

		$html = '<div class="um-field um-field-'.$key.'" data-key="'.$key.'">
		<div class="um-field-label">
		<label for="'.$key.'">'.$value.'</label>
		<div class="um-clear"></div>
		</div>
		<div class="um-field-area">
		<input class="um-form-field valid "
		type="text" name="'.$key.'"
		id="'.$key.'" value="'.$field_value.'"
		placeholder=""
		data-validate="" data-key="'.$key.'">
		</div>
		</div>';

		echo $html;

	}
}
add_action('um_after_account_general', 'wpkj_um_after_account_general', 100);


/**
 * Save custom fields
 *
 * @param int $user_id
 * @param array $changes
 */
function wpkj_um_after_user_account_updated( $user_id, $changes ) {

	if( isset( $_POST[ 'nickname' ] ) && !UM()->form()->has_error( 'nickname' ) ) {

		$nickName = sanitize_text_field($_POST[ 'nickname' ]);

		// 更新“昵稱”字段
		update_user_meta( $user_id, 'nickname', $nickName );

		// 更新“公開顯示為”字段
		wp_update_user( array( 'ID' => $user_id, 'display_name' => $nickName ) );

	}
}
add_action( 'um_after_user_account_updated', 'wpkj_um_after_user_account_updated', 20, 2 );

特別要注意的一點：display_name 字段保存在 wp_users 這個表，不在 wp_usermeta 數(shù)據(jù)表，所以我們不能使用 update_user_meta() 來更新，而是使用 wp_update_user() 來更新。

參考資料：

• https://gist.github.com/champsupertramp/c1f6d83406e9e0425e9e98aaa36fed7d
• https://docs.ultimatemember.com/article/1504-how-to-add-custom-woocommerce-fields-to-account
• https://developer.wordpress.org/reference/functions/wp_update_user/