WordPressログインページをカスタマイズする方法（簡単な5つの方法） 

カスタムWordPressログインページを作成したいですか？

WordPressログインページをカスタマイズすることは、ウェブサイトのブランディング、セキュリティ、ユーザーエクスペリエンスを向上させる素晴らしい方法です。

会員制サイトやオンラインストアを運営している場合、ユーザーはログインページを必要とします。そのため、デフォルトのWordPressログインエリアをカスタマイズすることで、ブランドを反映させ、より良いユーザーエクスペリエンスを提供できます。

この記事では、簡単な手順でWordPressログインページをカスタマイズする方法を紹介します。

目次

WordPressログインページをカスタマイズするメリットは？

ホスティングによっては、デフォルトのWordPressのログインページにはWordPressのロゴが表示されます。また、ユーザーがユーザー名とパスワードを入力するためのフォームフィールドも表示されます。

あなたが小規模なブロガーや中小企業のウェブサイトで、バックエンドへのwp-adminログインアクセス権を持つのがおそらくあなただけである場合、これは問題ありません。

しかし、あなたのサイトで人々が登録してダッシュボードにログインできる場合、デフォルトのWordPressログインページを置き換えて、より良く、よりプロフェッショナルで、ユーザーフレンドリーなエクスペリエンスを提供できます。

ユーザーは、カスタムログインデザインとロゴがあると、あなたのブランドを認識できるため、より自宅にいるように感じます。一方、ウェブサイトとは似ても似つかないログイン画面に誘導されると、不審に思われる可能性があります。

さらに、デフォルトのWordPressログイン画面には、ログインフォームの入力フィールド以外に何もありません。つまり、簡単にあなたの個性を加えることができません。

カスタムWordPressログインページのデザイン例

ウェブサイトの所有者は、さまざまな方法でWordPressログインページをカスタマイズできます。さまざまなスタイルや画像を追加したり、ホームページにリンクを戻したり、他の商品をアップセルするための行動喚起を含めたり、ソーシャルメディアのプロフィールアイコンを追加したりすることもできます。

以下に、できることの例をいくつか示します。

MonsterInsights WordPressログインページのカスタマイズ

MonsterInsightsは、ログインページのデザインに2列レイアウトを使用しています。左側はログインフォーム、右側は姉妹製品のCTAです。

このログインページの例には、魅力的な背景画像が含まれており、ユニークなログインエクスペリエンスを作成しています。

TEDカスタムWordPressログインページ

TEDのログインページは、2列のデザインの別の例です。左側には魅力的な画像と見出しがあり、右側の列には複数のログイン方法が用意されています。

ユーザーはメールアドレスを入力してTEDアカウントにサインアップすることもできます。

Church Motion Graphicsカスタマイズログインページ

このログインページは、カラフルな背景で瞬時に注目を集めます。背景画像は、ビジネスの内容を反映しており、ユーザーに期待されることを示唆しています。

ヘッダー、フッター、ナビゲーションメニューはサイト全体で同じです。しかし、ログインフォームはミニマリストで、明るいウェブサイトの画像とは対照的に、明るい背景になっています。

ここに、インスピレーションを得るためのログインページ例をいくつかご紹介します。

これを念頭に置いて、WordPressでログインページをカスタマイズするさまざまな方法を探ってみましょう。難しいカスタムCSSやHTMLは一切必要ありません。

WordPressのカスタムログインページを作成するために、この分野で最高のWordPressプラグインであるSeedProdとWPFormsを使用して、手順を説明します。

SeedProdを使用してWordPressログインページをカスタマイズする方法

SeedProdは、発売前モードとメンテナンスモード機能を備えた最高のWordPressランディングページビルダーおよびテーマビルダーです。Elementorのように、初心者向けのドラッグアンドドロップビルダーを使用して、WordPressで任意の種類のランディングページまたはテーマを作成できます。

多数のレスポンシブWordPressテーマとランディングページテンプレートを使用して、見栄えの良いものを作成できます：

• 発売前ページ
• メンテナンスページ
• 販売ページ
• ウェビナー登録ページ
• リード獲得ページ
• 404エラーページ
• WordPressサンキューページ
• カスタムログインページ

