カスタムWordPressログインページを作成する方法

ログインページはWordPressサイトの中で最も重要なページであると主張する人もいるかもしれません。 ログインする機能がなければ、ブログの所有者は他にどのようにして優れたコンテンツを公開できますか？ コンテンツの作成に加えて、これはさまざまなWordPress構成オプションへの道でもあります。

デフォルトのログインページは非常にシンプルで、その目的を非常にうまく果たします。 ユーザーがWordPressのクレデンシャルを入力するために必要なフィールドがあり、ページは管理画面へのアクセスを制御し、登録されたユーザーのみがログインできるようにします。

デザイナーとして、あなたはおそらく何時間もかけて完璧なウェブサイトのデザインを作成してきました。 すべてのユーザーがログインページを操作するわけではない場合でも、ユーザーエクスペリエンス全体を通してそのデザインを実行することが重要です。 これは、その詳細を追加するもう1つの機会であり、定期的にサイトにログインするユーザーに好印象を残します。 （さらに、ページを少しわかりにくいURLに移動することは、WordPressのセキュリティのベストプラクティスと見なされます！）通常、WordPressテーマの設定の一部ではありませんが、WordPressのログインページをカスタマイズするのは非常に簡単です。

WordPressのログインページにアクセスする方法

サイトの責任に何が含まれていても、おそらくこのページへのアクセスに精通しているでしょう。 ただし、しばらく経った場合に備えて、通常はWebサイトのルートディレクトリにあります。 ログインページは通常、 www.mysite.com/wp-login.phpのようなものです。 ご覧のとおり、これはまだスタイリングされていません。

場合によっては、独自のサブディレクトリにWordPressがインストールされていることがあります。 その場合、 www.mysite.com/directory-name/wp-login.phpのようになります。

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

次の手順では、CSSをスタイリングの目的で使用します。 また、カスタムページを実現するために、 functions.phpファイルにテーマ固有のコードが追加されます。

ほとんどのチュートリアルと同様に、最初にテスト環境でこれを試してみてください。 優れたテスト環境ツールを探している場合は、Localに精通する必要があります。 公開する前に、サイトで新しいことを効率的にテストできます。

このチュートリアルでは、 functions.phpファイルに変更を加えて、変更がどのように機能するかを確認できるようにします。 ただし、これらの概念を使用してプラグインを作成し、 functions.phpファイルではなくそこに潜在的な変更を追加するオプションもあります。 このチュートリアルでは、ログインページのデザイン変更は非常にテーマ固有であるため、プラグインを作成する代わりにテーマに追加することにしました。

カスタマイズ用の新しいフォルダを作成します

テーマにカスタマイズを追加するときは、整理することが重要です。 これらの変更専用の新しいフォルダを作成することをお勧めします。 これを行うには、現在アクティブなテーマを見つけて、「ログイン」というフォルダを作成します。

次に、カスタムログインスタイルを参照するためのCSSファイルが必要です。 新しいログインフォルダに、空のCSSファイルを作成し、覚えやすい名前を付けます。 この場合、 login-styles.cssです。

このスタイルシートはどのように接続されますか？ テーマのfunctions.phpファイルで参照する必要があります。 functions.phpファイルを開き、次のスニペットを貼り付けます（ login-styles.cssとは異なる名前を使用した場合は、CSSファイルの独自の名前を必ず含めてください）。

function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . 'login/login-styles.css" />';
}
add_action('login_head', 'custom_login');


ロゴを変更する
これはかなり簡単に変更でき、ブランディングの改善に大きな影響を与えます。 ブラウザインスペクタツールは、ページの構造を決定するのに非常に役立ちます。 この例では、Chromeデベロッパーツールを使用しました。 WordPressのロゴを独自のものに変更するには、この見出しに関連付けられているCSSスタイルを変更する必要があります。
		


<h1><a href="http://wordpress.org/" title="Powered by WordPress">Your Site Name</a></h1>


		


CSSを固有にしたいので、 .loginのクラスでdivをターゲットにすると、そのdiv内の見出しとリンクのスタイルを設定できます。

整理するために、別の画像フォルダを作成しました。 これはオプションであり、必要に応じて別の場所にあるファイルを参照できます。 使用する画像のファイルパスが正しいことを確認してください。
.login h1 a {
  background-image: url('images/login-logo.png');
}



