カスタムWordPressログインページを作成する方法（初心者向け究極ガイド）

標準的なWordPressのログインページは、特にメンバーシップサイト、オンラインコース、またはユーザーが定期的にログインするサイトを運営している場合、場違いに感じられることがあります。

登録後の最初の印象となることが多く、もしそれが地味に見えたり、サイトの他の部分と disconnected していると、信頼性が損なわれたり、体験が messy に感じられたりする可能性があります。

ログインページをカスタマイズすることは、ブランドを強化し、よりプロフェッショナルなユーザーエクスペリエンスを作成し、さらには追加のセキュリティを強化するためのシンプルでありながら強力な方法です。

WPBeginnerで無料のWordPressビデオトレーニングを開始した際に、これを直接目にしました。ブランド化されたログインページは、すべてをよりまとまりのあるものにし、ユーザーに最初からより良い体験を提供しました。

このガイドでは、独自のカスタム WordPress ログインページを作成する方法を説明します。初心者向けの簡単な方法と高度な方法の両方を学ぶことができるので、サイトに最適なアプローチを選択できます。

このガイドから学べることは次のとおりです。

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

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

デフォルトでは、ログインページにはWordPressのブランディングとロゴが表示されます。これは、管理者アクセス権を持つのがあなただけの場合や、ユーザーが非常に少ない場合には問題ありません。

ただし、ウェブサイトでユーザー登録とログインを許可している場合は、カスタムログインページの方が優れたユーザーエクスペリエンスを提供します。

WordPressのログイン画面がウェブサイトと全く似ていない場合、一部のユーザーは不審に思うかもしれません。ビジネスロゴやデザインを使用すれば、より親しみを感じるでしょう。

最後に、デフォルトのログイン画面にはログインフォームのみが表示されます。カスタムログインページを作成することで、そのスペースを他のページや特別オファーのプロモーションに利用できます。

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

例えば、WPBeginnerトレーニングビデオウェブサイトで使用しているカスタムログインページは次のとおりです。

さて、カスタムWordPressログインページデザインの他の例を見てみましょう。

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

ウェブサイトの所有者は、さまざまなスタイルやテクニックを使用してWordPressのログインページをカスタマイズできます。

ウェブサイトのテーマや色を使用するカスタムログインページを作成する人もいれば、カスタム背景、色、ロゴを追加してデフォルトのログインページを変更する人もいます。

ここにいくつかの可能性のある例を示します。

WPForms

WPFormsは、市場で最高のWordPressお問い合わせフォームプラグインです。このプラグインには、美しいWordPressのログインおよび登録フォームを作成するためのアドオンも含まれており、この記事の後半でご紹介します。

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

上記のログインページは、新機能についてユーザーに通知します。カスタムブランディング、背景イラスト、ブランドカラーを使用して、ユニークなログインエクスペリエンスを作成します。

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

Jacquelynne Stevesは、著者が家の装飾、キルティング、パターン、刺繍などに関するコンテンツを公開している芸術工芸のウェブサイトです。

ログインページはウェブサイトのテーマに合ったカスタム背景画像を使用しており、ログインフォームは右側にあります。

チャーチ・モーション・グラフィックス

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

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

MITスローン経営レビュー

MITスローン経営レビューでは、ポップアップモーダルを使用してログインおよび登録フォームを表示しています。

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

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

Theme My Login（無料）を使用してWordPressログインページを作成する

Theme My Loginは、ログインページをWordPressテーマに合わせる無料プラグインです。カスタマイズ性は高くありませんが、デフォルトのWordPressブランドのログインページを置き換え、よりプロフェッショナルに見せることができます。

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

アクティベーション時に、Theme My Login はカスタムログイン、ログアウト、登録、パスワード忘れ、パスワードリセットのアクション用のURLを自動的に作成します。

Theme My Login » General ページにアクセスして、これらの WordPress ログイン URL をカスタマイズできます。「Slugs」セクションまでスクロールして、プラグインがログインアクションに使用する 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プラグインであり、User Registrationアドオンにアクセスするには少なくともプロプランが必要です。WPBeginnerユーザーは、WPFormsクーポンコードを使用して50％割引を受けることができます。

