WordPressのログインページをカスタマイズする方法

公開: 2022-01-02

WordPress用にカスタマイズされたログインページが必要なのはなぜですか？

WordPressには、独自のロゴを追加したり、サイトのカスタムテーマやブランドに合わせて全体的なルックアンドフィールを変更したりするための組み込みオプションがないため、ユーザーはデフォルトのWordPressログイン画面を使用して登録およびログインします。

これは小さなウェブサイトではうまくいくかもしれません。ただし、ビジネスWebサイトや忙しいオンラインコミュニティを運営している場合は、WordPressの代わりに独自のブランドを表示することをお勧めします。

これがあなたが通り抜けることができる2つの方法です：

ご不明な点がございましたら、米国の人気のあるWordPress DevelopmentCompanyの専門家にお問い合わせください。

以下の解決策を読み続けましょう！

1.既存のWordPressレイアウトを使用します。

既存のものをカスタマイズするのは実際には静かで簡単です。
ロゴを変更するだけの場合、または完全に異なるレイアウトを指定する場合は、login_enqueue_scriptsアクションから開始します。
ここで、通常の単純なCSSを出力するか、CSSの完全なファイルへのリンクを提供するかを決定できます。使用したい任意のJavaScriptをキューに入れることもできます。
function.phpで

add_action（ 'login_head'、 'my_custom_login'）;
関数my_custom_login（）{
echo '<link rel = "stylesheet" type = "text / css" href = "'。get_bloginfo（ 'stylesheet_directory'）。 '/ your_login_styles.css" />';}

your_login_styles.cssは、ログインページをカスタマイズするために作成されるcssファイルの名前です。
ここでは注意が必要です。基本スタイルを上書きするために、非常に特殊なセレクターを使用していることを確認してください。
デフォルトでは、ロゴは誰でもアドレスwordpress.orgにリンクします。これは、functions.phpファイルの以下のコードを使用してサイトのURLに変更できます。

 add_filter（ 'login_headerurl'、 'my_login_logo_url'）;
関数my_login_logo_url（）{
get_bloginfo（ 'url'）;を返します。
}
add_filter（ 'login_headertitle'、 'my_login_logo_url_title'）;
関数my_login_logo_url_title（）{
return 'あなたのサイト名と情報';}

エラーメッセージを変更する最も便利な方法は、functions.phpの次のコードを使用することです。

 add_filter（ 'login_errors'、 'login_error_override'）;
関数login_error_override（）
{{
'不正なログインの詳細を返します。';
}

関連：WordPressとAdobe Business Catalyst：開発に最適なCMSはどれですか？

2.新しいレイアウトを作成します。

手始めに、ログインページのカスタムページテンプレートを作成します。
そのために、新しいページテンプレートを作成し、それに名前を付けることを選択できます。例：page-login.php。
その後、WP管理者から新しいページを作成します。ログインするパーマリンクを設定します。したがって、WordPressはデフォルトでこのページのpage-login.phpテンプレートを使用します。
ログインフォームを表示するために、page-login.phpページテンプレートにwp_login_formタグを保持します

オンラインで成長したい企業に新鮮で創造的なデジタルサービスを提供するグローバルな情報技術ソリューションエージェンシー。結果に焦点を当て、当社の技術スキルと業界の洞察を使用して、デジタル目標の達成を支援します。それがインタラクティブなウェブデザインであなたのバウンス率を下げるか、あなたのウェブサイトに真新しいトラフィックと収入の流れをもたらすかどうか。開始するには、プロジェクトについて<ahref =” www.elsner.com/contact-us”>お問い合わせ</a>してください…

  </ p>
</ div>
<div class = "login-form">
<？php
$ args = array（
'リダイレクト' => home_url（）、
'id_username' => 'user'、
'id_password' => 'pass'、
）;
？>
<？php wp_login_form（$ args）; ？>
</ div>

個人的な要件に応じたCSSを作成できます。ログインページはすでに機能しています。
ログインを試みることができます。成功すると、上記のリダイレクトパラメータで指定されたアドレスがリダイレクトされます。ただし、対処すべきことがあります。

 add_action（ 'init'、 'redirect_login_page'）; 

function redirect_login_page（）{
$ login_page = home_url（ '/ login /'）;
$ page_viewed = basename（$ _ SERVER ['REQUEST_URI']）;
if（$ page_viewed == "wp-login.php" && $ _SERVER ['REQUEST_METHOD'] == 'GET'）
{{
    wp_redirect（$ login_page）;
    出口;
}
}

–ログイン後、ログインページが期待どおりに機能する場合があります。無効なIDとパスワードの組み合わせを送信したり、空のスペースを送信したりするなどのエラーが発生した場合、wp-login.phpにリダイレクトされます。この問題を解決するために、functions.phpに次の関数を追加できます。

 add_action（ 'wp_login_failed'、 'login_failed'）;

function login_failed（）{
$ login_page = home_url（ '/ login /'）;
wp_redirect（$ login_page。 '？login = failed'）;
出口;
}

 add_filter（ 'authenticate'、 'verify_username_password'、1、3）;

function verify_username_password（$ user、$ username、$ password）{
$ login_page = home_url（ '/ login /'）;
if（$ username == "" || $ password == ""）{
wp_redirect（$ login_page。 "？login = empty"）;
出口;
}
}

–最後の問題は、サイトからログアウトすると、wp-login.phpにもリダイレクトされることです。したがって、ログアウト時にリダイレクトURLも指定する必要があります。

 add_action（ 'wp_logout'、 'logout_page'）;
function logout_page（）{
$ login_page = home_url（ '/ login /'）;
wp_redirect（$ login_page。 "？login = false"）;
出口;
}

紛失したパスワードリンク、登録リンク、さらにはパーソナライズされたエラーメッセージの追加など、ログインページを改善するために実行できることがいくつかあります。ただし、この時点で、ユーザーがログインおよびログアウトできるようになりました。より高度なログインページを作成することは素晴らしいスタートかもしれません。

そうそう！それだ。
いくつかの簡単な調整で、ログインページを非常に快適にパーソナライズして、サイトの外観と雰囲気に合わせることができます。

多くのテーマデザイナーは、特にWordPressテーマの設定から外れている場合は、ログインページが不要であると見なすため、ログインページのスタイル設定を控えています。

ただし、スタイル、そして重要なこととしてブランドを無視してクライアントサイトを作成する場合、ログインページは、カスタムテーマが設定されている場合に、ユーザーエクスペリエンスを損なう可能性のある機会を失う可能性があります。

あなたのサイトをブランド化するもう一つの機会は、あなたのユーザーの心に長く続く印象を残します。