組み込みのフロントエンドログインページモードとログインフォームブロックを使用すると、WordPressログインページを完全に変えることができます。ユーザーはすばやくログインおよびログアウトでき、どのWordPressテーマでも機能します。

何よりも、SeedProdは高速で、ブロートフリーで、ウェブサイトを遅くしません。他のランディングページビルダープラグインとは異なり、ビジネスのリードと結果の生成に重点を置いています。

注意：WordPress.orgにはSeedProdの無料版があります。ただし、高度なカスタマイズ機能とログインページモードにはSeedProd Proを使用します。

以下の手順に従って、SeedProdのカスタムログインページカスタマイザーでデフォルトのWordPressログインページをスタイル設定します。

ステップ1: SeedProdのインストールと有効化

最初の手順は、SeedProdプラグインをダウンロードし、WordPressウェブサイトにインストールすることです。

それに慣れていない場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

プラグインをインストールして有効化した後、WordPress管理ダッシュボード領域にSeedProdウェルカムページが表示されます。ここでライセンス情報を入力し、クイックスタートビデオを表示できます。

ライセンスキーを入力したら、最初のページを作成ボタンをクリックします。

ステップ2：WordPressログインページの編集

SeedProdで新しいページを作成するためにクリックすると、次の概要が表示されます：

これらは、SeedProdで有効にできるさまざまなページモードです。このチュートリアルでは、ログインページモードが必要です。

したがって、ログインページのヘッダーの下にあるページを編集をクリックしてください。

ステップ3：カスタムWordPressログインページテンプレートの選択

次の画面で、SeedProdのランディングページテンプレートライブラリが表示されます。すべてのテンプレートは多目的であり、ビジュアルページビルダーでカスタマイズできます。

404エラーメッセージテンプレート、販売ページテンプレート、発売前ページなどが含まれています。

ログインボタンをクリックすると、使用できるすべてのログインページテンプレートが表示されます。好きなテンプレートにマウスカーソルを合わせ、ティックアイコンをクリックするだけです。

このガイドでは、ログインページ8を選択します。

WordPressのログインページテンプレートを選択すると、カスタムページの名前とURLを入力するよう求めるポップアップが表示されます。

Save and Start Editing Pageボタンをクリックして、ドラッグ＆ドロップエディターで起動します。

ステップ4：WordPressログインページのカスタマイズ

SeedProdのドラッグ＆ドロップランディングページエディターには、2つの明確なセクションがあります。左側には使用できるページブロックとセクションが表示されます。右側にはランディングページのライブプレビューが表示されます。

ログインページに新しいコンテンツを追加するには、左側からブロックをドラッグしてページにドロップします。たとえば、数回クリックするだけで、ログインロゴをページに追加できます。

ページ上の任意のブロックをクリックすると、コンテンツをカスタマイズできます。たとえば、ログインフォームをクリックすると、左側のパネルにSeedProdのログインブロック設定が表示されます。

そのエリアでは、ログインフォームのラベルをカスタマイズしたり、名前とパスワードフィールドを表示/非表示したり、ボタンのテキストとチェックボックスをカスタマイズしたりできます。

テンプレートタブをクリックすると、いくつかの異なるログインフォームスタイルから選択できます。

これは、技術的な知識なしでフォームをカスタマイズする簡単な方法です。好みのスタイルを選択するだけで、フォームに即座に表示されます。

ログインページに追加コンテンツを追加することも同様に簡単です。標準ブロックにボタン、列、画像、その他のレイアウト中心の要素を追加できます。

一方、高度なブロックは、ビジネスのリード生成を支援します。

数回クリックするだけで、以下を埋め込むことができます：

• プレゼント企画
• お問い合わせフォーム
• オプトインフォーム
• カウントダウンタイマー
• プログレスバー
• ソーシャルプロフィールのボタン
• ソーシャルメディア共有ボタン
• WooCommerce製品
• その他多数。

これは、ログインページをリード生成マシンに変える素晴らしい方法です。たとえば、ログインページでユーザーにプレゼントを表示して、ソーシャルフォロワーを増やしたり、ブランド認知度を高めたり、メールリストを増やしたりすることもできます。

