会員限定ページを作成できるWP-Membersをカスタム投稿タイプで使ってみた（5系WP）

WP-Membersを使用して会員制ページを作成しています。（使用WP:5.4.2）
現在まだテスト中ですので、不具合や設定方法など随時更新する予定です。

【実装したい仕様】
▽固定ページ
・ログインページ（公開）
・メンバー登録ページ（公開）
・ユーザー情報（非公開）
・パスワードを忘れた方（公開）

▽投稿
・全て公開

▽カスタム投稿・・・会員限定ページ用
・全て非公開

——————————

【実装方法】
１、WP-Memberプラグインをインストール→有効化
プラグイン＞新規追加＞プラグインの検索　で、見つけることが出来ます

２、設定＞ディスカッション　の中から、「ユーザー登録してログインしたユーザーのみコメントをつけられるようにする」にチェック

３、設定＞表示設定　の中から「フィードの各投稿に含める内容」を「抜粋のみ」に変更
　　コンテンツのすべてにおいて検索のインデックスを除外する場合には、「検索エンジンがサイトをインデックスしないようにする」にチェック
　　※スクリーンショットの例では、メンバーページ以外の投稿は検索エンジンにかけたいため、チェックは付けずにいます

　ただし、このままでは検索ロボットにかかってしまうため、Wordpressのheadタグ内に下記を記述します。
　’member’の部分には、会員限定に設定するカスタム投稿タイプのスラッグが入ります。

  <?php
  if (is_post_type_archive('member') || is_singular('member')){
    echo '<meta name="robots" content="noindex, nofollow" />';
  }
  ?>

４、登録に必要なページを固定ページで準備
　　・ログインページ・・・会員ページへのログインに使用
　　・会員登録・・・新規会員登録を行うページ
　　・登録情報・・・ユーザーの登録内容を表示。(会員登録で使用した項目のキーを挿入することでその内容を見ることが出来る)
　〇ログインページの設定例

<p>[wpmem_form login]</p>

　〇会員登録の設定例

<p>[wpmem_form register]</p>

〇登録情報の設定例
※会員登録時の入力項目に設定した内容を出力するページ。
　設定は次の項目で行います。

<div class="profileBlock">
    <dl class="profile">
        <dt>ユーザーID</dt>
        <dd>[wpmem_field user_login]</dd>
        <dt>お名前</dt>
        <dd>[wpmem_field last_name] [wpmem_field first_name]</dd>
        <dt>登録メールアドレス</dt>
        <dd>[wpmem_field user_email]</dd>
        <dt>郵便番号</dt>
        <dd>[wpmem_field billing_postcode]</dd>
        <dt>住所</dt>
        <dd>[wpmem_field billing_state] [wpmem_field billing_address_1] [wpmem_field billing_address_2]            
        </dd>
    </dl>    
</div>

５、(カスタム投稿タイプのコンテンツを会員ページとする場合)WP-members＞[WP-membersオプション]タブ内、カスタム投稿タイプを使うための設定チェックを入れる
　カスタム投稿タイプは設定として用意されていますが、現時点では万全なサポートは行われていません。
　注意事項として、「想定の動作をするかどうかは、しっかりレビューしながら確認してください」的な文言が記載されています。
※カスタム投稿タイプでのご利用は自己責任でお願いいたします。

６、各コンテンツの「公開・非公開状態」を設定する
　　内容の中の[内容をブロック]で、公開状態を設定できます。
　　上記「項目５」のチェックを入れることで、カスタム投稿タイプも選択欄に追加されているはずです。
　　ログインが必要な項目には「ブロック」を設定していきます。
　　※「固定ページの中でも特定のページは隠す」といった、ページ単位でブロックすることが可能です。
例：固定ページは基本的に、だれでもアクセスできるが「登録情報」のページはログインしない状態では見せない　など。

５、新規会員登録時のフォーム項目を作成する
　WP-membersの設定ページ内、[フィールド]タブでは会員登録時のフォームの作成が行えます。
　[メタキー]・・・項目独自のパラメータ。
　　　　　　　　　　※新規登録の際には他の項目に被らないキーを設定する必要がある
　　　　　　　　　　※基本情報は最初から設定されており編集が不可。
　[表示]・・・列にチェックが入っている項目が、実際に登録時に表示されます。
　[Required]・・・必須項目にしたい項目にはチェックを入れてください。

　入力見本(プレースホルダ)を設定したい場合には、その項目右の[編集]から入力を行います。
　独自の項目を追加したい場合には、フィールドの追加ボタンから項目を追加してください。

　入力フォームの項目の並び順は、項目をドラッグアンドドロップで入れ替えて対応できます。
　入れ替えた後には、忘れずに設定を保存してください。

　
６、[ダイアログ][メール]のタブの内容を編集する
　メールを確認しながら、必要な文言を入力していきます。
　初期状態では英語の文章が入っています。
　▽ダイアログ設定見本

　
▽メール設定見本

会員機能を使用したコンテンツの設定はこれで完了です。
公開前には登録時に届くメールの中身など、必要に応じて編集を行っていきます。

