LoginSignup
123
119

More than 5 years have passed since last update.

Wordpressで会員制サイトを構築してみよう 事前準備

Posted at

Wordpressで会員制サイトを作ることが増えてきました。
今回は定番のプラグイン "Theme My Login" を利用して、下記の機能の実装方法をまとめてみます。

元記事

下記エントリの転載になります。
WordPressで会員制サイトを構築してみよう(事前準備)

機能(仕様)

  • メールアドレスとパスワードで会員登録/ログイン
    (ユーザー名は入力させない)
  • メールアドレスの認証
  • 登録ユーザーは、自分のプロフィール/メールアドレス/パスワードの変更が可能
  • パスワード紛失時に再設定が可能

利用プラグイン

下記プラグインをインストールします。

  • Theme My Login
    会員登録/ログイン/プロフィールページの機能

前準備

WordPressの設定

ユーザーが会員登録できるよう、WordPressの設定をします。

  • 管理画面「設定」→「一般」内の「だれでもユーザー登録ができるようにする」にチェック
  • 「新規ユーザーのデフォルト権限グループ」を「購読者」に設定

権限グループについては、用途によって変更してください。
(サイトの閲覧のみをさせたい場合は「購読者」です)

Theme My Loginのテンプレートファイルをコピー

wp-content/plugins/theme-my-login/templates 内にあるファイルで、必要なものを自分のテーマファイル内にコピーします。
コピーしたファイルを変更することで、登録/ログインフォームの見た目や項目を変更することが出来ます。

  • register-form.php
    (会員登録フォーム)
  • login-form.php
    (ログインフォーム)
  • profile-form.php
    (ユーザーのプロフィール編集フォーム)
  • lostpassword-form.php
    (パスワード紛失時、新しいパスワード発行用のメールアドレス入力フォーム)
  • resetpass-form.php
    (新しいパスワード再発行フォーム)

Theme My Loginの設定

管理画面「TML」で各種設定を行います。

「General」タブ

  • 「Enable e-mail address login」にチェック
  • 「Enable AJAX」にチェック
  • 「Enable Custom E-mail」にチェック
  • 「Enable Custom Passwords」にチェック
  • 「Enable Security」にチェック
  • 「Enable Themed Profiles」にチェック
  • 「Enable User Moderation」にチェック

上記にチェックを入れて保存すると、管理画面の左側に下記の項目が増えます。

「E-mail」タブ(Custom E-mail)

会員登録時の自動返信メール文言を任意に設定できます。

「New User」・・・登録完了時
「Retrieve Password」・・・パスワード再設定の申請時(パスワード再設定用のURLが書かれています)
「Reset Password」・・・パスワード再設定完了時
「User Activation」・・・新規登録時(メールアドレス認証用のURLが書かれています)

「Themed Profiles」タブ(Enable Themed Profiles)

「Themed Profiles」・・・ユーザーのプロフィール画面を、管理画面ではなくテーマファイルのテンプレートで表示する権限を設定します。
今回は「Subscriber(購読者)」にチェックします。

「Restrict Admin Access」・・・管理画面へのユーザーの制限を行います。同様に「Subscriber(購読者)」にチェックします。

「Moderation」タブ(Enable User Moderation)

E-mail Confirmation にチェックを入れます。
新規登録時に、メールアドレス認証用のメールが自動で送信されるようになります。

固定ページの作成

Theme My Loginを有効化すると、下記の固定ページが自動で作成されますので、確認しておきます。

  • /login(ログイン)
  • /register(登録)
  • /resetpass(パスワードをリセット)
  • /lostpassword(パスワード紛失)
  • /あなたのプロフィール(プロフィールページ)
  • /logout?*********(ログアウト)

プロフィールページのみ、URLが日本語に設定されているため、
/あなたのプロフィール → /profile のようにお好みでslugを変更しておきます。

また、各固定ページの本文に自動で書かれているショートコード [theme-my-login] は、先ほどコピーしたTheme My Loginのテンプレートを呼び出すためのものです。
/register ページの場合、register-form.php の内容を出力するようになっています。

とりあえずこれで準備は完了です。

会員登録が出来るか試す

/register にアクセスすると、自動的に↓のような画面になっています。

register1.jpg

ユーザー名、メールアドレス、パスワードを設定すると、設定したメールアドレスに認証用メールが送信されます。そのURLをクリックすると、認証が完了です。

register2.jpg

とりあえずこれだけで、会員登録が可能になります。簡単すぎますね。

register3.jpg

ログインするとプロフィール画面も作成されています。
とりあえずここまでで、簡単に登録機能が追加できました。

次回、ユーザーの登録項目をカスタマイズしてみます。

123
119
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
123
119