WP0円マッチングサイト作成プロジェクト第1弾の作り方④

WP-Membersドキュメントには会員プロフィールには[wpmem_profile]ショートコードを埋め込めとある。
しかし「会員プロフィールの編集」「パスワードの変更」の2つのリンクが表示されるだけ。（ログイン時）
もちろんそれぞれのリンクをクリックするとそれぞれページ遷移されるが、UI/UXは良くないので全面的に変更する。

②「登録情報の編集」③「パスワードを変更」に①「現在の登録情報」を加えてページ遷移ではなくタブ切り替えにする。

・WP-Membersのフィールド設定で必要に応じてフィールドを作り一覧で「Profile」にチェックが入っていれば会員プロフィールページでフィールドが表示される。 また一覧上での順番もそのまま反映される。
・一覧で「必須」にチェックが入っていればinputタグに「required」が付加される。

タブ切り替え部分のコード

//page-profile.php
//会員プロフィールを表示
$caution = '
ログインしてください！
';
echo do_shortcode('[wpmem_logged_out]' . $caution . '[/wpmem_logged_out]');

$loggedin = '<div class="tab-container">
	<div class="tab active">現在の登録情報</div>
	<div class="tab">登録情報の編集</div>
	<div class="tab">パスワードを変更</div>
</div>';
echo do_shortcode('[wpmem_form login]' . $loggedin . '[/wpmem_form]');

①現在の登録情報のコード1

//page-profile.php
$prof_fieldsArr = array();
$mem_fieldsArr = wpmem_fields();
foreach( $mem_fieldsArr as $k => $v ){
	$label = "";
	$type = "text";
	$prof = false;
	foreach( $v as $k2 => $v2 ){
		if ( $k2 == "label" ){
			$label = $v2;
		}
		if ( $k2 == "type" ){
			$type = $v2;
		}
		if ( $k2 == "profile" && $v2){
			$prof = true;
		}
	}
	if ( $prof ){$prof_fieldsArr[$k] = array($label, $type);}
}
$cssArr = array("age", "sex", "place");
$no_labelArr = array("nickname", "age", "sex", "place");
$suffixArr = array(
	"age" => "歳",
	"height" => "cm",
);
$prefixArr = array(
	"height" => "身長",
);

①現在の登録情報のコード2

//page-profile.php
$html = "";//<h3>現在の登録情報</h3>
$current_user = wp_get_current_user();
$user_id = $current_user->ID;
if ( !$user_id ) {// User is not logged in.
	//echo "ログインしてません！";
} else {// User is logged in.
	$html .= '<ul class="each_userprof"><li class="l">';

foreach( $prof_fieldsArr as $k => $v ){
	if ( empty(get_user_meta( $user_id, $k ,true)) ) {
		//continue;//user_emailは空文字を返すためスルーになる
	}
	$css = $prefix = $suffix = "";
	if (in_array($k, $cssArr)) {$css = " inline";}
	if (in_array($k, $no_labelArr)) {$prefix = "";}else{$prefix = $v[0];}
	if (array_key_exists($k, $prefixArr)) {
		$prefix = $prefixArr[$k];
	}
	if (array_key_exists($k, $suffixArr)) {
		$suffix = $suffixArr[$k];
	}
	if ( $k == "user_avatar_img" ) {
		$img = get_user_meta( $user_id, $k ,true);
		$imgurl = wp_get_attachment_url( $img );
		$html .=  '<div class="imgBox"><img alt="user img" class="userface" src="' . $imgurl .'"></div>';
	}elseif($v[1] == "select") {
		$metaV = @wpmem_get_user_meta_select( $user_id, $k );
		if ( !empty($metaV) ) {
			if ( !empty($prefix) ) {
				$html .= '<div class="'.$k.$css.' flex"><p>'.$prefix.'</p><p>' . $metaV . $suffix . '</p></div>';
			}else{
				$html .= '<div class="'.$k.$css.'">' . $prefix . $metaV . $suffix . '</div>';
			}
		}
	}elseif($v[1] == "checkbox") {
		$metaV = @wpmem_get_user_meta_checkbox( $user_id, $k );
		if ( !empty($metaV) ) {
			if ( !empty($prefix) ) {
				$html .= '<div class="'.$k.$css.' flex"><p>'.$prefix.'</p><p>' . $metaV . $suffix . '</p></div>';
			}else{
				$html .= '<div class="'.$k.$css.'">' . $prefix . $metaV . $suffix . '</div>';
			}
		}
	}elseif($v[1] == "multicheckbox") {
		$metaV = @wpmem_get_user_meta_multi( $user_id, $k );
		if ( !empty($metaV) ) {
			if ( !empty($prefix) ) {
				$html .= '<div class="'.$k.$css.' flex"><p>'.$prefix.'</p><p>' . $metaV . $suffix . '</p></div>';
			}else{
				$html .= '<div class="'.$k.$css.'">' . $prefix . $metaV . $suffix . '</div>';
			}
		}
	}elseif($v[1] == "radio") {
		$metaV = @wpmem_get_user_meta_radio( $user_id, $k );
		if ( !empty($metaV) ) {
			if ( !empty($prefix) ) {
				$html .= '<div class="'.$k.$css.' flex"><p>'.$prefix.'</p><p>' . $metaV . $suffix . '</p></div>';
			}else{
				$html .= '<div class="'.$k.$css.'">' . $prefix . $metaV . $suffix . '</div>';
			}
		}
	}elseif($v[1] == "textarea") {
		$metaV = @do_shortcode('[wpmem_field field="'.$k.'" id="'.$user_id.'"]');
		if ( !empty($metaV) ) $html .= '<div class="'.$k.$css.'">' . $metaV . '</div>';
	}else{
		$metaV = @get_the_author_meta( $k, $user_id );
		if ( !empty($metaV) ) {
			if ( !empty($prefix) ) {
				$html .= '<div class="'.$k.$css.' flex"><p>'.$prefix.'</p><p>' . $metaV . $suffix . '</p></div>';
			}else{
				$html .= '<div class="'.$k.$css.'">' . $prefix . $metaV . $suffix . '</div>';
			}
		}
	}
}
	$html .= '</li></ul>';
	echo $html;
}

②登録情報の編集のコード

//page-profile.php
echo do_shortcode('[wpmem_logged_in][wpmem_form user_edit][/wpmem_logged_in]');

③パスワードを変更のコード

//page-profile.php
echo do_shortcode('[wpmem_logged_in][wpmem_form password][/wpmem_logged_in]');