要約：WordPressのログインページをカスタマイズする
デフォルトのWordPressログイン画面には、一般的なロゴが表示され、ブランドに関するものは何も表示されません。ここでは、コード不要の方法から数行のCSSまで、それを変更する5つの方法を紹介します。
- SeedProd：ドラッグアンドドロップビルダーでページ全体を再設計します。コードは不要です。
- WPForms：ユーザー登録アドオンでログインフォームを作成します。
- 手動コード：functions.phpにCSSを追加して、既存の画面を再スタイル設定します。
- ロゴのみのプラグイン：無料のログインカスタマイザーでロゴとリンクを置き換えます。
- 保護する：ログインURLを非表示にし、見た目が整ったら試行回数を制限します。
コードに触れることなく、完全なブランド変更を行いたいですか？SeedProdから始めましょう。ロゴを変更するだけでよいですか？ログインカスタマイザープラグインで十分です。
あなたは会員制サイトやクライアントサイトを運営しており、人々はあなたのブランドとは似ても似つかない画面からログインしています。小さなWordPressロゴが表示される標準のWordPressログインページは、あなたのサイトから逸れたように感じられます。
私は自分のサイトでWordPressのログインページをカスタマイズしており、コード不要のプラグインから数行のCSSまで、それを実現する5つの方法を紹介します。どれだけ制御したいかに合わせて選択してください。
WordPressログインページをカスタマイズするメリットは？
デフォルトのWordPressログインページには、WordPressロゴと2つのフォームフィールドが表示されるだけで、それ以外は何も表示されません。バックエンドにログインする人があなただけの場合は、それで問題ありません。
しかし、訪問者が登録してログインすると、あなたのサイトとは似ても似つかない標準画面は疑わしく感じられる可能性があります。あなたのブランドのカスタムログインページは、ユーザーが正しい場所にいることを伝えます。
カスタムWordPressログインページのデザイン例
では、実際にブランド化されたログインページはどのように見えるのでしょうか？独自の画像を追加したり、ホームページにリンクを戻したり、行動喚起を挿入したり、ソーシャルアイコンを含めたりできます。
ここでは、何が可能かを示すいくつかの実際の例を紹介します。
MonsterInsights WordPressログインページのカスタマイズ
MonsterInsightsは2列のレイアウトを使用しています。ログインフォームは左側にあり、姉妹製品の行動喚起は右側にあります。
背景画像は、デフォルトの画面では一致しない、独特のブランド感を与えています。
TEDカスタムWordPressログインページ
TEDは別の2列のデザインを使用しています。画像と見出しは左側にあり、右側にはいくつかのログイン方法があります。
ユーザーは、メールアドレスを入力するだけでTEDアカウントにサインアップすることもできます。
Church Motion Graphicsカスタマイズログインページ
このログインページは、ビジネスの内容を反映したカラフルな背景で注目を集めます。ヘッダー、フッター、ナビゲーションは、サイトの他の部分と一貫しています。
ログインフォーム自体は最小限に抑えられ、明るい画像とは対照的な明るい背景になっています。インスピレーションを得るために、さらに多くのログインページ例を閲覧できます。
どの方法を使用すべきか？
5つの方法では多すぎるので、始める前にあなたの状況に合った方法を見つけましょう。最適な選択は、変更したい度合いと、コードに慣れているかどうかに依存します。
- 完全な再設計、コード不要：SeedProdを使用して、ドラッグアンドドロップビルダーでログインページ全体を再構築します。
- ロゴのみ: Colorlib のような無料のログインカスタマイザープラグインを使用して、ロゴとリンクを置き換えます。
- 開発者向け: functions.php に CSS を追加して、完全に制御し、プラグインを一切使用しません。
- ページではなくログインフォーム: WPForms を使用して、どこにでも埋め込めるブランド化されたログインフォームを作成します。
- ソーシャルログイン: 専用のソーシャルログインプラグインを使用して、Google または Facebook でサインインできるようにします。
SeedProdを使用してWordPressログインページをカスタマイズする方法
SeedProd は、ログインページモードが組み込まれたドラッグ＆ドロップ WordPress ウェブサイトビルダーです。コードなしでログイン画面を視覚的に再設計でき、どの WordPress テーマでも機能します。
私は自分のサイトで SeedProd のログインページモードを使用していますが、最も価値があるのはスピードです。手動で CSS を使用してログイン画面を再スタイルするには試行錯誤に半日かかりますが、ノーコードフローでは数分で完了したページを作成できます。
これは WordPress ランディングページビルダーでもあり、同じエディターで、Coming Soon ページ、セールスページ、カスタムログインページを 1 か所から処理できます。
以下の手順に従って、SeedProd で WordPress ログインページをスタイル設定してください。
ステップ1: SeedProdのインストールと有効化
まず、SeedProd プラグインをダウンロードし、WordPress ウェブサイトにインストールします。
初めての場合は、この WordPress プラグインのインストール手順に従ってください。
プラグインを有効化すると、ダッシュボードに SeedProd のウェルカムページが表示されます。ライセンスキーを入力し、「最初のページを作成」ボタンをクリックします。
ステップ2：WordPressログインページの編集
SeedProd が有効化できるさまざまなページモードが表示されます。このチュートリアルでは、ログインページモードを選択します。
開始するには、「ログインページ」の見出しの下にある「ページを編集」をクリックします。
ステップ3：カスタムWordPressログインページテンプレートの選択
次の画面で、SeedProd の ログインページテンプレートのライブラリが表示されます。すべてのテンプレートはビジュアルビルダーで編集可能です。
「ログイン」フィルターをクリックして、すべてのログインページテンプレートを表示します。気に入ったテンプレートにカーソルを合わせ、チェックマークアイコンをクリックします。このガイドでは、「ログインページ 8」を選択します。
ポップアップが表示され、ページの名前と URL を設定するように求められます。「保存してページ編集を開始」をクリックして、ドラッグ＆ドロップエディターで開きます。
ステップ4：WordPressログインページのカスタマイズ
エディターは 2 つの部分で構成されています。ブロックとセクションは左側にあり、ログインページのライブプレビューは右側にあります。
コンテンツを追加するには、左側からブロックをドラッグしてページにドロップします。数回のクリックで、ページの上部にロゴを追加できます。
ブロックをクリックして編集します。ログインフォームをクリックすると、左側に SeedProd のログインブロック設定が開きます。
ここで、フォームラベルを編集したり、名前とパスワードフィールドを表示または非表示にしたり、ボタンのテキストを変更したりできます。
「テンプレート」タブをクリックして、いくつかのフォームスタイルから選択します。1 つを選択すると、コードなしで即座にフォームに適用されます。
ボタン、カラム、画像を追加してデザインを完成させることができます。ユーザーに素早くサインインしてもらいたい場合は、ここにGoogleやFacebookでログインできるソーシャルログインボタンを追加することもできます。
SeedProdには、ヘッダーやフッターブロックのようなエリアをブロックごとに構築する必要がないように、既製のセクションも用意されています。セクションタブをクリックして閲覧してください。
ページ全体のフォント、色、背景を一度に設定するには、右下隅の歯車アイコンをクリックしてグローバル設定を開きます。
フォントタブの下で、ドロップダウンメニューからヘッダーと本文のフォントと太さを変更します。
フォントテーマボタンをクリックして、うまく組み合わせられたものを閲覧し、ワンクリックで追加します。
カラーピッカーで、リンク、ヘッダー、テキスト、ボタン、背景の色を設定します。
または、カラーパレットボタンをクリックして、20以上の既製のスキームから選択します。
背景セクションは、ページ背景を処理します。単色、グラデーション、または全幅画像を設定します。
ゴミ箱アイコンをクリックして既存の画像を削除し、自分の画像を使用をクリックしてコンピューターまたはメディアライブラリから新しい画像を選択します。
変更を保存するには、必ず保存をクリックしてください。
ステップ5：WordPressログインページの設定を構成する
デザインが整ったら、いくつかのオプションを設定します。メールアドレスを収集するためにオプトインフォームを追加した場合は、まずメールマーケティングサービスを接続します。
上部にある接続タブをクリックし、メールサービスを選択して、手順に従ってアカウントをリンクします。
SeedProdは、Constant Contact、ConvertKit、AWeber、Mailchimpなどの人気のメールニュースレターサービスと統合されています。
まだメールプロバイダーをお持ちでないですか？SeedProdの購読者管理機能は、サイトにサインアップを保存します。SeedProd » Subscribersの下で表示します。
次に、ページ設定タブをクリックします。そこから調整できます：
- 一般：ページ名とURLを変更し、下書きまたは公開に設定します。
- SEO：All in One SEOのようなSEOプラグインを使用して、ページタイトルとメタディスクリプションを編集します。
- アナリティクス：MonsterInsightsのようなプラグインでパフォーマンスを追跡します。
- スクリプト：Facebookピクセルのような追跡またはリターゲティングスクリプトを追加します。
次に進む前に保存をクリックしてください。
ステップ6：ログインページがモバイルフレンドリーであることを確認する
公開するすべてのページはモバイル対応である必要があります。そうでないと、電話ユーザーがログインしにくくなります。SeedProdのテンプレートはレスポンシブであり、プレビューツールで確認できます。
画面下部にあるモバイルプレビューアイコンをクリックして、電話ユーザーがページを見るのと同じようにページを表示します。
どちらのビューでも編集を続けることができ、SeedProdは両方の変更を保存します。
ステップ7：カスタムWordPressログインページを公開する
ページに満足したら、緑色の保存ボタンの横にある下矢印をクリックし、公開を選択します。
ポップアップでページが公開されたことを確認します。ライブページを表示をクリックして表示します。
最後のステップは、ログインページモードをオンにすることです。ビルダーを終了し、ログインページの見出しの下にあるトグルをアクティブに切り替えます。
これで、WordPressログインページにアクセスする人は誰でもカスタムデザインを見ることができます。
WPFormsを使用してWordPressログインページをカスタマイズする
2番目の方法では、WordPress向けの最高のドラッグ＆ドロップフォームビルダーであるWPFormsを使用します。User Registration Formアドオンでサイトのログインフォームを作成できることは、あまり知られていないかもしれません。
何百万人ものサイトがWPFormsを使用してよりスマートなフォームを作成しているため、安心してご利用いただけます。WPFormsは、SeedProdと同じAwesome Motiveファミリーの製品です。
完全なページではなくログインフォームが必要な場合は、WPFormsを使用してWordPressカスタムログインフォームを作成する方法に関するこのガイドに従ってください。パスワード紛失リンクの追加や、ショートコードでのフォームの表示についても説明しています。
WordPressログインページを手動でカスタマイズする方法
プラグインなしでWordPressのログインページをカスタマイズできますか？はい。テーマのfunctions.phpファイルまたはサイト固有のプラグインにコードを追加できますが、コードに慣れている必要があり、ビジュアルビルダーよりも制御が少なくなります。
この操作が初めての場合は、サイトを誤って破損しないように、WordPressにコードスニペットを追加する方法に関するこのガイドをお読みください。
以下のスニペットは、ログイン画面のスタイルを変更し、ロゴを入れ替えます。ブランドに合わせて色値とロゴパスを編集し、functions.phpに追加してください。
// Custom WordPress login page styles
function clp_login_head() { ?>
<style>
/* Replace the default logo */
.login h1 a {
background-image: url('https://example.com/wp-content/uploads/your-logo.png');
background-size: contain;
width: 320px;
height: 80px;
}
/* Link colors */
.login #nav a,
.login #backtoblog a { color: #0073aa !important; }
/* Submit button */
.login .button-primary {
background: #0073aa;
border-color: #0073aa;
}
</style>
<?php }
add_action( 'login_head', 'clp_login_head' );
// Point the logo link to your home page instead of wordpress.org
function clp_login_url() { return home_url(); }
add_filter( 'login_headerurl', 'clp_login_url' );
// Change the logo hover/title text
function clp_login_title() { return get_bloginfo( 'name' ); }
add_filter( 'login_headertext', 'clp_login_title' );これにより、既存のログインページのロゴ、リンク先、フォームの色が変更されます。コードを完全に避けたい場合は、上記のSeedProdの方法でビジュアルエディターで同じ作業ができます。
プラグインなしでWordPressのログインフォームをどこにでも表示する
プラグインやウィジェットなしで、任意のページまたはテンプレートにWordPressログインフォームを表示するには、テーマテンプレートファイルにこれを追加します。
<?php wp_login_form(); ?>これにより、コードを配置した場所に標準のログインフォームが出力されます。ラベル、リダイレクト、フィールドオプションをカスタマイズするには、代わりに引数を渡します。
<?php
$args = array(
'echo' => true,
'redirect' => home_url(), // where to send users after login
'form_id' => 'loginform',
'label_username' => __( 'Username' ),
'label_password' => __( 'Password' ),
'label_remember' => __( 'Remember Me' ),
'label_log_in' => __( 'Log In' ),
'remember' => true,
);
wp_login_form( $args );
?>このフォームの周りのCSSを変更して、サイトの他の部分と一致させることができます。
WordPressのログインロゴを変更するにはどうすればよいですか？
常に完全なカスタムページが必要なわけではありません。ロゴとその背後にあるリンクを変更するだけで十分な場合もあり、無料プラグインでコードなしで処理できます。
Colorlib Login Customizerプラグインをインストールしてアクティブ化します。次に、[外観] » [カスタマイズ]に移動し、新しいColorlib Login Customizer項目をクリックします。
カスタマイザーは、左側に設定、右側にライブプレビューが表示されたログイン画面を読み込みます。[ロゴオプション]タブをクリックします。
そこから、WordPressロゴを非表示にしたり、独自のロゴをアップロードしたり、URLとテキストを変更したりできます。ロゴのサイズ、幅、高さも調整できます。
列、背景画像、カスタムカラーでさらにカスタマイズできます。新しいロゴに満足したら、変更を公開します。
カスタムログインページを保護するにはどうすればよいですか？
ブランド化されたログインページは、より目立つターゲットにもなるため、見た目が整ったら強化する価値があります。いくつかの手順で、ブルートフォース攻撃やボットを削減できます。
- ログインURLを変更する：ログインを明白なwp-login.phpから移動させます。WordPress管理ログインURLを変更する方法はこちらです。
- ログイン試行回数を制限する：パスワードを試行できる回数を制限し、ロックアウトすることで、ほとんどのブルートフォース攻撃をブロックします。
- 一般的なエラーメッセージを使用する：デフォルトの「無効なユーザー名」は、攻撃者に正しい半分を伝えます。より曖昧なメッセージは、より少ない情報を提供します。
- 2要素認証を追加： パスワードに加えて第2のコードがあれば、パスワードが盗まれてもそれだけではログインできなくなります。
自分のサイトでは、ログインURLを変更することが最初に行うことです。これにより、ほとんどの自動攻撃はフォームに到達する前に阻止されます。
カスタムログインページをテストするにはどうすればよいですか？
完了とみなす前に、簡単なテストを実行して、タイプミスでユーザーがロックアウトされないようにしてください。私は常にログアウトして、実際の訪問者のようにフレッシュな状態でページを試します。
- ページの読み込み： ページが壊れた要素なしでクリーンに読み込まれることを確認してください。
- ロゴとデザイン： 新しいロゴとスタイリングが期待どおりに表示されることを確認してください。
- ログインテスト： ユーザー名とパスワードでログインし、機能することを確認してください。
- エラーメッセージ： 間違った認証情報を入力し、エラーが正しく表示されることを確認してください。
- パスワードを忘れた場合： リセットをトリガーし、機能するリンクを含むメールが届くことを確認してください。
- カスタムURL： カスタムURLを設定した場合は、新しいログインページを指していることを確認してください。自分のURLがどこにあるかわかりませんか？WordPressのログインURLを見つける方法はこちらです。
- レスポンシブ： モバイル、タブレット、デスクトップでページを開き、どこでも正しく表示されることを確認してください。
WordPressログインページをカスタマイズするFAQ
プラグインなしでWordPressのログインページをカスタマイズできますか？
はい。テーマのfunctions.phpファイルまたはサイト固有のプラグインにCSSといくつかのフックを追加することで、既存のログイン画面を再スタイル設定できます。ページビルダーをインストールせずに、ロゴ、その下のリンク、フォームの色を変更できます。
トレードオフは、コードに慣れている必要があることと、ビジュアルツールよりもデザインの制御が少なくなることです。コードなしで完全に再デザインする場合は、SeedProdのようなビルダーの方が簡単です。
コードなしでWordPressのログインロゴを変更するにはどうすればよいですか？
Colorlib Login Customizerのような無料のログインカスタマイザープラグインをインストールし、[外観] » [カスタマイズ]に移動して設定を開きます。[ロゴオプション]タブから、WordPressロゴを非表示にしたり、独自のロゴをアップロードしたり、リンクとサイズを設定したりできます。
すべてがライブプレビューで更新されるため、公開する前に新しいロゴを確認できます。SeedProdのログインページモードでは、ページ全体を再デザインしたい場合にロゴブロックをドロップすることもできます。
WordPressのログインページをカスタマイズしても安全ですか？
はい、信頼できるプラグインまたは慎重なコードを使用する場合、ログインページのカスタマイズは安全です。ページの見た目が変わるだけで、WordPressがユーザーを認証する方法は変わらないため、デザイン自体によってセキュリティが弱まることはありません。
カスタムページは、実際の保護を追加する良い機会でもあります。ログインURLの変更、ログイン試行回数の制限、2要素認証の有効化はすべて、ブルートフォース攻撃のリスクを軽減します。
WordPressのログインページにソーシャルログインを追加するにはどうすればよいですか？
ソーシャルログインを使用すると、ユーザーは個別のWordPressパスワードの代わりに、既存のGoogleまたはFacebookアカウントでサインインできます。それらのサービスに接続する専用のソーシャルログインプラグインで追加します。
ユーザーは別のパスワードを作成して覚えておく必要がなくなるため、サインアップのハードルがカットされます。プラグインがセットアップされると、標準フォームの横にあるカスタムログインページにソーシャルログインボタンを配置できます。
WordPressログインページのデザインをカスタマイズしましょう
標準のログイン画面が会員の皆様をお迎えする必要はもうありません。SeedProdを使えば、コードを書かずに色、フォント、ロゴ、レイアウトを変更でき、わずか数分でブランド化されたログインページを公開できます。
SeedProdで始めましょう。ログインページをリブランドしましょう。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