これは、デフォルトのスタイルで指定された84pxの高さを使用して行いました。 大きくしたり小さくしたりする場合は、このCSSスタイルシートで指定できます。 さまざまなマージンとパディングを指定する機会もあります。
		



元のロゴを交換できないのはなぜですか？ その理由は、WordPressが更新されると、それが消去される可能性があるためです。
このシンプルなスタイルで、一般的なWordPressロゴに別れを告げることができます。 このロゴの交換により、より個人的でブランド感が増します。

カスタム背景のスタイリング
背景は、単色、パターン、または画像ベースのものである可能性があります。 この例では、背景に白黒の抽象的な「技術的な」写真を追加します。

ブラウザ開発ツールを使用して、構造を調べることができます。 調べると、ボディの背景スタイルが設定されていることがわかります。 物事はかなり一般的であるため、物事をより具体的にすることで、不要なグローバルな変更を行わないようにすることができます。 .loginと呼ばれる本体に適用されるクラスがあり、これは非常に役立ちます（これは、セレクターの一部であるため、上記の例のロゴに使用したものです）。
		



body.login {
  background-image: url('images/example-image.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}


画像が表示されない場合（私が認めたい以上に、これが数回発生したことがあります）、画像へのパスが正しいことを再確認してください。

ここで物事が形になり始めています。 これらの小さな変更だけでも、ログインページは、デフォルトよりもはるかにブランド化され、興味深いものに見えます。
		


ロゴリンクの調整
これは確かに目を見張るものではありませんが、ログインページに独自のロゴがあるので、実際のWebサイトにリンクする必要があります。 現在、 wordpress.orgにアクセスしています。 wordpress.orgは人気があり便利な場所なので、それはすべて問題ありませんが、私の意見では、そのためのブラウザブックマークを用意するだけで十分です。 プロジェクトサイトにすばやくアクセスできる方が便利なように思われるため、ログインページの一部である必要はありません。
ロゴがWordPressサイトにリンクするようにリンク値を変更するには、次の関数を使用します（そして、独自のWebサイトのURLを挿入することを忘れないでください）。
		


function login_logo_url() {
    return 'https://www.mysite.com';
}
add_filter('login_headerurl', 'login_logo_url');


フィルタがどこから来たのか疑問に思っている場合は、 login_headerurlとlogin_headertitleを見つけるために関数リファレンスを調べる必要がありました。
これで、リンクは正しい場所に移動しますが、タイトルテキストはどうでしょうか。 ロゴにカーソルを合わせると、タイトルタグとして「PoweredbyWordPress」が表示されます。 これは絶対に問題ありませんが、リンクがどこに行くのかを完全に説明しているわけではありません。 これは非常に迅速で簡単に修正できるため、時間をかける価値があります。 より正確なタイトルを得るには、この単純な関数を追加します。
function login_logo_text() {
    return 'The Title';
}
add_filter('login_headertitle', 'login_logo_text');


その他のスタイリングオプション
CSSに夢中になって、ここで行ったことを拡張してください。 WordPressログインページのすべてのHTML要素をCSSでスタイル設定できます。 上記の例は、表面を引っかいただけです。 ボタン、リンク、フォームの背景はすべてカスタマイズできます。 また、タイポグラフィもカスタマイズできるので、忘れないでください。

フォームスタイルを開発した場合、それらのスタイルをログインページに引き継ぐことはシームレスな体験になります。 ボタンについても同じことが言えます。 これにより、一貫性のあるエクスペリエンスが実現し、実際のサイトで使用されているものとはまったく異なるボタンを使用することでユーザーを失望させることはありません。 Webスタイルガイドを作成した場合、これは、ログインページに一貫したデザインを適用する方法を決定するのに非常に役立ちます。
また、CSSが気に入らない場合は、カスタムのWordPressログインページを作成するのに役立つ既存のWordPressプラグインがあります。 チェックする価値のあるいくつかのオプションがあります：

テーママイログイン
カスタムログイン
カスタムログインページカスタマイザ

ログインページは忘れられがちですが、このページの可能性を知ることで、簡単にデザインプロセスの一部になることができます。 いくつかの簡単な変更を加えるだけで、WordPressのログインページをサイトのルックアンドフィールに合わせて簡単にパーソナライズできます。