• HOME
  • Wordpress
  • [Wordpress]WP-Membersプラグイン利用しつつBtoB的な複数の種類の会員サイトを作る方法

2020/05/23 20:51

[Wordpress]WP-Membersプラグイン利用しつつBtoB的な複数の種類の会員サイトを作る方法

「WP-Members」は会員サイトを制作する上でとても便利なWPプラグインです。

今回はWP-Membersを使って、複数の会員種別を登録させる方法をご紹介します。

例えば「飲食店」と「旅行代理店」のようにBtoBのマッチングサイト的な事も実現できます。

 

 

Wp-Membersのプラグイン自体の概要については割愛

 

プラグイン自体に関する内容は使ってみればだいたい分かると思うのでここでは触れませんがご了承ください。

英語のプラグインですが、日本語で詳しく解説されてるサイトも複数存在してます。

 

ただ、このプラグインの使い方として、1つのログイン画面で1種類の会員を登録して、その登録した会員同士で何かしらゴニョゴニョするような使い方が想定されてると思います。

今回はその会員登録の方法自体を複数にしてしまって、双方のジャンル毎に使い方が変わるようなサイトを作る為の設計みたいものを考えてみましょう。

 

【一般的なWP-Membersの使い方】

 

 

【今回やりたいWP-Membersの使い方】

 

 

例として、「店舗」と「利用者」を会員種別とする

 

 

今回は一例として何かを運営してる「お店」が1つ。

そしてそれを知りたい、見たい、利用したいという「利用者」側が1つ。

この合計2種がマッチングする為のサービスを想定してみたいと思います。

 

 

ちなみに後はここにプラスαで「管理者」も入ってきますね。

管理者はサイトの管理、またはこのサービス自体の管理をする運営者の事となります。

 

 

・お店側(何かしらのサービスを持ってる企業)

・利用者側(それを利用したい企業または一般ユーザー)

・管理者(プラスα)

 

この3者の関係での会員サイトを作る例で説明していきます。

 

【今回の例での設定】

・お店側→飲食店

・利用者側→旅行会社

 

今回はこういった形で例を書いていきたいと思います。

①全国の飲食店が自分のお店を紹介したくて登録する

②旅行会社がお客様の食事の配送先として登録された飲食店へ予約ができる

こういったサービス内容のサイトを作る想定でいきます。

 

 

マッチングするようなサービスなら何でもOKですね。

例えば、医者と患者、ブリーダーとペット欲しい人、美容院と髪切りたい人、不動産屋と引っ越したい人、飲食店と利用者、求人と求職者などなど。

 

 

会員登録画面の実装

 

まずは下準備がちょっと必要です。

WP管理画面内でWP-Membersの設定、「フィールド」の項目の中にラジオボタンで「業種選択」みたいなものを1つ作っておきましょう。

選択させる形になるので「旅行会社」と「飲食店」の2択になるように設定します。

 

 

 

 

※ここで設定した「メタキー」の「corpgenre」は、後のコードで使う部分になるので、もし名前を変更する際には注意です

 

 

さて、WP-Membersの大まかな設定が終わったら、どちらの会員種別での登録かを分ける為にログイン画面を自作する必要があります。

 

一例として

「index.php」で新規登録させるボタンを実装させ、そして

「register.php」で登録用フォームを実装。さらに

「login.php」というページにログイン画面を表示させるとします。

 

・会員種別を選択させるボタン

 

では登録を促すボタンの実装例からです。

それぞれ「旅行会社」か「飲食店」かで登録フォーム内容を分岐させます。

【index.php】

<form action="<?php echo home_url('');?>/register" method="post" class="">

  <input type="hidden" name="reg_genre" value="travel">

  <button type="submit" name="reg_btn">旅行会社様新規登録</button>

</form>

 

<form action="<?php echo home_url('');?>/register" method="post" class="">

  <input type="hidden" name="reg_genre" value="shop">

  <button type="submit" name="reg_btn">飲食店様新規登録</button>

</form>

 

※スタイルは自由に適宜当ててください

本来ならここにさらに「ログイン」ボタンかフォームも設置する事になるでしょうけど、今は取り合えず後回しにします。

 

・選択後に飛ぶ入力フォーム

 

次に上記のボタンを押された後の処理です。

register.phpへとページ遷移してから、ここで分岐させる事になります。

 

ここのとこがちょっと難しいかもですが、どういった処理をしてるのかをよく理解しましょう。

 

【register.php】

<?php

$reg_genre = $_POST['reg_genre'];

if($reg_genre =='travel') {

$reg_name = '旅行会社';

$user_role = 'subscriber';

} else {

$reg_name = '飲食店';

$user_role = 'author';

};