まず、WPFormsプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化後、ライセンスキーを入力するために**WPForms » 設定**ページにアクセスする必要があります。この情報はWPFormsウェブサイトのアカウントで見つけることができます。

ライセンスキーを入力すると、アドオンをインストールできるようになります。

WPForms » Addons ページにアクセスし、User Registration Addon を見つけてください。

次に、「アドオンのインストール」ボタンをクリックして、アドオンをダウンロードしてアクティブ化します。アドオンがアクティブになったので、フォームの作成準備が整いました。

WPForms » 新規追加ページに移動します。フォームの「テンプレートの選択」を求められます。「ユーザーログインフォーム」テンプレートを検索し、「テンプレートを使用」ボタンをクリックして続行します。

WPFormsは、必要なフィールドを持つユーザーログインフォームをロードします。

フィールドをクリックすると、独自のの説明またはテキストを追加できます。

他の設定も変更できます。

例えば、デフォルトのボタンタイトルは「Submit」です。ボタンをクリックして、テキストを「Login」に変更できます。

ユーザーが正常にログインした後に何が起こるかを決定することもできます。

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

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

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

WPFormsを使用すると、カスタムログインフォームを任意のWordPress投稿またはページに簡単に追加できます。

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

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

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

これで、ウェブサイトにアクセスしてログインページが機能していることを確認できます。

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

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

ページ全体を完全に制御し、ゼロから何かをデザインしたい場合は、WordPressページビルダープラグインを使用できます。

SeedProdはWordPress向けの最高のランディングページビルダーです。標準のフォームビルダーとは異なり、SeedProdではログインボックスだけでなく、ページ全体のレイアウトをカスタマイズできます。

初心者にも使いやすく、ドラッグアンドドロップビルダーを使用して、あらゆる種類のランディングページを作成できます。これには、ログインページ、近日公開ページ、メンテナンスモードページなどが含まれます。

SeedProdを実際にテストし、その機能、使いやすさ、パフォーマンスを網羅した詳細なレビューも作成しました。

まず、ウェブサイトにSeedProdプラグインをインストールする必要があります。詳細については、WordPressプラグインのインストール方法に関するガイドに従ってください。

プラグインがアクティブになると、WordPress管理エリアのSeedProdにリダイレクトされます。

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

その後、SeedProd でログインページを作成する準備が整います。

まず、**SeedProd » ランディングページ**に移動し、「ログインページを設定」ボタンをクリックして「ログインページ」オプションを選択します。

次の画面で、ログインページのテンプレートを選択できます。空白テンプレートを使用して、ページをゼロから作成することもできます。

ただし、ログインページをカスタマイズするのは簡単で速いため、テンプレートの使用をお勧めします。

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

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

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

たとえば、ログインページにテキスト、ビデオ、または新しいボタンを追加できます。高度なブロックセクションには、カウントダウンタイマー、ソーシャル共有アイコンなどを追加できる、より多くのカスタマイズオプションがあります。

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

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

例えば、フィールドのテキストや色を変更したり、異なるフォントを選択したり、ボタンの色を編集したりできます。

ログインページのデザインに満足したら、上部にある「接続」タブをクリックしてください。

これで、メールマーケティングサービス（Constant Contact、Dripなど）を接続できます。

その後、[ページ設定]タブに移動する必要があります。[一般設定]の下で、SeedProdを使用すると、ページタイトルを編集し、ページステータスをドラフトから公開に変更できます。

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

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

All in One SEOは、検索エンジンやソーシャルメディアプラットフォーム向けにWordPressウェブサイトを最適化できる最高のWordPress SEOプラグインです。

WordPressでAll In One SEOを正しく設定する方法に関するガイドで、その最適な使用方法を学ぶことができます。

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

たとえば、ここにGoogle Analyticsコード、Facebookピクセル、またはその他の追跡コードを追加したい場合があります。

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

次に、ログインページをアクティブにする必要があります。これを行うには、ランディングページビルダーを終了し、SeedProd » Landing Pagesに移動します。

