WordPressカスタムログインページの作り方（アルティメットガイド） 2024

初期設定のWordPressログインページは問題なく機能しますが、あなたのブランドを十分に表現しているとは言えません。より魅力的な体験を作るには、このページであなたのブランドとビジネスをアピールすることが重要です。

カスタマイザーによるログインページのデザインは、ユーザーが頻繁にログインページを操作する会員制サイトやオンラインショップでは特にインパクトがあります。

WPBeginnerでは、無料のWordPress動画トレーニングサイトにカスタムログインページを導入しました。これにより、ユーザーエクスペリエンスを向上させながら、ブランドをより目立たせることができました。

このガイドでは、カスタマイザーのWordPressログインページを作成する方法をご紹介します。複数の方法を紹介しますので、あなたのビジネスのニーズに合った方法を選んでください。

このガイドで学べることは以下の通りだ：

カスタマイザーでログインページを作成する理由

WordPressサイトには強力なユーザー管理システムが搭載されています。eコマースストア、会員制サイト、ブログでユーザーがアカウントを作成することができます。

初期設定では、ログインページにはWordPressのブランドとロゴが表示されます。あなたが管理者権限を持つ唯一の人であるか、ユーザーが非常に少ない場合は、これでよいでしょう。

しかし、もしあなたのサイトがユーザー登録とログインを許可しているのであれば、カスタムログインページはより良いユーザーエクスペリエンスを提供します。

WordPressのログイン画面があなたのサイトと似ても似つかない場合、ユーザーによっては不審に思うかもしれません。あなたのビジネスのロゴやデザインを使用すれば、よりくつろいでもらえるでしょう。

最後に、初期設定のログイン画面にはログインフォームしかありません。カスタムログインページを作成することで、他のページや特別オファーを宣伝するためにスペースを使用することができます。

そのため、ユーザーがログインフォームとやり取りする必要があるすべてのサイトで、カスタマイザーログインページを使用しています。

例えば、これはWPBeginnerトレーニング動画サイトで使用しているカスタムログインページです。

ということで、カスタマイザーのログインページデザインの例をもう少し見てみましょう。

WordPress ログインページデザイン例

サイトオーナーは、さまざまなスタイルやテクニックを使ってWordPressのログインページをカスタマイズすることができます。

サイトのテーマやカラーを使用したカスタムログインページを作成する人もいます。また、カスタムの背景、色、ロゴを追加して初期設定のログインページを変更する人もいます。

可能性の例をいくつか紹介しよう。

WPForms

WPFormsは市場で最高のWordPressお問い合わせフォームプラグインです。彼らのプラグインには、WordPressの美しいログインフォームや登録フォームを作成するアドオンも含まれています。

カスタマイザーのログインページは2カラムレイアウトを採用している。左カラムにはログインフォームがあり、右カラムはプロモーションやその他の行動喚起を強調するために使用されます。

上のログインページでは、ユーザーに新機能を知らせている。カスタマイザー、背景イラスト、ブランドカラーを使用し、ユニークなログイン体験を作り出している。

ジャクリーン・スティーブス

Jacquelynne Steevesは、投稿者が家の装飾、キルト作り、パターン、刺繍などのコンテンツを公開しているアートとクラフトのサイト。

ログインページはサイトのテーマに一致したカスタマイザーの背景画像を使用し、ログインフォームは右側にある。

教会のモーション・グラフィックス

このモーショングラフィックデザイン会社のログインページは、そのビジネスを反映したカラフルな背景を持つ。

ログイン画面では、同じサイトのヘッダー、フッター、ナビゲーションメニューを使用しています。ログインフォーム自体はとてもシンプルで、背景も明るい。

MITSloanマネジメントレビュー

MITSloan Management Reviewでは、ポップアップモーダルを使用してログインと登録フォームを表示します。

ポップアップの利点は、ユーザーがページを離れることなくログインできることです。ページを新たに読み込む手間が省け、より速いユーザー体験を提供します。

さて、WordPressでカスタムログインページを作成する方法を学ぶ準備はできましたか？

Theme My Login（無料）を使ってWordPressのログインページを作る

Theme My Loginは、ログインページをWordPressテーマと一致するように変更する無料のプラグインです。あまりカスタマイズはできませんが、初期設定のWordPressブランドのログインページを置き換え、よりプロフェッショナルに見せることができます。

最初に行う必要があるのは、Theme My Loginプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したテーママイログインは、カスタマイログイン、ログアウト、登録、パスワード忘れ、パスワードリセットのためのURLを自動的に作成します。

Theme My Login ” Generalページにアクセスして、WordPressのログインURLをカスタマイズすることができます。ログインアクションにプラグインが使用するURLを変更するには、「スラッグ」セクションまでスクロールダウンしてください。

