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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WPForms

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

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

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

Jacquelynne Steves

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

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

Church Motion Graphics

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

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

MITSloan Management Review

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

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

さて、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プラグインであり、ユーザー登録アドオンにアクセスするには、少なくともpro planが必要です。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 を正しく設定する方法（究極ガイド）" title="WordPress の All In One 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のログインを保護するにはどうすればよいですか？

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

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

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

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

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。