カスタム 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ファイルではなくプラグインに潜在的な変更を追加するオプションもあります。 このチュートリアルでは、ログイン ページのデザインの変更は非常にテーマ固有であるため、プラグインを作成する代わりにテーマに追加することにしました。

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

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

次に、カスタム ログイン スタイルを参照するための 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 Developer Tools が使用されました。 WordPress ロゴを独自のものに変更するには、この見出しに関連付けられている CSS スタイルを変更する必要があります。

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

.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を見つける必要がありました。

これで、リンクは正しい場所に移動しますが、タイトル テキストはどうでしょうか。 ロゴにカーソルを合わせると、「Powered by WordPress」というタイトルタグが表示されます。 これはまったく問題ありませんが、リンク先を完全に説明しているわけではありません。 これは非常に迅速かつ簡単に修正できるため、余分な時間を費やす価値があります。 より正確なタイトルを得るには、この単純な関数を追加します。

 function login_logo_text() { return 'The Title'; } add_filter('login_headertitle', 'login_logo_text');

その他のスタイリング オプション

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

フォーム スタイルを開発した場合は、それらのスタイルをログイン ページにシームレスに適用できます。 ボタンも同様です。 これにより、一貫したエクスペリエンスが実現し、実際のサイトで使用されているものとはまったく異なるボタンを使用することでユーザーが離れることはありません. Web スタイル ガイドを作成した場合、これは、ログイン ページに一貫したデザインを適用する方法を決定するのに非常に役立ちます。

また、CSS が気に入らない場合は、カスタムの WordPress ログイン ページを作成するのに役立つ既存の WordPress プラグインがあります。 チェックアウトする価値のあるいくつかのオプションを次に示します。

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

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