Theme My Loginでは、ショートコードを使ってカスタムのログインページや登録ページを作成することもできます。プラグインがユーザーを見つけて適切にリダイレクトできるように、それぞれのアクションのページを作成し、ここにページのスラッグを追加するだけです。

ログインページから始めよう。

ページ ” 新規追加でWordPressの新規ページを作成します。次に、ページにタイトルを付け、次のショートコード [theme-my-login]を入力します。

ページを公開してプレビューし、カスタムログインページの動作を確認することができます。

WordPressのテストサイトではこのように表示されます。

以下のショートコードを使用して、他のページを作成するプロセスを繰り返します：

[theme-my-login action="register"]登録フォームの場合

[theme-my-login action="lostpassword"]パスワード紛失ページ用

[theme-my-login action="resetpass"]パスワード再設定ページ用

WPFormsを使ったWordPressカスタムログインページの作成

WPFormsは市場で最高のWordPressフォームビルダープラグインです。あなたのサイトのためのカスタムログインと登録フォームを簡単に作成することができます。

WPFormsはWordPressのプレミアムプラグインで、ユーザー登録アドオンを利用するには少なくともプロプランが必要です。WPBeginnerユーザーはWPFormsのクーポンコードを使用することで50%の割引を受けることができます：SAVE50

最初に行う必要があるのは、WPFormsプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化した後、WPForms ” 設定ページにアクセスしてライセンスキーを入力する必要があります。この情報はWPFormsサイト上のアカウントにあります。

ライセンスキーを入力すると、アドオンのインストールが可能になる。

WPForms ” Addonsページにアクセスし、ユーザー登録アドオンを探してください。

次に、「アドオンのインストール」ボタンをクリックしてアドオンをダウンロードし、有効化します。これでカスタムログインフォームを作成する準備ができました。

WPForms ” 新規追加ページに移動します。フォームの ‘テンプレートの選択’ を求められます。ユーザーログインフォーム’ テンプレートを探し、’テンプレートを使う’ ボタンをクリックして次に進みます。

WPFormsは必須フィールドを含むユーザーログインフォームを読み込みます。

フィールドをクリックして、説明やテキストを追加することができます。

その他の設定も変更できる。

例えば、初期設定のボタンタイトルは「送信」です。ボタンをクリックして、テキストを’ログイン’に変更することができます。

また、ユーザーがログイン中に何が起こるかを決めることもできます。

設定 ” 確認タブに移動し、アクションを選択する必要があります。ユーザーを他のURLにリダイレクトさせたり、ホームページにリダイレクトさせたり、単にログイン中であるというメッセージを表示させたりすることができます。

フォームの設定に満足したら、画面右上の「保存」ボタンをクリックし、フォームビルダーを閉じます。

WordPressページにカスタムログインフォームを追加する

WPFormsを使えばWordPressの投稿日やページにカスタマイザーのログインフォームを簡単に追加することができます。

ログインフォームを追加したいページを編集するか、新規作成するだけです。そしてページ編集画面でWPFormsブロックをコンテンツエリアに追加します。

次に、先ほど作成したログインフォームを選択すると、WPFormsブロックが自動的にコンテンツエリア内に読み込まれます。

これでログインフォームページの編集を続けることができます。テキストやプロモーションブロックを自由に追加してください。編集が終わったら、変更を保存して公開することを忘れないでください。

あなたのサイトにアクセスして、ログインページを実際に見ることができます。

SeedProdを使用したWordPressカスタムログインページの作成（推奨）

デフォルト設定では、カスタマイザーのログインフォームページはテーマのページテンプレートとスタイルを使用します。テーマのナビゲーションメニュー、ヘッダー、フッター、サイドバーウィジェットを持ちます。

ページ全体を完全に引き継ぎ、ゼロから何かをデザインしたい場合は、WordPressのページビルダー・プラグインを使うことができる。

SeedProdはWordPressのための最高のランディングページビルダーです。初心者に優しく、ドラッグ＆ドロップのビルダーで、ログインページ、近日公開ページ、メンテナンスモードページなど、あらゆるタイプのランディングページを作成できます。

この投稿では、ログインページテンプレートとカスタマイザーのための高度なページブロックが含まれているため、SeedProd Proバージョンを使用します。

SeedProdには無料版もありますが、WordPressサイトのログインページを作成するオプションは含まれていません。

まず、あなたのサイトにSeedProdプラグインをインストールする必要があります。詳しくは、WordPressプラグインのインストール方法をご覧ください。

プラグインが有効化されると、WordPress管理エリアのSeedProdにリダイレクトされます。

