webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

WordPressのログイン・ログアウト・権限システムを理解・カスタマイズして、『会員がコンテンツ読めるサイト』を作ろう

      2021/03/13

WordPressのログイン・ログアウト・権限システムを理解・カスタマイズして、『会員がコンテンツ読めるサイト』を作ろう

今回は、以前にちょっとお仕事で扱った、『ログインした会員が、コンテンツを読めるタイプのサイト』について扱います。 普通にブログを書くだけでは、とくに使うことのない機能とはいえ、『サロン・スクールの入会者だけ見れる』『代理店や取引先だけ読める』みたいなケースでは利用します。また、プラグインだと『WP Members』『Ultimate Member』『Memberful WP』などをつかうことが多いと思いますが、ファイル数が多い・エラーなどのリスクもあります。 そこで、ちょっとした会員機能ならプラグイン無しでなんとかしてみるというのが、今回の記事の趣旨です。さっそくみていってみましょう。

まずは、WPログインの仕様や、設定できるパラメーター・出力用関数などを押さえる

まずは、普通のログインフォームを見てみましょう。『〇〇(ドメイン)/wp-login.php(変えていない場合)』で出てくるフォームです。入力できる内容は、大まかに『ユーザー名orメルアド・パスワード・ログイン状態保存・ログインボタン』という形になっています。

ソースを見てみると、データベースの『wp_usersテーブル』で使われる値(id="user_login"やid="user_pass")が確認できます。そのほか、ログインフォームのパラメーター(設定できる)『rememberme(ログイン状態保存)』や、隠しパラメーターの『リダイレクト』や『クッキーテスト』などが確認できました。

あと、『name="testcookie" value="1"』についてですが、おそらくcookie受け入れokかのテストのようです(WPはcookieオンにしないとログインできない)。この値は、『cookieブロック・ログイン不可能状態にしても値は一緒だった』ので、決まっているっぽいです。

WordPressのログインフォームの表示・パラメータ設定のしかた

『wp_login_form()』を任意の場所で実行すれば、ログインフォームを

WPログインのフォーム表示自体は簡単です。組み込みで、フォーム表示用のファンクションがあるからです。例えば、こんな感じで『任意の固定ページをidで指定、wp_login_form表示(phpで記事id指定した条件分岐です)』とやれば・・・

ログイン機能自体は、サックリ実装できます(もちろん、会員の権限や、管理画面はリダイレクトにするかなど、検討することはたくさんあります)。 ただ、デフォルトだと、やっぱり味気ないので・・・

実際には、このような形で、パラメーターを指定することになると思います。ログイン後のリダイレクト先指定もできますが、ここはあとで取り上げます。(コードは、codexにある、wp_login_formの記事を参考にしました)

『'remember'=> false』の場合、ログイン状態を保存が不可に

いくつかパラメーター指定例もご紹介。 『'remember'=> false』を指定すると、『ログイン状態を保存する』が表示されなくなります。 value_rememberの初期値はfalseなので、ログイン状態保存がききません(trueにしないようにしてください)。『不特定多数のユーザーが、ブラウザを一時閉じても、ログインしっぱなし』みたいな状態がセキュリティ上好ましくない場合は、こちらの設定をおこないます。

『'value_remember'=>true』だと、『ログイン状態を保存する』の初期値が『保存する』に

上記の『'remember' => true(ログイン状態保存する)』と合わせて使います。『'value_remember'=>true』の場合は、『ログイン状態を保存する』の初期値が『保存する』になります。上記とは逆で、『ユーザーがクッキー削除したり、ログアウト処理を行うまでは、ログインさせておく』という状態にしたい場合は、こちらを選択します。

redirectで、ログイン後のリダイレクト先を指定

見るだけの方が管理画面まで入ってくるのはという心配がありますが、特にパラメーターを指定しなくても、『デフォルト状態でフォームを設置したページ』がリダイレクト先(元のページ)になることが確認されました。 もちろん『home』などに飛んでもらってもokですが、元のページをそのまま使う場合は『ログインフォームを、ログイン中は表示しない』『ログイン中は、ユーザー名など、ログインしていることがわかる表示をする』などを行うと、使いやすいと思います。

WPデフォルトの機能で会員・ユーザー登録はどうするか?

管理者が『権限→購読者』などでユーザー登録

ちょっとめんどくさいんですが、一番安全なのは『メールフォームやsnsメッセ・直接連絡』などで登録申請を受け付けて、管理者が入力・登録するパターンでしょうか。 なかにはいたずらや攻撃目的・悪意があるという人も、長く運用すればでてくるかもしれません。管理人はエゴサしないんで、自分のサイトにこういう人がいるかどうかは知りません(笑) そういった人はハネつつ、『権限→購読者』などで登録していく感じになりそうです。

なぜ『権限→購読者』かというと、『購読者権限では、テーマ編集・ユーザー管理・記事執筆などができない』からです。『会員が間違っていじってテーマ壊した』みたいなリスクが減らせます。純粋に読むだけ会員は、購読者権限で大丈夫です。

誰でも会員登録できる仕様にする場合は『wp_register』を使う→wp-login.php?action=registerを出力