個々のブロックとは別に、SeedProdにはランディングページセクションもあります。これらは、ブロックごとに手動で構築する必要のないページエリアです。セクションタブをクリックすると、さまざまなセクションを確認できます。

そこから、新しいものを選択できます：

• ヘッダー
• ヒーローエリア
• 行動喚起
• FAQセクション
• 機能エリア
• フッター

そしてそれらをページに自動的に追加します。

ログインページの背景、フォント、色を変更したくなります。ページ上のすべてのブロックに対して個別にこれを行うのは時間がかかります。

幸いなことに、SeedProdではこれらの設定をグローバルに制御できます。画面の右下隅にある歯車アイコンをクリックするだけで、グローバル設定パネルが表示されます。

フォントタブでは、ヘッダーと本文のフォントとウェイトを変更できます。ドロップダウンメニューから新しいフォントサイズまたはウェイトを選択するだけです。

フォントテーマボタンをクリックすると、SeedProdのフォントの組み合わせライブラリを参照できます。

これにより、どのフォントが最もよく組み合わされるかがわかり、ワンクリックでページに追加できます。

カラーピッカーツールを使用して、グローバルリンク、ヘッダー、テキスト、ボタン、背景に異なる色を選択できます。

または、カラーパレットボタンをクリックして、20以上のカラーテーマから選択することもできます。

背景セクションでは、ログインページの背景を簡単にカスタマイズできます。単色またはグラデーションの背景色を設定したり、全幅の背景画像をアップロードしたりできます。

背景設定パネルのゴミ箱アイコンをクリックして、既存の画像を削除します。

独自の画像を使用ボタンをクリックして、コンピューターまたはWordPressメディアライブラリから新しい画像を選択できます。そこから、背景サイズ、背景の繰り返し、その他のオプションを調整できます。

各設定のトグルを選択して、ビデオ背景または背景スライドショーを追加することもできます。

カスタマイズ設定を保存するには、保存をクリックすることを忘れないでください。

ステップ5：WordPressログインページの設定を構成する

ログインページのデザインが完了したら、いくつかの必要な設定を構成します。

まず、メールマーケティングサービスを接続します。これは、ログインページにオプトインフォームがあり、ユーザーのメールアドレスを収集したい場合に便利です。

これを行うには、画面上部の接続タブをクリックし、希望するメールサービスを選択して、アカウントをリンクする手順に従います。

SeedProdは、以下を含む人気のメールニュースレターサービスと統合されています。

• ActiveCampaign
• AWeber
• キャンペーンモニター
• Constant Contact
• ConvertKit
• Drip
• GetResponse
• iContact
• Mad Mimi
• Sendy
• Mailchimp

メールプロバイダーがなくても心配する必要はありません。SeedProdの購読者管理機能を使用すると、引き続きメールアドレスを収集できます。

ランディングページ経由で誰かが購読すると、その詳細はWordPressウェブサイトに自動的に保存されます。WordPressダッシュボードからSeedProd » Subscribersに移動すると、購読者を表示できます。

次のステップは、画面上部のページ設定タブをクリックすることです。

このページでは、ランディングページの次の設定を変更できます。

• 一般詳細 – ページ名とURLを変更し、下書きまたは公開に設定します。
• SEO – All in One SEOのようなSEOプラグインを使用して、ページのSEOタイトル、メタディスクリプションなどを編集します。
• 分析 – MonsterInsightsのような分析プラグインを使用して、ログインページのパフォーマンスを表示します。
• スクリプト – CookieやFacebookトラッキングピクセルなどのトラッキングおよびリターゲティングスクリプトを入力します。

次のステップに進む前に、保存ボタンをクリックすることを忘れないでください。

ステップ6：ログインページがモバイルフレンドリーか確認する

公開するすべてのウェブページはモバイルフレンドリーである必要があります。そうでない場合、モバイルユーザーはあなたのウェブサイトを閲覧したり使用したりするのが難しくなります。

モバイルフレンドリーなランディングページテンプレートに加えて、SeedProdには便利なモバイルプレビューオプションがあります。これにより、ログインページがすべてのデバイスで素晴らしく見えることを確認できます。

WordPressログインページのモバイルプレビューを表示するには、画面下部にあるモバイルプレビューアイコンをクリックします。