ここでは、SeedProdアカウントから簡単に取得できるライセンスキーを入力する必要があります。キーを入力したら、’Verify key’ボタンをクリックしてください。

これでSeedProdにログインページを作成する準備ができました。

まず、SeedProd ” ランディングページに向かい、「ログインページを設定する」ボタンをクリックして「ログインページ」オプションを選択します。

次の画面では、ログインページのテンプレートを選択できます。Blank Templateを使って一からページを作成することもできます。

しかし、ログインページのカスタマイゼーションがより簡単かつ迅速に行えるため、テンプレートを使用することをお勧めします。

テンプレートを選択すると、ログインページのページ名を入力するポップアップウィンドウが表示されます。SeedProdはこのページ名をランディングページのURLとして使用します。

これらの情報を入力したら、「保存してページの編集を開始する」ボタンをクリックしてください。

デザインタブにあるSeedProdのドラッグ＆ドロップビルダーを使ってログインページを編集できるようになりました。このビルダーを使用すると、左メニューからドラッグしてページ上の任意の場所に配置するだけで、任意のページブロックを簡単にページに追加することができます。

例えば、ログインページにテキストや動画、新しいボタンを追加することができます。高度なブロックセクションには、カウントダウンタイマーやソーシャルシェアリングアイコンなどを追加できる、より多くのカスタマイズ設定があります。

SeedProdでは、テンプレート内の既存のページブロックを削除することもできます。すべてゴミ箱内のアイコンをクリックしてページブロックを削除するだけです。

次に、ログインページの任意のセクションをクリックすると、カスタマイズのためのオプションが表示されます。

例えば、フィールドのテキストや色の変更、異なるフォントの選択、ボタンの色の編集などが可能です。

ログインページのデザインに満足したら、上部にある「Connect」タブをクリックする。

Constant Contactや Dripなど、さまざまなメールマーケティングサービスと連携できるようになりました。

その後、ページ設定タブに移動する必要があります。一般設定の下で、SeedProdはページタイトルを編集し、ページの状態を下書きから公開するように変更することができます。

また、SeedProdリンクを使用するオプションを選択し、オンラインでより多くのお金を稼ぐためにSeedProdアフィリエイトリンクを追加することができます。

ログインページを検索エンジンに最適化したい場合は、SEO設定に進んでください。ここに、All In One SEOプラグインをインストールするボタンがあります。

All In One SEO for WordPress(AIOSEO)は、検索エンジンとソーシャルメディアプラットフォームのためにWordPressサイトを最適化することができる最高のWordPress SEOプラグインです。

All In One SEO for WordPressを正しく設定する方法については、こちらのガイドをご覧ください。

その後、スクリプト設定タブでログインページにさまざまなコードスニペットを追加することもできます。

例えば、GoogleアナリティクスのコードやFacebookピクセル、その他のトラッキングコードをここに追加することができます。

ページ設定を変更したら、上部にある「保存」ボタンをクリックしてください。

次に、ログインページを有効化する必要があります。そのためには、ランディングページビルダーを終了し、SeedProd ” ランディングページに移動します。

そこでスイッチをクリックし、ページの状態を「非活性化」から「有効化」に変更する。

ログインページのURLにアクセスし、その動作を確認することができる。

これはデモサイトのログイン画面のスクリーンショットです。

別の方法 Thrive Architectを使って魅力的なログインページをデザインすることもできます。Thrive Architectもカスタムページを作成するのにおすすめのドラッグアンドドロップページビルダープラグインです。

300以上のプロがデザインしたテンプレートが含まれており、以下のようなログインページを作ることができます。

WordPressページビルダープラグインがお好みでない場合は、カスタムCSSを使用してフォームとログインページ自体のスタイルを設定することができます。

WordPressのログインロゴとURLを変更する

サイト用にカスタマイザーログインページを作成する必要はありません。多くのサイトでは、初期設定のログインページを使用しながら、WordPressのロゴとロゴのURLを置き換えています。

ログイン画面のWordPressロゴを独自のロゴに置き換えたい場合は、WordPressプラグインを使用するか、カスタムコードを追加することで簡単にできます。両方の方法を紹介しますので、自分に合った方法を選んでください。

方法1：プラグインを使ってWordPressのログインロゴとURLを変更する

まず最初にColorlib Login Customizerプラグインをインストールして有効化します。詳しくはWordPressプラグインのインストール方法をご覧ください。

プラグインを有効化すると、WordPressテーマのカスタマイザーに新しいメニュー項目が追加されます。外観 ” カスタマイズに移動し、新しい ‘Colorlib ログインカスタマイザー’ 項目をクリックするだけで、ログインカスタマイザーが起動します。

