カスタム WordPress ログインページを作成する方法（2025年究極ガイド）

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

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

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

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

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

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

• カスタムWordPressログインページを作成する理由
• WordPress ログインページのデザイン例
• Theme My Login（無料）を使用してWordPressログインページを作成する
• WPFormsを使用してカスタムWordPressログインページを作成する
• SeedProdを使用したカスタムWordPressログインページの作成（推奨）
• WordPressのログインロゴとURLを変更する
• WordPressログインページの言語スイッチャーを無効にする

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

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

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

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

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

最後に、デフォルトのログイン画面にはログインフォームしかありません。カスタムログインページを作成することで、他のページや特別オファーを宣伝するスペースとして活用できます。

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

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

それを踏まえて、カスタムWordPressログインページのデザインの例をいくつか見てみましょう。

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

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

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

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

WPForms

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

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

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

Jacquelynne Steves

Jacquelynne Steevesは、作者が家の装飾、キルト作り、パターン、刺繍などに関するコンテンツを公開しているクラフト＆アートのウェブサイトです。

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

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 プラグインであり、User Registration アドオンにアクセスするには、少なくとも pro plan が必要です。WPBeginner ユーザーは、WPForms クーポンコード：SAVE50 を使用すると 50% オフになります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SeedProdは、WordPress向けの最高のランディングページビルダーです。初心者にも使いやすく、ドラッグアンドドロップビルダーを備えているため、ログインページ、近日公開ページ、メンテナンスモードページなど、あらゆる種類のランディングページを作成できます。

私たちは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 for WordPress (AIOSEO) は、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ログインカスタマイザー」項目をクリックしてログインカスタマイザーを起動します。

このオプションはブロックテーマを使用している場合は利用できないことに注意してください。その場合はコードメソッドを使用することをお勧めします。

ログインカスタマイザーは、デフォルトの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によるワンクリックログインを追加する方法のチュートリアルや、WordPressでOAuthログインを追加する方法のガイドもご覧ください。

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