wordpressでのスマホ対応webサイト制作・wpプラグイン・PHPプログラム・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

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

      2020/09/23

こんにちは、管理人@SS_mshpです。

今回は、以前にちょっとお仕事で扱った、『ログインした会員が、コンテンツを読めるタイプのサイト』について扱います。
普通にブログを書くだけでは、とくに使うことのない機能とはいえ、『サロン・スクールの入会者だけ見れる』『代理店や取引先だけ読める』みたいなケースでは利用します。また、プラグインだと『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の機能だけで作るという内容でしたが、シンプルなタイプであれば大丈夫かなという印象でした。
プラグインでサックリ実装するのもラクですが、『読み込みファイルが異様に多い・デベロッパーが潰れたらサポートがない・バージョンアップ時のエラーや、プラグイン干渉が怖い』といったリスクもあるので、ある程度作り方を押さえていただいても良いと思います。

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - webメディア制作運用, wpサイト制作事例
【タグ】 - , ,

  関連記事

イベントハンドラonClickとopenメソッドで、複数youtube動画をボタンで切り替え、iframe内に表示する方法

今回は管理人が、お取引先のサイトにつけようとしたけど、より便利な ...

【WordPress条件分岐】is_singleとis_singularって違うの?→idやスラッグ指定、投稿タイプ指定の面で違いが

今回は、WPの条件分岐などに使うファンクションで、名前が超似てい ...

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』み ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

【WordPressカスタムフィールド検索】meta_queryで、シリアライズ値が入ったフィールドを持つ記事をヒットさせるには?

今回は、ちょっと需要があるかもしれない『WordPressカスタ ...

WP管理・投稿画面カスタマイズ~『p』『h2』みたいなタグ・定型文をボタン1つで記事に追加したい

今回は、以前サイト制作のお取引先さまと話した、WPの記事を投稿す ...

【WPプラグイン無し】3行のコードで、ブロックエディタ&ブロックライブラリCSSを無効にする方法

今回は、管理人が『お取引先さまのwebサイトでブロックエディタま ...