そこに着いたら、スイッチをクリックしてページのステータスを「非アクティブ」から「アクティブ」に変更する必要があります。

これで、ログインページのURLにアクセスして、実際に動作を確認できます。

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

代替案：Thrive Architectを使用して魅力的なログインページをデザインすることもできます。これは、カスタムページを作成するために推奨する、もう1つの優れたドラッグアンドドロップページビルダープラグインです。

以下のようなログインページを作成できる、300以上のプロフェッショナルにデザインされたテンプレートが含まれています。

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

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

ウェブサイトにカスタムWordPressログインページを必ずしも作成する必要はありません。多くのウェブサイトでは、デフォルトのログインページを使用しながら、WordPressのロゴとロゴURLを置き換えています。

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

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

まず、Colorlib Login Customizerプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

有効化すると、プラグインはWordPressテーマカスタマイザーに新しいメニュー項目を追加します。単に外観 » カスタマイズに移動し、新しい「Colorlib Login Customizer」項目をクリックしてログインカスタマイザーを起動します。

ログインカスタマイザーは、デフォルトの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には、ユーザーがウェブサイトにログインする際に新しい言語を選択できるドロップダウンログインオプションが用意されています。

サイトにアクティブな言語が複数ある場合、このオプションが表示されます。 

これは、多言語ウェブサイトや、WordPressダッシュボードを別の言語でアクセスしたいさまざまなユーザーがいるチームに適しています。

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

方法1：プラグインで言語スイッチャーを無効にする

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

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

方法2：コードで言語スイッチャーを無効にする

言語スイッチャーを無効にする別の方法は、WordPressにコードを追加することです。

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

add_filter( 'login_display_language_dropdown', '__return_false' );

詳細については、WordPressログイン画面で言語スイッチャーを無効にする方法に関するガイドをご覧ください。

WordPressログインページに関するよくある質問

読者からログインページのデザインについてよく寄せられる質問をいくつかご紹介します。

プラグインなしでWordPressにログインページを作成するにはどうすればよいですか？

プラグインなしでカスタムログインページを作成するには、テーマにカスタムページテンプレートを作成し、wp_login_form() PHP関数を使用します。これにより、任意のページにログインフォームを表示できますが、CSSを使用してスタイルを設定する必要があります。

WordPressのログインはどのように機能しますか？

WordPressのログインシステムは、WordPressデータベースに保存されているユーザーの詳細情報とユーザー名およびパスワードを照合して機能します。照合が完了すると、WordPressはブラウザクッキーを設定して、ダッシュボードをナビゲートしている間、ログイン状態を維持します。

WordPressウェブサイトのデフォルトのログインページは何ですか？

どのWordPressウェブサイトのデフォルトのログインページも、wp-login.phpファイルにあります。ウェブサイトのドメイン名の末尾に/wp-login.phpを追加することでアクセスできます。

WordPressのログインURLは何ですか？

WordPressのログインURLは通常 yoursite.com/wp-admin または yoursite.com/login です。これらのいずれかのURLを入力すると、自動的に標準のログイン画面にリダイレクトされ、そこで認証情報を入力できます。

WordPressのログインを保護するにはどうすればよいですか？

強力なパスワードを強制し、2要素認証（2FA）を有効にすることで、WordPressのログインを保護できます。また、ハッカーによるブルートフォース攻撃を防ぐために、ログイン試行回数を制限することもお勧めします。

WordPressサイトを「メンテナンス中」に設定するにはどうすればよいですか？

最も簡単な方法は、組み込みの「Coming Soon」モードを備えたSeedProdを使用することです。これにより、訪問者は一時的なページを見ている間に、サイトをプライベートで作業できます。これを設定するには、WordPressでComing Soonページを作成する方法に関するチュートリアルをご覧ください。

以上です。この記事が、ウェブサイトのWordPressログインページを作成するためのさまざまな方法を学ぶのに役立ったことを願っています。また、WordPressにワンクリックでGoogleログインを追加する方法に関するチュートリアルや、WordPressにOAuthログインを追加する方法に関するガイドもご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。