【Simple Membership】ログイン・会員登録フォームのデザインをカスタマイズする方法｜プラグインを直接編集せずテーマで上書き

WordPressで会員サイトを作るときによく使われるプラグインSimple Membership（Simple WordPress Membership）。ログインや会員登録のフォームは標準の見た目のままだとサイトのデザインから浮きやすく、「テーマに合わせたい」という相談がよくあります。

この記事では、Simple Membershipのフォームのデザインを変える方法を、CSSだけで変える方法と、テーマにテンプレートを置いて上書きする方法の2つに分けて解説します。どちらもプラグインのファイルは直接編集しないので、プラグインを更新しても変更が消えません。

この記事の内容は、2026年10月時点の最新版Simple Membership 4.8.5のソースコードで確認しています。以前この記事では「プラグインのファイルをテーマに入れて固定ページのテンプレートにする」方法を紹介していましたが、現在はプラグインに公式の上書きの仕組みがあるので、そちらに書き換えました。

先に結論：どちらの方法を使うか

やりたいこと	方法
色・余白・枠線・ボタンの見た目を変えたい	CSSだけで変える
入力欄の並び順やラベルの位置を変えたい、要素を足したい	テンプレートを上書きする
Bootstrapなど、テーマのクラス名をフォームに付けたい	テンプレートを上書きする

見た目の調整だけなら、まずCSSを試してください。テンプレートの上書きは自由度が高い反面、プラグインを更新したときに中身を見比べる手間がかかります。

Simple Membershipのフォームとショートコード

Simple Membershipを有効化すると、次の固定ページが自動で作られます。フォームはそれぞれのページに入っているショートコードで表示されています。

ページ（スラッグ）	ショートコード	使われるテンプレート
ログイン（membership-login）	`[swpm_login_form]`	`login.php`（ログイン後は`loggedin.php`）
会員登録（membership-registration）	`[swpm_registration_form]`	`add-v2.php`または`add.php`
プロフィール（membership-profile）	`[swpm_profile_form]`	`edit-v2.php`または`edit.php`
パスワードリセット（password-reset）	`[swpm_reset_form]`	`forgot_password.php`（メールのリンクから開いたときは`reset_password_using_link.php`）

会員登録とプロフィールのテンプレートが2種類あるのは、設定で新しいフォームの見た目と入力チェックを使うかどうかを選べるからです。

管理画面の「WP Membership」→「設定」→「詳細設定」タブにあるActivate New Form and Validation Interfaceにチェックが入っていればadd-v2.php / edit-v2.php
チェックが外れていれば、古いadd.php / edit.php

新しくプラグインを入れた場合は、最初からチェックが入っています（日本語化の状況によっては、設定名が英語のまま表示されます）。古くから使っているサイトでは外れていることがあるので、上書きする前に確認しておきましょう。この記事では、新しいほうのadd-v2.phpを前提に説明します。

方法1：CSSだけで変える

フォームの各要素には、Simple Membershipのクラス名が付いています。テーマのCSS（または「外観」→「カスタマイズ」→「追加CSS」）に、これらのクラス名でスタイルを書けば見た目を変えられます。

ログインフォーム

/* フォーム全体 */
.swpm-login-widget-form {
  max-width: 400px;
  margin: 0 auto;
}

/* 入力欄 */
.swpm-login-widget-form .swpm-text-field {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
}

/* ログインボタン */
.swpm-login-widget-form .swpm-login-form-submit {
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 6px;
  background: #1a73e8;
  color: #fff;
  cursor: pointer;
}

.swpm-login-widget-form inputにwidth: auto;がプラグインのCSSで指定されているため、入力欄を横いっぱいにしたい場合は上のようにwidth: 100%;を指定し直します。

会員登録フォーム（新しいフォーム）

/* 各行 */
.swpm-form .swpm-form-row {
  margin-bottom: 1.2rem;
}

/* 入力欄 */
.swpm-form .swpm-form-field {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
}

/* 登録ボタン */
.swpm-form .swpm-registration-submit-button {
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 6px;
  background: #1a73e8;
  color: #fff;
}

入力エラーのときは、行（.swpm-form-row）にerrorクラスが付き、エラー文は.swpm-form-descの中に表示されます。エラー時の枠の色は、テンプレートの中に!important付きで書かれているので、変えたい場合はこちらも!importantを付けて上書きしてください。

.swpm-form .swpm-form-row.error .swpm-form-field {
  border-color: #d93025 !important;
}

ヒント：ラベルの文字だけを変えたい場合は、テンプレートを上書きしなくても変えられることがあります。たとえばログインフォームの「ユーザー名またはメールアドレス」は、swpm_login_form_set_username_labelというフィルターで差し替えられます。

方法2：テーマにテンプレートを置いて上書きする

CSSだけでは足りない場合は、テンプレートを上書きします。Simple Membershipには、テーマの中に置いたテンプレートを、プラグインのものより優先して読み込む仕組みがあります。

仕組み

フォームを表示するとき、プラグインは次の順番でテンプレートを探し、最初に見つかったものを使います。

