Movable Type

ホーム » Movable Type » A-Member » A-Memberドキュメント » ログイン関連画面のデザインカスタマイズ

ログイン関連画面のデザインカスタマイズ

ログイン関連では、次の4画面があります。

初期状態では、これらの画面のデザインはまったくされていない状態となっていますので、これらの画面に、お使いのサイトにあわせたデザインを適用していただく必要があります。

auth.cgiのパスを取得する方法

ログイン画面のデザイン適用

会員限定ページの設定をし、会員限定ページに未ログインの状態でアクセスしようとするとログイン画面に遷移します。

ログイン画面のURLは「システム」 > 「ツール」 > 「プラグイン」 > 「A-Member-X.X」で設定した「auth.cgiのパス」によって決定されます。

ログイン画面のテンプレートファイルは、

plugins/AMember/tmpl/login.tmpl

です。

MTMLが記述できるMTテンプレートになっていますので、自由にデザインをしてください。

なお、下記の記述は、パスワード通知の後にログイン画面に遷移した時のみ表示される文章ですので、この部分は残しておいてください。

login.tmplは、

plugins/AMember/tmpl/include/amember_header.tmpl

をインクルードしています。

A-Memberでは、ログイン画面以外に、

などのデザインをカスタマイズする必要があります。
これらには通常はサイト共通のヘッダを適用することが多いと思います。
各種画面はすべて、上記のamember_header.tmplを読み込むように記述されていますので、amember_header.tmplから、サイト共通のテンプレートを更にIncludeするようにすると管理がしやすいでしょう。

すでにログインしています画面

ログインをした状態で、再度ログイン画面のURL(auth.cgiのパスで指定したもの)を直打ちしてアクセスすると、「すでにログインしています」という画面が表示されます。

この画面のテンプレートは

plugins/AMember/tmpl/already_login.tmpl

ですので、この画面もあわせてデザインを適用してください。

ログアウトボタンの設置,ログアウトしました画面

ログインしたユーザーに向けてログアウトリンクを設定しましょう。
ログアウトのURLは次のようになります。

【auth.cgiのURL】?action=logout

このURLに<a>タグでリンクを張ってください。
ログイン中の場合のみリンクを表示する方法については ドキュメント「ログイン中の会員情報の取得」ページ を参照してください。

ログアウト用URLにアクセスすると、「ログアウトしました」と表示される画面が表示されます。
この画面のテンプレートは

plugins/AMember/tmpl/logout.tmpl

になりますので、この画面もあわせてデザインを適用してください。

パスワード再発行画面

パスワード再発行画面のURLは次のようになります。

【auth.cgiのURL】?action=forget_password

ログイン画面のテンプレート内にはパスワード通知画面へのリンクが最初から貼ってありますので参考にしてください。

パスワード再発行用URLにアクセスすると、メールアドレス入力欄がある画面が表示されます。

この画面のテンプレートは

plugins/AMember/tmpl/forget_password.tmpl 

ですので、この画面もあわせてデザインを適用してください。

メールアドレス欄に、ユーザー登録時に入力したメールアドレスを入力して送信すると、そのメールアドレス宛にメールが送信されます。

このメール本文のテンプレートは

plugins/AMember/tmpl/forget_password.tmpl

ですので、このテンプレートもご希望にあわせて修正してください。

ログイン関連画面のデザインカスタマイズ についてのお問い合わせはこちら

お問い合わせ


フォーム作成プラグイン A-Form

予約サイト構築プラグイン A-Reserve

アークウェブのMovable Typeブログ

→アークウェブのMovable Typeブログ

MTによるサイト構築はこちら

アークウェブはシックス・アパート ProNet Japanのメンバーです。
Movable Typeなどシックス・アパート製品のシステム導入や構築を手がけるパートナー企業のネットワークに参加しています。



サービスおよびソリューション一覧

最新情報・投稿をチェック


このページのトップに戻る

Photo by ....

Powered by Movable Type Pro