実はWordPressには、デフォルトで『ユーザー登録できる機能』があります。WPテンプレートタグに登録リンク出力する『wp_register』というのがあるんですけど、利用するためには管理画面の設定で『誰でもユーザー登録できるようにする』をチェック。デフォルト権限はやはり『購読者』が安全です(誰でも管理者で入れると、運営上のリスクが高い)。

そのあとは、任意の場所にwp_registerを記載。パラメーターは『前後の文字列』を指定できます。CSSで整えたい場合は『div class="〇〇"・ /div』を出力しても良いかも。

挙動は『ログイン時→管理画面リンク出力』『非ログイン時→登録フォームへのリンク出力』という形。adminに入れたくない場合は『if (!is_user_logged_in())』を使って、ログインしていないときだけ出すという形にもできます。

出力されるリンクは『〇〇(ドメイン)/wp-login.php?action=register』の、デフォルト登録フォームです。 『wp-login.php・パラメーター付き』のアドレスでは、他に『wp-login.php?action=lostpassword』(パスワード忘れたときのリセット)などがあります。

フロントからのログアウト処理と、リダイレクト(ログアウト後飛び先)は?→wp_logout_urlで

管理者や、普通にブログ書いてる方は、管理画面からログアウトボタンで出るのが一般的ですが、『読むだけ会員』を、わざわざ管理画面までアクセスさせないで、フロントでログアウト処理してもらうにはどうするか?先日も当サイトで取り上げた『wp_logout_url』を使ってみます。

こんな感じで。アンカータグ内にphp打って、変数redirectにリダイレクト先urlを指定。ホームを指定してみます。

フロントに、ログアウト用リンクが出力されました。先日の記事でも書いたように、この出力のしかただと『wpnonce=〇〇〇〇』というパラメーターがリンクに入るため、ワンクッション置かずにログアウト可能。 ユーザビリティを上げたいときは、フロントにも『ログイン/ログアウト状態がわかる表示』をつけても良いでしょう。

ログイン者だけ、記事を読めるようにするには?→is_user_logged_in

条件はいろいろありますが、簡単な例から。例えば『固定ページをログインした会員限定にしたい』場合は、page.php内のthe_content(記事表示する部分)を、『is_user_logged_in』で、『ログインした場合表示』という形にします。 elseにはそのほかログインしていない場合のメッセージが出るようにします。

ログインした場合。ふつうに記事を読むことができます。

ログインしていない状態。『ログインしてください』メッセージが表示します。このときログインフォームなどが出てもベターです。

最初に『フロント・固定ページだけ全員読める・記事はログイン会員限定』とか、『特定カテゴリ・特定投稿タイプをログイン会員限定』みたいに、運営者の状況に応じて決めておくとよいでしょう。 また、(掲示板サイトとかで、画像パス直接貼る人がいるので)外部から画像を見られたくない場合は、htaccess設定『SetEnvIf Referer』なども併用していきます。

参考リンク(codex等)

■wp_login_form(ログイン)
https://wpdocs.osdn.jp/テンプレートタグ/wp_login_form

■wp_register(登録)
https://wpdocs.osdn.jp/テンプレートタグ/wp_register

■wp_logout_url(ログアウト)
https://wpdocs.osdn.jp/テンプレートタグ/wp_logout_url

あとがき・まとめ

会員サイトをプラグイン無し・WPの機能だけで作るという内容でしたが、シンプルなタイプであれば大丈夫かなという印象でした。 プラグインでサックリ実装するのもラクですが、『読み込みファイルが異様に多い・デベロッパーが潰れたらサポートがない・バージョンアップ時のエラーや、プラグイン干渉が怖い』といったリスクもあるので、ある程度作り方を押さえていただいても良いと思います。


【カテゴリ】 - wpサイト制作事例
【タグ】 - , , ,

  関連記事

【静的HTML→WordPressリニューアル】同じデザインでWPにするときの注意ポイント

今回は以前、管理人が『お取引先の会社のサイト(静的HTMLは持っ ...

【WordPress】人気記事表示のしかた~PVカウント・フィールド格納&ソート(ログイン者カウントなし)

今回は、管理人がお仕事のWPサイト開発で使ってみたテクをご紹介し ...

bulma.cssで、サクッとお洒落モダンデザインにリニューアルしてみる【フレームワークwebサイト制作】

今回は、bulma.cssが、お仕事で扱ったお取引先のWordP ...

WordPressのカスタムフィールド値で記事を絞り込み・検索するサイトの作り方・一部始終を徹底解説

今回は、需要があるかもしれない『WordPressのカスタムフィ ...

WPカスタムフィールドを使って、soundcloudみたいに記事一覧でオーディオ再生できるサイトを作る方法

今回は、管理人が持っている著作権フリー曲サイトに、『カスタムフィ ...

WPログアウト機能『wp-login.php?action=logout』と『wp_logout_url』の違い~後者はwpnonceで一発ログアウト

今回は、(twitterにもちょっと書いたんですけど)管理人が、 ...

別ディレクトリでの記事の管理・表示を、1つのWordPressを使いまわして対応する方法(プラグイン無しカスタム投稿・wp-blog-header.php)

今回は、別ディレクトリのコーポレート・お仕事サイトの記事管理も、 ...