?>

 

<?php if($reg_genre =='travel'):?>

<script>

$(function() {

  $("#corpgenre_1").attr("checked", true);

});

</script>

<?php elseif($reg_genre =='shop'):?>

<script>

$(function() {

  $("#corpgenre_2").attr("checked", true);

});

</script>

<?php endif;?>

 

<script>

$(function() {

document.form.method="post";

// ラジオボタンを隠す

$('.radio, .div_radio').css('cssText', 'display: none !important');

// キャプチャの前に規約挿入

$('label[for="captcha"]').before(document.getElementById('c-form-terms-box'));

});

</script>

 

<!-- 挿入分 -->

<?php if(!isset($_POST['submit'])) :?>

<div id="c-form-terms-box">

  <input type="hidden" name="user_role" value="<?php echo $user_role;?>">

</div>

<?php endif;?>

 

<?php echo do_shortcode('[wpmem_form register]'); // 登録フォームを読込んで出力させる ?>

 

 

簡単に説明すると、最初に「旅行会社」か「飲食店」か、どちらのボタンを押したのかで変数に入れる値が変わります。

$_POST['reg_genre']の部分ですね。

ここで変数に入れたものを隠しフォーム内で利用してます。

 

管理画面のWP-Membersのフィールドで設定した「業種選択」のラジオボタンがこれで勝手に選択されます。

ここでフィールドで設定した時の「メタキー」の箇所、corpgenreの名前が使われる事になるので要注意です。

 

ちなみにこのラジオボタンは本来は登録者が任意で選ぶような項目なのですが、あえてdisplay:hiddenにして隠してるのでパッと見では分からなくなってます。

検証すれば見えてしまいますが、別に見られたところで困るもんではないので。

ただ、これの表示を出しっぱなしにしておくと登録する側がミスって違うのにチェックを付けてしまう可能性が増えるので隠してる感じです。

 

あまり気にしないシンプルなやり方で行くのであれば、最初に選択ボタンでページ遷移させてフォームを出すのではなく、いきなり登録フォーム内だけで業種選択させて終わりという方法でも全然OKだと思います。

 

・functions.phpに追記(登録時の権限の振り分け)

 

そして、さらに登録時の選択によって権限も変わるようにしてます。

「functions.php」に必ずこちらを追記してください。

 

【functions.php】

// 登録時に設定されたものによって登録時の権限を変更する

function my_user_register( $user_id ) {

  if ( isset( $_POST['user_role'] ) ) {

    $user_role = $_POST['user_role'];

    if (

      $user_role == 'author' ||

      $user_role == 'subscriber'

    ) {

      $user = new WP_User( $user_id );

      $user->set_role( $user_role );

    }

  }

}

add_action( 'user_register', 'my_user_register' );

 

コメントアウトで「挿入分」と書かれた箇所にどちらの業種を選んだかによって権限が変わるように変数を引っ張ってます。

そのまま引っ張ってきた「author」か「subscriber」かによって、登録時のユーザー権限が決まる形です。

 

【Wordpressのユーザー権限一覧】

・購読者(Subscriber)

WordPressにログインすることが可能。

・寄稿者(Contributor)

レビュー待ちの投稿を作成することができる。レビュー待ちになった投稿の公開は、編集者以上の権限グループのユーザーが行う。

・投稿者(Author)

投稿を行うことはできるが、固定ページや他のユーザーが作成した投稿を扱うことはできない。

・編集者(Editor)

投稿や固定ページ、カテゴリーなどを、他の人が作成した投稿を含めて扱うことができる。テーマやプラグイン、ユーザー、サイト設定を扱うことはできない。

・管理者(Administrator)

トップレベルの権限グループで、すべての権限を持つ

 

つまり、設定上は飲食店は投稿者(Author)、旅行会社は購読者(Subscriber)となります。

なんでこの設定なのかと言うと、飲食店には「記事投稿」を使って自分の店舗を記事として投稿してもらう。

旅行会社には購読者として飲食店が投稿した記事が自由に閲覧のみできるようにするという事です。

 

 

まとめ

 

かなりざっくりとした説明となりましたがいかがだったでしょうか。

 

・WP-Membersの設定で下準備(フィールドへの追加)

・index.phpで業種選択させるボタンをつける

・register.phpでデフォのフォームに一工夫加え、functions.phpにも追記

・ユーザーの会員種別として振り分けできるようになる

 

こんな感じでいけるかと思います。

 

他にもWP-Membersプラグインを使った便利な使い方がたくさんありますので、また紹介できればと思います。

 

 

では現場から以上です!

3972

PICK UP

ハイスピードプラン
mixhost
300_250