子テーマのsimple-membershipフォルダ
親テーマのsimple-membershipフォルダ
プラグイン本体のviewsフォルダ

つまり、テーマにsimple-membershipというフォルダを作り、同じ名前のファイルを置けば、プラグインのファイルの代わりにそちらが使われます。プラグインのファイルは一切書き換えないので、プラグインを更新しても上書きした内容は消えません。

手順

FTPやファイルマネージャーで、wp-content/plugins/simple-membership/views/を開きます
変更したいフォームのファイル（例：login.php、add-v2.php）をダウンロードします
使っているテーマのフォルダの中にsimple-membershipフォルダを作ります（子テーマを使っている場合は、子テーマの中に作ります）
ダウンロードしたファイルを、名前を変えずにsimple-membershipフォルダへアップロードします
アップロードしたファイルを編集します

フォルダの構成は次のようになります。

wp-content/themes/あなたのテーマ/
└── simple-membership/
    ├── login.php
    └── add-v2.php

ファイルを置いても表示が変わらない場合は、キャッシュ系のプラグインやサーバーのキャッシュを削除してから確認してください。

親テーマに直接置くと、テーマを更新したときにフォルダごと消えることがあります。配布テーマを使っている場合は、子テーマに置きましょう。

ログインフォームを書き換える例

login.phpの入力欄とボタンに、テーマのクラス名を足す例です。ここではc-input、c-buttonというクラス名を使っていますが、実際はお使いのテーマのクラス名に読み替えてください（Bootstrapを使っているテーマならform-controlやbtn btn-primaryなど）。

変更前（ユーザー名の入力欄）：

<input type="text" class="swpm-text-field swpm-username-field" id="swpm_user_name" value="" size="25" name="swpm_user_name" />

変更後：

<input type="text" class="swpm-text-field swpm-username-field c-input" id="swpm_user_name" value="" size="25" name="swpm_user_name" />

変更前（ログインボタン）：

<input type="submit" class="<?php echo esc_attr($login_submit_class); ?>" name="swpm-login" value="<?php _e('Log In', 'simple-membership') ?>"/>

変更後：

<input type="submit" class="<?php echo esc_attr($login_submit_class); ?> c-button" name="swpm-login" value="<?php _e('Log In', 'simple-membership') ?>"/>

ポイントは、もとのクラス名は残したまま、自分のクラス名を後ろに足すことです。idとnameも変えてはいけません。ログインの処理は、送信されたswpm_user_name、swpm_password、swpm-loginなどの値を読んでいるので、ここを変えるとログインできなくなります。

ログインフォームで残しておく主なものは次のとおりです。

要素	残すもの
ユーザー名の入力欄	`name="swpm_user_name"`
パスワードの入力欄	`name="swpm_password"`
ログインを保持するチェックボックス	`name="rememberme"`
ログインボタン	`name="swpm-login"`
フォームの最初のhidden	`name="swpm_login_origination_flag"`
エラー文の表示	`swpm-login-widget-action-msg`の部分（`$auth->get_message()`の出力）

エラー文の表示部分を消すと、パスワードを間違えたときに何も表示されなくなるので注意してください。

会員登録フォームを書き換える例

会員登録フォーム（add-v2.php）は、ログインフォームより注意が必要です。新しいフォームでは、入力チェック（バリデーション）をJavaScriptがクラス名で探して動かしているため、クラス名を消すと入力チェックが動かなくなったり、送信できなくなったりします。

消してはいけないもの

ソースコードの入力チェックの処理を確認すると、次のものを目印にしていました。

対象	目印	例（メールアドレスの場合）
フォーム	`id="swpm-registration-form"`	―
各行	`swpm-（項目名）-row`クラス	`swpm-email-row`
入力欄	`swpm-form-（項目名）`クラス	`swpm-form-email`
エラー文の表示場所	各行の中の`swpm-form-desc`	―
エラー時に移動する先	`swpm-form-row`と`swpm-form-field`クラス	―

項目名は、username（ユーザー名）、email、password、repass（パスワードの確認）、firstname、lastname、terms（利用規約）、pp（プライバシーポリシー）です。

また、次のhiddenの値もそのまま残してください。会員レベルの確認や、登録の処理に使われています。

level_identifier
swpm_membership_levelとswpm_level_hash（会員レベルの欄を表示するPHPの部分ごと残す）
swpm_registration_submit（登録ボタンのすぐ下にあるhidden）
action

登録ボタンの下にswpm_registration_submitのhiddenがあるのは、入力チェックが通ったあとにJavaScriptからフォームを送信しているためです。この送信方法ではボタンのnameが送られないので、hiddenで代わりに送っています。ボタンを2つに分けるなどの改造をしても、このhiddenは1つ残しておきましょう。

書き換え例

メールアドレスの行を、ラベルと入力欄が横並びになる構造に変える例です。

変更前：

