Simple WordPress Membership ログインページなどのデザインをカスタムする方法

Simple WordPress Membershipのログインページや会員登録ページなどのデザインを変更したい方法はあるのか 結論 ある

こんにちは。

今日はWordpressの会員登録機能でよく使われているSimple WordPress Membershipと言うプラグインについて、自分の経験を元に、あまり情報が乗っていなかったログインページなどのデザインの変更方法について書いていきたいと思います。

プラグインのインストールや有効化までの手順については割愛させていただきます。

正解は色々あるかと思いますが、あくまで自分はこうやったらできたよーってことでご参考程度にみていただければ幸いです。

編集するファイルはどこにあるのか

早速ですが、まずはログインページを初め、会員登録をする際に、いろんな情報などを入力するページや、パスワード忘れちゃった時に遷移するページなど、主要なページ様々あります。

その辺のデザインのカスタム方法について書いていきたいと思うのですが、どのファイルを編集すればいいのやら。

と言うことで、まずはFileZillaなどのFTPソフトにて、themesと言うディレクトリと同じ階層にあるpluginsと言うディレクトリを開くとsimple-membershipと言うディレクトリがあるのですが、言わずもがなそちらがSimple WordPress Membershipのプラグインディレクトリになります。

そちらを開いていただくとviewsと言うディレクトリがあるので、

その中に、フロント側のphpファイルがたくさん入っています。

こんな感じで。。

んで、今回、自分がいじったのはログインフォームとなるlogin.phpと言うファイルと会員登録ページとなるadd.php、さらにはパスワード忘れた方はこちら、でお馴染みのforgot_password.phpになります。

ファイルを固定ページ化する

さあここからが本題です。

こちらのファイルを一旦pc上にダウンロードしていただき、現在作成中のテーマ内にアップロードします。

余談ですが、以前Lightningの子テーマを使用した時は、テーマディレクトリにアップロードはぜず、直接プラグインのディレクトリ内での編集で行けたのですが今回はオリジナルテーマだったのでそれではうまく実装できませんでした。。

かつ、テーマ内にアップロードするだけでもダメでしたので、この後、自分がやったのはこれらのファイル自体を固定ページのテンプレート化してしまうと言うことでした。

例えばログインページをカスタマイズしたければ、add.phpファイルの頭に

<?php

/*
Template Name: join
*/

?>

こんな感じでテンプレートネームをつけていただき、固定ページ化しちゃいます。

そうすれば、ファイル自体にURLが付与されますので、あとは元々兼ね備えたログインや登録機能を失わず、どうカスタムしていくかと言うことになります。

デザインをカスタマイズするには

このファイルのデザインをカスタムするのは意外と簡単でした。

結論から言うと、cssファイルのスタイルに沿ってclass名などを当てていくとinput機能はそのままにデザインだけ変更されました。

で、実際どうやったかって言うと、、

まず最初はこんな感じでわちゃわちゃしたコードが並べられています。

安心してください。

僕も訳がわかりません。

大事なのは

<form id=”swpm-registration-form” class=”swpm-validate-form” name=”swpm-registration-form” method=”post” action=””>

まずは最初のformタグのid=”swpm-registration-form”とname=”swpm-registration-form”の部分と、

ユーザー名やパスワードの各タグに割り当てられたlabelの部分の

<label for=”user_name”>

この部分や

<label for=”password” class=”pull-left”>

この辺りですかね。

これが各inputタグの、passwordで言うと

<input type=”password” autocomplete=”off” id=”password” class=”form-control input-lg” value=”” size=”50″ name=”password”/>

ここのidやnameに紐付いてるので、ここさえしっかり残しておけば、class名を好きなだけ付与しても、うまく実装されます。

参考までに、実際に編集したファイルがこちらになります。

このように編集することで、デザインを変更したままうまく実装できました。

ただ、いらないかなと思っていたテーブルタグなど消してしまうと、いきなり動かなくなったり、エラーが出たりしたので、初心者は最低限の編集でそれ以上は下手に触らない方が吉です。

まとめ

  • 編集するファイルはviewディレクトリ内のlogin.php、add.php、forgot_password.php
  • login.php、add.php、forgot_password.phpをダウンロードしテーマ内にアップロード、その後テンプレート化
  • デフォルトタグ内のidやnameでしっかり紐付けておけば、どんだけタグを変更し、classを付与してデザインを変えても実装される
  • タグの余計な削除はしない

お役に立てれば幸いです。

最後までご覧いただき、ありがとうございました。