Wordpressプラグインなしで会員ページ作成

Wordpressの案件で、会員だけが見られるページをプラグインなしで作ったのでメモします。
会員登録もマイページも必要なく、パスワードだけ知っている会員が閲覧できる簡易なページ。
ただし記事だけにパスワードをかけるデフォルト機能ではなく、購読者権限で（一発でパスワードが変えられる為）カスタム投稿そのものにパスワードをかける。
完全オリジナルなので見落としてる所があるかもしれません。
ただ、検索しても思うようなものが見つからなかったので、作ろうと思った次第です。

やりたいこと

• シンプルな会員だけが見られる投稿ページを作りたい
• 記事だけにパスワードをかけるデフォルト機能ではなく、テンプレートそのものにロックをかけたい
• プラグインは要らない機能が多く、設定がわかりずらいので使いたくない
• コアファイルは触らずにテンプレート内で処理したい
• 購読者と管理者のログインURLは別にしたい（入口は分けたい）
• IDは必要なくパスワードだけでログイン出来るようにする

おなじみのデフォルトのログイン画面

カスタマイズしたログイン画面(目アイコンがお茶目です)

事前準備

• 購読者権限のアカウントを作る
• 会員専用のカスタム投稿を作る前提で進めます
  アーカイブ用とシングルページのテンプレートを作る
  post名はmember
• ログイン専用の固定ページを作る
  スラッグはmy_login

ログインページの固定テンプレートを作る

デフォルトのログインはWPディレクトリ直下のwp-login.phpだけど、ここは触らずにテーマ内にテンプレート作ってインクルードします。

my_login.php

<?php
/*Template Name: ログインページ*/

if (is_user_logged_in()) {
  header('location: ' . home_url('/') . 'member/');
  exit();
} else {
  require_once(dirname(__FILE__) . 'ファイルパス/wp-login.php');
}

wp-login.phpを読み込みます。
ログインしていたらメンバー一覧ページへ、そうでなかったらログイン画面に。

アーカイブとシングルテンプレートにロックをかける

archive-member.php

<?php
if (is_user_logged_in()) {
    //ログインしている場合の処理
    //メインループやサブループ、記事など    
} else {
    //ログインしていなかったらログインページに飛ばす
    header('location:' . home_url('/') . 'login/');
}

専用のCSSとjsを作ってfunctions.phpで読み込み

ログインページ専用のCSSとjsを作って外部ファイルとしてfunctions.phpから読み込みさせます。

functions.php

//ログインページにjsとcss読込み
$url = $_SERVER['REQUEST_URI'];

if ($url == '/my_login/') {
  function login_custom()
  {
    wp_enqueue_style(
      'my-login',
      site_url() . '/wp-content/themes/テーマ名/css/my-login.css'
    );
    wp_enqueue_script(
      'jQuery',
      site_url() . '/wp-content/themes/テーマ名/js/jquery-3.6.0.min.js',
      array()
    );
    wp_enqueue_script(
      'my-login-js',
      site_url() . '/wp-content/themes/テーマ名/js/my-login.js',
      array('jQuery')
    );
  }
  add_action('login_enqueue_scripts', 'login_custom');
}

条件判定はURLから取ったけどis_page()でもいけるかも。

あと、購読者がダッシュボードにアクセスできないように設定。
ログインするとダッシュボードに行ってしまうため、一覧ページへリダイレクトします。

functions.php

function subscriber_go_to_home($user_id)
{
  if (!user_can($user_id, 'edit_posts')) {
    wp_redirect(get_home_url() . '/member');
  }
}
add_action('auth_redirect', 'subscriber_go_to_home');

専用のCSSとjsを作成

デフォルトの画面をカスタマイズします。
購読者ページだけに読み込ませてますが、自分わかりやすくするためにbodyタグにmyLoginのクラスを付与しました。

inputのvalueにIDの値を入れておき、非表示にしておきます。
あとは要らない要素を非表示と変更。

大事なのは、空文字や間違えてパス入力するとデフォルトの入力画面に飛んでしまうのでactionを空にしておきます。
こうすると同ページから移動しません。

my-login.js

  //クラスを付与
  $('body').addClass('myLogin');
  //IDの値
  $('.myLogin #user_login').val('member');

  $('.myLogin #backtoblog').html('<a href="/">← 還暦女子TOPページへ</a>');
  $('.myLogin #login h1 a').attr('href', '/');

  //エラー文修正
  $('.myLogin #login_error').html('<strong>エラー:</strong> パスワードが間違っています。<br>');
  //actionを空に
  $('.myLogin #loginform').attr('action', '');

cssはお好みで適切処理

my-login.css

.login {
  background: #fff;
  border-top: solid 10px #00AFCC;
}
#language-switcher {
  display: none;
}
#loginform p:first-child {
  display: none;
}
#nav {
  display: none;
}
#login h1 a {
  background: url(../image/logo.svg) center bottom no-repeat;
  background-size: 70px;
}
.myLogin #login #loginform .forgetmenot {
  display: none;
}

カスタマイズ用classの一覧表みたいなものを見つけましたが、今回はブラウザのデベロッパーツールから拾ってきました。

一つ一つのコードは難しくないのですが、関連ファイルの書き込み箇所が複数あるので見落とさないための忘備録です。

ログインIDを予め入力しておいたのはクライアントの要望で、余計な手間は省きたいとのことでした。