<div class="swpm-form-row swpm-email-row">
    <div class="swpm-form-label-wrap swpm-form-email-label-wrap">
        <label for="email"><?php _e('Email', "simple-membership") ?></label>
    </div>
    <div class="swpm-form-input-wrap swpm-form-email-input-wrap">
        <input type="text" autocomplete="off" id="email" class="swpm-form-field swpm-form-email" value="<?php echo esc_attr($email); ?>" name="email" />
    </div>
    <div class="swpm-form-desc"></div>
</div>

変更後：

<div class="swpm-form-row swpm-email-row c-form-row">
    <label for="email" class="c-form-row__label">メールアドレス<span class="c-required">必須</span></label>
    <div class="c-form-row__body">
        <input type="email" autocomplete="email" id="email" class="swpm-form-field swpm-form-email c-input" value="<?php echo esc_attr($email); ?>" name="email" />
        <div class="swpm-form-desc"></div>
    </div>
</div>

変えたのは次の点です。

行のdivに自分のクラス（c-form-row）を足した。swpm-form-row swpm-email-rowは残している
ラベルの文字を日本語で直接書き、「必須」の表示を足した
入力欄に自分のクラス（c-input）を足し、typeをemailにした。id、name、swpm-form-field swpm-form-emailは残している
エラー文を表示するswpm-form-descを、入力欄のすぐ下に移した。行の中にあれば、位置は変えても大丈夫です

ほかの項目も、同じルールで書き換えられます。

プラグインを更新したときの注意

テーマに置いたテンプレートは、プラグインを更新しても自動では新しくなりません。プラグインの更新でテンプレートに機能追加やセキュリティの修正が入った場合も、テーマ側のファイルには反映されないということです。

プラグインを更新したら、次の手順で確認しておくと安心です。

更新後のプラグインのviewsフォルダから、上書きしているファイルを改めてダウンロードする
テーマに置いているファイルと見比べる（VS Codeの比較機能などを使うと楽です）
自分が変えた部分以外に差分があれば、テーマ側のファイルにも取り込む

このため、テンプレートの上書きは必要なファイルだけにしておくのがおすすめです。見た目だけならCSSで済ませたほうが、更新のたびの確認がいりません。

古いやり方（固定ページのテンプレート化）から乗り換える

以前この記事では、プラグインのviewsフォルダのファイルをテーマにコピーし、先頭にTemplate Name:を書いて固定ページのテンプレートにする方法を紹介していました。この方法は、今はおすすめしません。

プラグインがテンプレートに渡している値（会員レベルのIDなど）が入らないため、会員レベルが空のまま送信されるなど、会員登録が正しく動かないことがある
会員登録フォームは現在add-v2.phpが使われているため、add.phpを加工しても表示されるフォームには反映されないことがある
プラグインを更新しても、テーマ側のコピーには反映されない

すでにこの方法で作っている場合は、次の手順で乗り換えられます。

テーマに入れたlogin.php、add.php、forgot_password.phpの、自分が変更した部分を控えておく
固定ページの「テンプレート」を「デフォルトテンプレート」に戻し、本文にショートコード（[swpm_login_form]など）が入っているか確認する
最新版のプラグインからテンプレートをダウンロードし、この記事の手順でテーマのsimple-membershipフォルダに置く
控えておいた変更を、もとのクラス名・id・nameを残すルールで入れ直す
ログイン、会員登録、パスワードリセットを実際に試す（登録はテスト用のメールアドレスで）

よくある質問

Q. テーマに置いたのに、表示が変わりません

A. 次の順番で確認してください。

フォルダ名がsimple-membership、ファイル名がプラグインのviewsの中のものと同じになっているか
子テーマを使っている場合、有効になっているテーマ（子テーマ）の中に置いているか
会員登録フォームの場合、詳細設定のActivate New Form and Validation Interfaceの状態と、置いたファイル（add-v2.phpかadd.phpか）が合っているか
キャッシュを削除したか

Q. 書き換えたら会員登録ができなくなりました

A. 「消してはいけないもの」の表にあるクラス名とhiddenの値が残っているかを確認してください。ブラウザの開発者ツールの「Console」タブにエラーが出ていないかも見てみましょう。原因が分からない場合は、プラグインのもとのファイルに戻して動くことを確認してから、少しずつ変更を入れ直すのが近道です。

Q. 会員登録の入力項目そのものを増やしたいです

A. テンプレートに入力欄を足しても、その値は保存されません。項目を増やしたい場合は、Simple Membershipの有料アドオン（Form Builderなど）を使うか、フックを使って保存の処理を自分で書く必要があります。

まとめ

見た目の調整だけなら、Simple Membershipのクラス名にCSSを当てるのがいちばん手軽
構造を変えたいときは、テーマにsimple-membershipフォルダを作り、プラグインのviewsから同じ名前のファイルをコピーして編集する
書き換えるときは、もとのクラス名・id・name・hiddenの値を残し、自分のクラスを足す
会員登録フォーム（add-v2.php）は、JavaScriptの入力チェックがクラス名に依存しているので特に注意
プラグインを更新したら、上書きしたファイルとの差分を確認する