やまさきやまさき
2017/04/27

WordPressで会員機能が簡単に使える無料のプラグイン「Simple Membership」の使用例

この記事は約5分で読めます。

WordPressで会員機能が簡単に使える無料のプラグイン「Simple Membership」の使用例

WordPressブログ

「会員制サイト」と聞くと、作るのが難しそうなイメージがありませんか?実はWordpressでは、無料のプラグイン「Simple Membership」を使用することで、簡単に作ることができます。

この記事では、無料会員機能のついたページ作成に向けて、

・無料会員登録ページの実装

・ログインページの実装

・ログアウト

までの手順をご紹介していこうと思います。

「Simple Membership」のインストールと基本設定

まずは「Simple Membership」プラグインをインストールしましょう。

WordPressの管理画面から、プラグイン > 新規追加 > キーワードに「Simple Membership」を入力して検索し、インストールします。

img1

 

インストールすると管理メニューに「WP Membership」が追加されます。このメニューから様々なカスタマイズができます。 

次に、ユーザーが無料会員登録できるように準備をしていきます。

上記メニューから、「会員レベル」をクリックし、「Add Level」タブから無料会員のレベル設定を追加します。

「会員レベル名」に任意の会員名を設定してください。

見本の画像ではシンプルに「無料会員」と名付けました。その下にあるデフォルトのユーザー権限は初期の「購読者」のままで大丈夫かと思います。

ただ、「管理者」に設定してしまわないように気を付けてください。

「古い記事を閲覧可能にする」ボタンを押せば登録が完了します。

何故こんな分かりにくい名前のボタンなのか…笑

 

 

会員レベルの設定が追加できたら、「会員レベル」タブに戻り、設定が登録できているか確認しましょう。

無事に登録できていれば下の画像のように項目が追加されているはずです。

ここで、左側に先ほど作った会員レベルのIDが表示されているので、このIDを覚えておいてください。(初めて追加した場合はIDは2になっているかと思います。)

 

次に、メニューから「設定」をクリックし、一般設定をしていきます。

 

「無料会員を有効化」にチェックを入れ、先ほど記憶しておいたIDを入力します。「Adminバーを隠す」や「Moreタグ以下のコンテンツを限定公開」などは各サイトにて判断してください。

設定ができたら、「変更を保存」ボタンで保存します。

 

ここまでで下準備はある程度完了です。

 

新規登録ページ、ログインページを作成

さて、下準備ができたので実際に会員登録やログインを行うページを作成していきましょう。

と言いいましたが、実はこのプラグイン、すでに各ページを自動で作成してくれています。

 

先ほどの一般設定を行う画面での保存ボタンの少し上に、「ページ設定」という項目があります。

実はすでにここに記述されているurlで各ページが作成されています。

 

管理メニューから「固定ページ」をクリックし、作成されたページを確認してみましょう。

このように、各ページが表示されていると思います。

 

「Join Us」というページが会員登録ページです。このページを見てみると、

初期状態では英語でいろいろ書かれています。

こんな内容をユーザーに見せるわけにはいかないので、ささっとキレイに削除しましょう。

 

代わりに、次のショートコードを記入します。

[swpm_registration_form level=2]

「level = 2」という記述は、先ほど設定した無料会員(ID=2)用のページですよ、という意味になります。

「level = 〇」の〇に設定した会員レベルIDを記入することで、その会員レベルへの登録フォームが表示されます。

 

以上で、会員登録ページが作成できました。

しかし、作成したページの現状を見てみると・・・

CSSがあたっていないので非常に素っ気ない表示になっています。各ページに合わせて自由にデザインしてみてください!

 

同じように、その他の固定ページもショートコードを埋め込んでいくだけで実装できます。

ログインフォーム用ショートコードは下記の通りです。

[swpm_login_form]

 こちらもデフォルトではすごく素っ気ない表示になっているので、CSSだけは忘れずに設定してあげましょう。

ログアウトボタンを作成

最後に、ログアウト機能を実装しましょう。

WordPressでのログアウト方法はいくつかあるのですが、wp_logout_url()関数を使用すると簡単に実装できます。

記述方法はaタグのhref属性にこの関数を呼び出してあげるだけ。

<a href="<?php echo wp_logout_url("ログアウト後に表示させるページのurl"); ?>">
ログアウト
</a>

これだけで、このaタグをクリックするとログアウトが完了します。

この時、()の中は空でもログアウトはできますが、WordPressのlogin画面へ遷移してしまいますので、注意が必要です。

 

 

ヘッダーなどにログインしていないときはログインページへ遷移させるボタンを表示させておき、ログイン状態になるとログアウトボタンに変化させる、

というよくあるログイン/ログアウトの切り替え方法もご紹介しておきます。

WordPressではログイン状態かどうかを判断するためのis_user_logged_in()という関数も用意されているので、この関数とif分を使用し、

<?php if ( is_user_logged_in() ) {
//ここにログアウトボタンの記述
}else{
//ここにログインボタンの記述
}; ?>

という風に条件分岐してあげるだけで簡単に実装できます!

 

ぜひ挑戦してみてください!

WordPressで会員機能が簡単に使える無料のプラグイン「Simple Membership」の使用例
やまさき フロントエンジニア

新人縄跳び野郎です!

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。