ブロックテーマを使用している場合、このオプションは使用できませんので、その場合はコードメソッドを使用することをお勧めします。

ログインカスタマイザーでは、初期設定のWordPressログイン画面が読み込まれ、左側にカスタマイズオプション、右側にライブプレビューが表示されます。

WordPressのロゴを自分のロゴに置き換えるには、右側の「ロゴオプション」タブをクリックします。

ここからWordPressのロゴを非表示にしたり、カスタマイザーのロゴをアップロードしたり、ロゴのURLやテキストを変更することができます。

また、文字の大きさや色、カスタムロゴの幅や高さもカスタマイズできます。

このプラグインでは、初期設定のWordPressログインページを完全にカスタマイズすることもできます。カラムの追加、背景画像の追加、ログインフォームの色の変更などが可能です。

基本的に、初期設定のWordPressログインURLを変更することなく、カスタマイザーのWordPressログインページを作成することができます。

完了したら、’公開する’ボタンをクリックして変更を保存します。これで WordPress のログインページにアクセスし、カスタムログインフォームの動作を確認することができます。

方法2：WordPressのログインロゴとURLをコードで変更する

この方法では、ログイン画面のWordPressロゴを、プラグインを使わずに手動でカスタマイザーロゴに置き換えることができます。ブロックテーマにも適しています。

まず、カスタムロゴをメディアライブラリにアップロードする必要があります。メディア ” 新規追加ページでカスタムロゴをアップロードしてください。

画像をアップロードしたら、その横にある「編集」リンクをクリックしてください。ファイルのURLをコピー＆ペーストして、コンピューター上の空白のテキストファイルなど、使いやすい場所に貼り付けてください。

次に、テーマのfunctions.phpファイルに以下のコードスニペットを追加するか、WPCodeプラグインを使用して、サイトを壊すことなく簡単にカスタムコードを追加する必要があります（推奨）：

function wpb_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(http://path/to/your/custom-logo.png);
        height:100px;
        width:300px;
        background-size: 300px 100px;
        background-repeat: no-repeat;
        padding-bottom: 10px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wpb_login_logo' );

4行目のbackground-imageのURLを、先ほどコピーしたファイルのURLに置き換えるのを忘れないでください。また、カスタムロゴ画像に一致するように、他のCSSプロパティを調整することもできます。

これでWordPressのログインページにアクセスし、カスタムロゴを見ることができます。

しかし、このコードはWordPressのロゴを置き換えるだけです。WordPress.orgサイトを指すロゴリンクは変更されません。

これを変えよう。

以下のコードをテーマのfunctions.phpファイルまたはWPCodeに追加するだけです。先ほど追加したコードのすぐ下に貼り付けることができます：

function wpb_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'wpb_login_logo_url' );
 
function wpb_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'wpb_login_logo_url_title' );

あなたのサイト名と情報」をあなたのサイト名に置き換えることを忘れないでください。ログイン画面のカスタムロゴは、あなたのサイトのホームページを指すようになります。

WordPressログインページの言語切り替えを無効化する

WordPress 5.9のリリースでは、ユーザーがサイトにログインする際に新しい言語を選択できるドロップダウンログインオプションが導入されました。

サイトに有効化した言語が複数ある場合、このオプションが設定されます。

これは、多言語サイトや、異なる言語でWordPressダッシュボードにアクセスしたい異なるユーザーを持つチームにとって効果的です。

しかし、ログインページをシンプルに保ち、ユーザーが頻繁に言語を切り替える必要がない場合、言語スイッチャーを削除することで、ページをすっきりさせることができます。プラグインやコードを使ってこれを行うことができます。

方法1：プラグインで言語切り替えを無効化する

必要なことはすべて、Disable Login Language Switcherプラグインをインストールして有効化するだけです。有効化した時点で、言語切り替えオプションは自動的に削除されます。追加の設定は必要ありません。

これでログイン画面に行くと、言語切り替えオプションのない標準のログイン画面が表示されます。

方法2：コードで言語切り替えを無効化する

言語切り替え機能を無効化するもうひとつの方法は、WordPressにコードを追加することです。

以下のコード・スニペットをfunctions.phpファイルまたはWPCodeスニペットに追加するだけです。詳しくは、WordPressでカスタマイザーを追加する方法のチュートリアルをご覧ください：

add_filter( 'login_display_language_dropdown', '__return_false' );

詳しくは、WordPressログイン画面の言語切り替えを無効化する方法をご覧ください。

以上です。この投稿が、あなたのサイトにWordPressログインページを作成するさまざまな方法を学ぶのに役立てば幸いです。WordPressでワンクリックGoogleログインを追加するチュートリアルや、サイトに最適な配色を選ぶガイドも参考にしてみてください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.