会員サイトが簡単に作成できるWP-Memberを実装してみた!

実装自体ははちゃめちゃに簡単でした。
ワードプレスの管理画面からプラグインを新規追加で「WP-Member」を検索して
インストール、有効化を行います。

それでこれで会員機能と呼ばれるものは実装完了(笑)。

それぞれの制御は下記のように事前に用意されているショートコードを固定ページの本文欄に
張ることで実装できます。

【WP-Memberプラグインのショートコード】


[wpmem_form login]
//ログインフォームを出力。

[wpmem_form register]
//新規登録フォームを出力。

[wpmem_profile]
//ユーザープロフィールを出力。

[wpmem_form user_edit]
//ユーザープロフィールの編集フォームを出力。

[wpmem_logout]
//ログアウトページの出力

[wpmem_form password]
//パスワードの変更・リセット

[wpmem_form forgot_username]
//ユーザー名を忘れた場合の回復するためのEメール入力フォーム。

[wpmem_logged_in]ログインユーザーのみ[/wpmem_logged_in]
//ショートコードで囲んだテキストがログインユーザーのみに表示

[wpmem_logged_out]ログアウトユーザーのみ[/wpmem_logged_out]
//ショートコードで囲んだテキストがログアウトユーザーのみに表示

[wpmem_field user_login]
//ユーザー名を表示

[wpmem_avatar]
//プロフィール画像を表示

[wpmem_field user_email]
//Eメールアドレスを表示

[wpmem_login_link]ログイン[/wpmem_login_link]
//ログインページへのリンクとショートコードで囲んだリンクテキスト

[wpmem_reg_link]新規登録[/wpmem_reg_link]
//新規登録ページへのリンクとショートコードで囲んだリンクテキスト。

まずはログインフォームの設置!
私はheader.phpに以下を記載しました。もちろんindexでもサイドバナーでもOK!

<?php if( is_user_logged_in() ) : ?> //ログインしたときに表示するコンテンツ
	<!-- 会員向けコンテンツ -->
	<ul class="flexbox fw">
		<li>
			<a href="#" class="flexbox fw">
				<?php get_userdata( $userid ); ?> //user情報取得
				<?php $user = wp_get_current_user();?> //user情報取得
				<?php
					function scrapeImage( $text ) {
						$pattern = '/src=[\'"]?([^\'" >]+)[\'" >]/';
						preg_match( $pattern, $text, $link );
						$link = $link[1];
						$link = urldecode( $link );

						return $link;
					}


					$author = get_userdata($post->post_author);
					$user_id      = $user->ID;
					$avatar_img  = scrapeImage( get_wp_user_avatar( $user_id ) );
				?>
				<img src="<?php echo $avatar_img ;?>" alt="<?php echo $user->display_name; ?>" width="50px" height="50px">//ユーザーで登録した画像を表示
				<p><?php echo $user->display_name; ?></p>//ユーザー名を表示
			</a>
		</li>
		<li><a href="/?a=logout">ログアウト</a></li>
	</ul>
	<?php else: ?>//ログアウトしたときに表示するコンテンツ
	<!-- 非会員向けコンテンツ -->
	<?php echo do_shortcode('[wpmem_form login]'); ?> //WP-Memberプラグインのコード
<?php endif; ?>

で、function.phpには管理画面の文言変更のために下記を記載しました。

function my_login_form_filter( $form, $action ) {
$user_info = wp_get_current_user();
if (is_user_logged_in()) {
	}else{
      return '
	<div id="wpmem_login">
	<a name="login"></a>
	<form action="ウェブサイトのURL記載" method="POST" id="" class="form">
	<fieldset>
	<legend>IDとPasswordを入力してログインしてください。</legend>
	<div class="flexbox fw">
		<label for="log">User</label>
		<div class="div_text"><input name="log" type="text" id="log" value="" class="username" /></div>
	</div>
	<div class="flexbox fw">
		<label for="pwd">Password</label>
		<div class="div_text"><input name="pwd" type="password" id="pwd" class="password" /></div>
	</div>
	<input name="redirect_to" type="hidden" value="/" /><input name="a" type="hidden" value="login" />
	<div class="button_div"><input name="rememberme" type="checkbox" id="rememberme" value="forever" />&nbsp;<label for="rememberme">ログイン状態を保存</label><input type="submit" name="Submit" value="ログイン" class="buttons" /></div>
	</fieldset></form></div>

	';
	}
}
add_filter( 'wpmem_login_form', 'my_login_form_filter', 10, 2 );

上記だけでも結構カスタマイズ可能です!
好きなようにフォームを変更できるのでいろいろと触ってみてください!

これで、ログインしたときとログアウトしたときの設定がある程度揃いました。
私の場合はログインしたときにindexに飛ばす予定だったので、特に細かい設定はしませんでしたが
ログインしたときにリダイレクトする方法もあるようです。

下記をfunction.phpに記述でリダイレクト可能!

add_filter( 'wpmem_login_redirect', 'my_login_redirect', 10, 2 );
function my_login_redirect( $redirect_to, $user_id ) {
	return 'リダイレクト先のURL';
}

index.phpにはログインしたときだけ表示されるようにis_user_logged_inで制御をかけました。
この制御かけないとログアウトしたときも全部でちゃうので気を付けて!

<?php if( is_user_logged_in() ) : ?>
			
				<?php get_search_form(); ?>//検索フォーム

				<div id="tag_list">//記事のタグ

						<ul class="flexbox">
							<?php
							$term_list = get_terms('post_tag', Array('number' => 20));
							$result_list = [];
							foreach ($term_list as $term) {
							$u = (get_term_link( $term, 'post_tag' ));
							echo "<li><a href='".$u."'>".$term->name."</a></li>";
							}
							?>
						</ul>
				</div>
			
			<?php endif; ?>

次回はスラックと連携したときにログアウトしている状態でも直接記事へ飛ばす方法を
解説しますね!