これにより、モバイルユーザーがログインページをどのように表示するかを確認できます。デスクトップビューでは、通常どおり編集でき、SeedProdは両方のビューに変更を保存します。

ステップ7：カスタムWordPressログインページを公開する

カスタムWordPressログインページを作成し、モバイルデバイスで確認したら、公開する準備ができました。緑色の保存ボタンの横にある下矢印をクリックし、公開を選択して公開します。

その後、ページが公開されたことを示すポップアップが表示されます。

ライブページを表示ボタンをクリックして、どのように表示されるかを確認してください。

最後に、WordPress管理エリアでログインページモードを有効にする必要があります。

ページビルダーを終了し、SeedProdランディングページダッシュボードを表示するには、「X」アイコンをクリックします。

次に、ログインページの見出しの下で、トグルを非アクティブからアクティブに切り替えます。

おめでとうございます！これで、WordPressログインページにアクセスした人は誰でもカスタムデザインが表示されます。

WPFormsを使用してWordPressログインページをカスタマイズする

今日取り上げるWordPressログイン画面をカスタマイズする2番目の方法は、人気のWPFormsプラグインを使用することです。

WPFormsは、WordPress向けの最高のドラッグアンドドロップフォームビルダーです。そして、あなたが気づいていないかもしれませんが、その便利なユーザー登録フォームアドオンを使用して、ウェブサイトのログインページを構築できます。

300万以上のウェブサイト所有者がWPFormsを使用してよりスマートなフォームとアンケートを作成しているため、安心して利用できることを確認できます。

したがって、ログインページ作成専用のフォームプラグインが必要ない場合は、このステップバイステップのチュートリアルに従って、WPFormsを使用してWordPressカスタムログインフォームを作成してください。このガイドでは、パスワード紛失リンクをフォームに追加する方法や、ショートコードを使用してログインフォームを表示する方法についても説明します。

WordPressログインページを手動でカスタマイズする方法

ブランドの新しいログインページを作成したり、WordPressログインプラグインを使用したりする代わりに、既存のログインページに変更を加えたり、カスタムスタイルを追加したりしたい場合は、それを行うことができます。この方法では、テーマのfunctions.phpファイルまたはサイト固有のプラグインにコードを追加します。

ページビルダーやWordPressカスタマイザーを使用するよりも難しいため、ニーズに合わない場合があります。

この方法が初めての場合は、WordPressにコードスニペットを追加する方法に関するこのガイドを参照してください。これにより、ウェブサイトを誤って破損させることを防ぐことができます。

次に、次のコードをテーマのfunctions.phpファイルに追加します。

//Custom login page
function clp_login_head() {
         
    echo '<style>'; //Begin custom styles
    echo '.login #nav a, .login #backtoblog a { color: # !important; }'; //Login page link color
    echo '.login h1 a { background:url("' . get_bloginfo('stylesheet_directory') . '/images/IMAGE GOES HERE"); width: px; height: px; }'; //Login page logo
    echo '.login .button-primary { background:#; border-color:#; }'; //Login page button color
    echo '</style>'; //End custom styles
         
}
add_action('login_head', 'clp_login_head');

上記のコードを使用してCSSと画像URLを変更できます。これにより、WordPressログインページにカスタムスタイルが追加されます。

プラグインなしでWordPressのログインフォームをどこにでも表示する

WordPressのログインプラグイン、サイドバーログインウィジェット、またはフッターエリアなしで、任意のページにWordPressログインフォームを表示したい場合は、このコードをテーマのテンプレートファイルに追加できます。

<?php
          wp_login_form();
?>

このコードは、コードを追加した場所に一般的なWordPressログインページのみを表示します。

追加のフィールドとオプションを備えたカスタムWordPressフォームページを追加したい場合は、このコードを使用できます。