その他、運用するにおいて必要と思われるカスタマイズを行いましたので、下記に一例として記載いたします。

———————————————-

【基本設定以外に行ったカスタマイズ例】
▽ログインページへの遷移リンクをログイン状態により振り分ける

<ul>
<?php if( ! is_user_logged_in() ) : ?>
    <li><a href="<?php echo esc_url(home_url('/'));?>login/">ログイン</a></li>
<?php else: ?>
    <li><a href="<?php echo wp_logout_url( home_url() ); ?>">ログアウト</a></li>
<?php endif; ?>
</ul>

【会員登録時に郵便番号から住所を自動入力】
プラグインを利用しました。設定に関しては別記事を作成しております。
WordPressに郵便番号自動入力機能を追加する「zipaddr-jp」を使ってみた

【未ログインユーザへの表示変更】
〇未ログイン時に会員コンテンツの一覧にアクセスすると、「会員登録」と「ログイン」を促す表示を出す様に変更
　https://shachoai.com/member/
　※URLをたたいて、メンバー限定のコンテンツのアーカイブに直接アクセスされた時の為の対応
・archive-member.php(会員コンテンツの一覧)にifを設定

<?php if( ! is_user_logged_in() ) : ?>
<div class="login-cntents">
    <p>このコンテンツは、会員様限定のコンテンツとなります。<br>
    閲覧をご希望の方は下記のリンクより、会員登録を行ってください。</p>
    <div class="block">
        <h3 class="h3-ttl">会員登録をご希望の方はこちら</h3>
        <a href="<?php echo esc_url(home_url('/'));?>register/" class="btn"><span>新規会員登録</span></a>
        <h3 class="h3-ttl">既に会員の方はこちら</h3>
        <a href="<?php echo esc_url(home_url('/'));?>login/" class="btn"><span>ログイン</span></a>
    </div>
</div>
<?php else: ?>
    ～ここに一覧表示用のソースコードが入ります～
<?php endif; ?>

【ログイン時のユーザへの表示を変更】
〇ログインした後の表示を、会員コンテンツの一覧に変更

// ログイン後に指定のページへリダイレクト
function my_login_redirect( $redirect_to, $user_id ) {
    return home_url(&#039;/&#039;).&#039;member&#039;;
}
add_filter( &#039;wpmem_login_redirect&#039;, &#039;my_login_redirect&#039;, 10, 2 );

〇ログイン状態では新規登録ページを表示しない
　※登録ページにアクセスすると、会員コンテンツ一覧にリダイレクトするように設定

// ログイン状態で新規登録ページにアクセスすると指定のページへリダイレクト
function my_template_redirect(){
    if (is_user_logged_in() && is_page('register')) {
        wp_safe_redirect( home_url('/').'member' );
        exit();
    }
}
add_action('template_redirect','my_template_redirect');

【会員情報ページをログイン状態／非ログイン状態で振り分ける】
・ログイン時・・・登録情報
・非ログイン時・・・会員登録を促すリンクボタン
A、function.phpに投稿内にログイン状態を判別するためのショートコードを記載

// 投稿内でログイン状態を判別するショートコード
function if_login( $atts, $content = null ) {
    if(is_user_logged_in()) {
        return do_shortcode( shortcode_unautop( $content ) );
    } else {
        return '';
    }
}
add_shortcode('if-login', 'if_login');

B、分岐分岐を含んだ形で登録情報ページを書き換える
[if-login]～[/if-login]の中身は、ログインした状態でのみ閲覧可能となります。

[if-login]
<div class="profileBlock">
    <dl class="profile">
        <dt>ユーザーID</dt>
        <dd>[wpmem_field user_login]</dd>
        <dt>お名前</dt>
        <dd>[wpmem_field last_name] [wpmem_field first_name]</dd>
        <dt>登録メールアドレス</dt>
        <dd>[wpmem_field user_email]</dd>
        <dt>郵便番号</dt>
        <dd>[wpmem_field billing_postcode]</dd>
        <dt>住所</dt>
        <dd>[wpmem_field billing_state] [wpmem_field billing_address_1] [wpmem_field billing_address_2]</dd>
    </dl>    
</div>
[/if-login]
<div class="btn-wrap">
[wpmem_profile]
</div>

参考サイト

ギークスグロース: 無料で会員サイトが作れるWP-Membersの使い方を紹介; https://geeksgrowth.com/how-to-use-wp-members/
D-Grip システム -制作部: WPの投稿・固定ページでログイン/ログアウトの条件分岐をする方法; https://www.d-grip.com/blog/seisaku/4945

前の記事

投稿のIDから、カスタム投稿タイプのラベルを取得する 2020.06.03
次の記事

WordPressに郵便番号自動入力機能を追加する「zipaddr-jp」を使ってみた 2020.07.03

会員限定ページを作成できるWP-Membersをカスタム投稿タイプで使ってみた（5系WP）

参考サイト

投稿のIDから、カスタム投稿タイプのラベルを取得する 2020.06.03

WordPressに郵便番号自動入力機能を追加する「zipaddr-jp」を使ってみた 2020.07.03