<?php $args = array(
        'echo' => true,
        'redirect' => 'http://wpsnipp.com',
        'form_id' => 'loginform',
        'label_username' => __( 'Username' ),
        'label_password' => __( 'Password' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in' => __( 'Log In' ),
        'id_username' => 'user_login',
        'id_password' => 'user_pass',
        'id_remember' => 'rememberme',
        'id_submit' => 'wp-submit',
        'remember' => true,
        'value_username' => NULL,
        'value_remember' => false );
wp_login_form($args);
?>

WordPressログインロゴとURLをカスタマイズする

WordPressウェブサイトのカスタムログインページを常に作成する必要はありません。場合によっては、デフォルトのログインページのロゴとロゴへのリンクを変更するだけで済みます。

ログイン画面のロゴを自分のものに変更したい場合は、WordPress用のプラグインを簡単に使用できます。

まず、Colorlib Login Customizerプラグインをインストールして有効化します。有効化したら、WordPress管理画面から外観 » カスタマイズに移動し、新しい「Colorlib Login Customizer」項目をクリックします。

カスタマイザーは、左側にカスタマイズ設定、右側にライブプレビューが表示されたデフォルトのWordPressログイン画面を読み込みます。

デフォルトのWordPressロゴを自分のものに置き換えるには、ロゴオプションタブをクリックします。

これで、WordPressロゴを非表示にしたり、カスタムロゴをアップロードしたり、ロゴのURLとテキストを変更したりできます。

さらに、テキストのサイズ、ロゴの幅と高さを変更することもできます。

必要に応じて、列、背景画像、カスタムカラーなどでデフォルトのWordPressログインページを完全にカスタマイズすることもできます。新しいログインページロゴに満足したら、必ず変更を公開してください。

WordPressログインページの Сшибкаメッセージをカスタマイズする

ユーザーがWordPressで間違ったユーザー名またはパスワードを入力すると、デフォルトのエラー通知が表示されます。「無効なユーザー名」や「メールアドレスが正しくありません」などのメッセージは、問題が何であるかを明確に説明します。

LoginPressは、これらのログインエラーメッセージを変更するために使用できるツールです。たとえば、デフォルトのメッセージに詳細を追加して、修正方法を示すことができます。

ただし、これは正規のユーザーがアカウントにアクセスするのに役立つ一方で、ハッカーを意図せず支援してしまう可能性があります。ハッカーは、一般的なユーザー名とパスワードの組み合わせを使用してウェブサイトに侵入しようとすることがよくあります。デフォルトのエラー通知は、ハッカーが正しいユーザー名またはパスワードを入力したかどうかを学習するのに役立ちます。

保護措置として、より一般的なエラー通知が必要になる場合があります。これらを変更するには、WordPressカスタマイザーメニューから「エラーメッセージ」を選択します。

そこから、ログインエラーメッセージに必要な変更を加えることができます。HTMLフォーマットと互換性があるため、重要なテキストの太字や斜体などのスタイル機能を含めることができます。

カスタマイズしたログインページをテストする

テストは、WordPressログインページをカスタマイズするプロセスにおける不可欠なステップです。テストを実行する方法の簡単なガイドラインを次に示します。

• ページの読み込み：グリッチや壊れた要素なしでページが正しく読み込まれるか確認してください。
• ロゴとデザイン：新しいロゴとデザインが期待どおりに表示されていることを確認してください。
• 機能テスト: ユーザー名とパスワードでログインを試してください。プロセスがスムーズで成功することを確認してください。
• エラーメッセージ: 無効なログイン認証情報を入力し、エラーメッセージが適切に表示されるか確認してください。
• パスワードリセット機能: 「パスワードリセット」機能をテストし、パスワードリセットリンク付きのメールが正しく送信されることを確認してください。
• カスタムURL:ログインページにカスタムURLを設定している場合は、新しいログインページに正しくリダイレクトされることを確認してください。
• レスポンシブ: さまざまなデバイス（モバイル、タブレット、デスクトップ）でページの見た目を確認し、レスポンシブでユーザーフレンドリーであることを確認してください。

WordPressログインページをカスタマイズするFAQ

これで完了です！

これでWordPressカスタムログインページを作成する方法がわかりました。WordPressサイトをプロフェッショナルに見せ続け、顧客に優れたユーザーエクスペリエンスを提供できます。

SeedProdを今すぐ試して、WordPressログインページを簡単にカスタマイズしましょう。SeedProdを使用すると、コードを書かずに色、フォント、ロゴなどを変更できます。

お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。