カスタムWordPressログインページを作成する方法(Ultimate Guide)

あなたのウェブサイト用のカスタムWordPressログインページを作成しますか??


WordPressメンバーシップサイトやオンラインストアを運営している場合、多くのユーザーがログインページを表示することがよくあります。デフォルトのWordPressログインページをカスタマイズすると、ユーザーエクスペリエンスが向上します.

この究極のガイドでは、カスタムWordPressログインページを作成するさまざまな方法を紹介します。このチュートリアルを使用して、カスタムWooCommerceログインページを作成することもできます。.

サイトのカスタムWordPressログインページを簡単に作成する方法

このガイドから学ぶことは次のとおりです.

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

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

    デフォルトでは、ログインページにはWordPressのブランドとロゴが表示されます。小さなブログを運営している場合、または管理者アクセス権を持つのはあなただけの場合、これは問題ありません。.

    デフォルトのWordPressログイン画面

    ただし、Webサイトでユーザーの登録とログインが許可されている場合は、カスタムログインページにより優れたユーザーエクスペリエンスが提供されます.

    独自のロゴとデザインを使用すると、ユーザーがくつろ​​げるようになります。一方、Webサイトのように見えないデフォルトのWordPressログイン画面にリダイレクトすると、ユーザーにとって疑わしいように見える場合があります。.

    最後に、デフォルトのログイン画面には、ログインフォーム以外は何も含まれていません。カスタムログインページを作成することにより、それを利用して他のページや特別なプロモーションを宣伝できます.

    そうは言っても、カスタムWordPressログインページのデザインの例をいくつか見てみましょう.

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

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

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

    1. WPForms

    WPForms

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

    カスタムログインページは2列のレイアウトを使用します。左側の列にはログインフォームが含まれ、右側の列はプロモーションやその他の行動を促すフレーズを強調するために使用されます。上記の例では、ログインページを使用して年次報告書を共有しています。カスタムブランド、背景イラスト、ブランドカラーを使用して、独自のログインエクスペリエンスを作成します.

    2.ロックマイウェディング

    ロック・マイ・ウェディング

    Rock My Weddingのウェブサイトでは、ポップアップモーダルを使用してログインおよび登録フォームを表示しています。ポップアップを使用する利点は、ユーザーがページを離れることなくログインできることです。新しいページの読み込みからそれらを保存し、より高速なユーザーエクスペリエンスを提供します.

    3.ジャックリン・スティーブス

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

    Jacquelynne Steevesは、家の装飾、キルトの作成、パターン、刺繍などに関するコンテンツを作成者が公開する、アートとクラフトのWebサイトです。ログインページでは、ウェブサイトのテーマと右側のログインフォームが一致するカスタムの背景画像を使用しています.

    4.教会モーショングラフィックス

    教会モーショングラフィックス

    このモーショングラフィックデザイン会社のログインページでは、ビジネスの内容を反映したカラフルな背景を使用しています。ログイン画面で同じサイトヘッダー、フッター、ナビゲーションメニューを使用します。ログインフォーム自体は、背景が暗い非常にシンプルです。.

    5. MITSLoanマネジメントレビュー

    MITSLoan管理レビュー

    MITSLoan Management Review Webサイトは、デフォルトのWordPressログイン画面を使用します。独自のロゴを持つカスタムCSSを使用して、WordPressブランドを非表示にします.

    WordPressでフロントエンドのカスタムログインページを作成する

    WordPressでフロントエンドのカスタムログインページを作成するために使用できるWordPressプラグインがいくつかあります。 2つの異なるプラグインを紹介し、最適なプラグインを選択できます.

    Theme My Loginを使用したWordPressログインページの作成

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

    アクティベーション時に、テーママイログインは、カスタムログイン、ログアウト、登録、パスワードを忘れた、およびパスワードをリセットするアクションのURLを自動的に作成します.

    これらのWordPressログインURLは、次のURLでカスタマイズできます。 テーマログイン»一般 ページ。 「スラッグ」セクションまでスクロールして、プラグインがログインアクションに使用するこれらのURLを変更します。.

    ログインページのテーマ

    テーマ「マイログイン」では、ショートコードを使用してカスタムのログインおよび登録ページを作成することもできます。プラグインがユーザーを適切に検索してリダイレクトできるように、アクションごとにページを作成して、ここにページスラッグを追加するだけです。.

    ログインページから始めましょう.

    に向かう ページ»新規追加 新しい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プラグインであり、ユーザー登録アドオンにアクセスするには、少なくとも彼らのプロプランが必要です。 WPBeginnerユーザーは、WPFormsクーポンコードを使用して50%の割引を受けることができます。 セーブ50

    最初に行う必要があるのは、WPFormsプラグインをインストールしてアクティブにすることです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。.

    アクティベーション時に、あなたは訪問する必要があります WPForms»設定 ライセンスキーを入力するページ。この情報は、WPForms Webサイトのアカウントで確認できます。.

    WPFormsライセンス

    ライセンスキーを入力すると、アドオンをインストールできるようになります。先に行き、訪問 WPForms»アドオン ページとユーザー登録アドオンを探します.

    ユーザー登録アドオンをインストールする

    次に、[アドオンのインストール]ボタンをクリックして、アドオンをダウンロードしてアクティブ化します。これで、独自のカスタムログインフォームを作成する準備ができました.

    に向かう WPForms»新規追加 ページに移動し、「ユーザーログインフォーム」テンプレートまでスクロールします。続行するには、[Create a User Login Form]ボタンをクリックする必要があります.

    ログインフォームを作成する

    WPFormsは、必須フィールドを含むユーザーログインフォームをロードします。フィールドをクリックして、その周りに独自の説明やテキストを追加できます.

    WPFormsフォームビルダー

    他の設定も変更できます。たとえば、ボタンのタイトルとして「送信」を自動的に追加します。それをクリックして、代わりにログインに変更できます.

    フォーム設定

    また、ユーザーが正常にログインするとどうなるかを決定することもできます。 設定»確認 タブをクリックしてアクションを選択します.

    ログインしているユーザーをリダイレクトする

    ユーザーを他のURLにリダイレクトしたり、ホームページにリダイレクトしたり、現在ログインしているというメッセージを表示したりできます。.

    フォームの設定が完了したら、画面の右上隅にある[保存]ボタンをクリックして、フォームビルダーを閉じます。.

    WordPressページへのカスタムログインフォームの追加

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

    ログインフォームを追加するページを編集するか、新しいフォームを作成します。ページ編集画面で、WPFormsブロックをコンテンツ領域に追加します.

    WPFormsブロックを投稿に追加する

    次に、以前に作成したログインフォームを選択すると、WPFormsブロックがコンテンツ領域内に自動的にロードします.

    ログインフォームのプレビュー

    ログインフォームページの編集を続行するか、変更を保存して公開できます.

    WordPressログインフォームページのデザインをカスタマイズする

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

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

    ページビルダープラグインを使用すると、カスタムページレイアウトを作成し、Theme My LoginまたはWPFormsによって提供されるログインフォームウィジェットを追加できます。.

    下のスクリーンショットでは、人気のあるBeaver Builderプラグインを使用しています。全画面レイアウトで背景画像を使用し、2つの列を追加しました。 1つの列にテキストとボタンを追加しました。他の列では、WPFormsウィジェットを追加しました.

    ページビルダープラグインを使用してカスタムログインページを作成する

    Beaver Builderの利点は、100%ドラッグアンドドロップソリューションであることです.

    注意: すでにログインしているため、Theme My LoginプラグインとWPFormsプラグインの両方で、ログインフォームのライブプレビューが表示されない場合があります。 WPFormsプラグインには、フォーム設定でこれをオフにできるオプションがあります.

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

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

    ウェブサイト用に完全にカスタムのWordPressログインページを作成する必要はありません。実際、多くのWebサイトは、デフォルトのログインページを使用したまま、WordPressロゴとロゴURLを置き換えるだけです.

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

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

    最初に行う必要があるのは、Colorlib Login Customizerをインストールしてアクティブ化することです。プラグイン。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。.

    プラグインはアクティブ化されると、「Login Customizer」というラベルの付いた新しいメニュー項目をWordPress管理サイドバーに追加します。それをクリックすると、ログインカスタマイザが起動します.

    ログインカスタマイザ

    ログインカスタマイザは、左側にカスタマイズオプションがあり、右側にライブプレビューがあるデフォルトのWordPressログイン画面をロードします.

    WordPressのロゴを独自のロゴに置き換えるには、右側の[ロゴオプション]タブをクリックします。ここから、WordPressロゴを非表示にして、独自のカスタムロゴをアップロードし、ロゴのURLとテキストを変更できます.

    ログインページにカスタムロゴをアップロード

    このプラグインでは、デフォルトのWordPressログインページを完全にカスタマイズすることもできます。列、背景画像の追加、ログインフォームの色の変更などを行うことができます.

    基本的に、デフォルトのWordPressログインURLを変更せずにカスタムWordPressログインページを作成できます.

    完了したら、公開ボタンをクリックして変更を保存します。 WordPressログインページにアクセスして、カスタムログインフォームの動作を確認できます.

    カスタムロゴのあるカスタムWordPressログインページ

    プラグインなしでWordPressログインロゴとURLを変更する(コード)

    この方法では、ログイン画面のWordPressロゴを独自のカスタムロゴに手動で置き換えることができます.

    最初に、カスタムロゴをメディアライブラリにアップロードする必要があります。に行く メディア»新規追加 ページを作成してカスタムロゴをアップロード.

    画像をアップロードしたら、その横にある[編集]リンクをクリックします。これにより、メディアの編集ページが開き、ファイルのURLをコピーして、コンピューターの空のテキストファイルに貼り付ける必要があります。.

    次に、テーマのfunctions.phpファイルまたはサイト固有のプラグインに次のコードを追加する必要があります.

    function wpb_login_logo(){ ?>

    #login h1 a、.login h1 a {
    background-image:url(http://path/to/your/custom-logo.png);
    高さ:100px;
    幅:300px;
    background-size:300px 100px;
    background-repeat:no-repeat;
    padding-bottom:10px;
    }

    <?php}
    add_action( ‘login_enqueue_scripts’、 ‘wpb_login_logo’);

    background-image URLを前にコピーしたファイルURLに置き換えることを忘れないでください。カスタムロゴ画像に一致するように他のCSSプロパティを調整することもできます.

    WordPressログインページにアクセスして、実際のカスタムロゴを確認できます.

    カスタムロゴのあるWordPressログインページ

    このコードは、WordPressロゴのみを置き換えます。 WordPress.org Webサイトを指すロゴリンクは変更されません。.

    これを変えましょう.

    次のコードをテーマのfunctions.phpファイルまたはサイト固有のプラグインに追加するだけです。このコードは、前に追加したコードのすぐ下に追加できます.

    function wpb_login_logo_url(){
    return home_url();
    }
    add_filter( ‘login_headerurl’、 ‘wpb_login_logo_url’);

    function wpb_login_logo_url_title(){
    「あなたのサイト名と情報」を返す;
    }
    add_filter( ‘login_headertitle’、 ‘wpb_login_logo_url_title’);

    「Your Site Name and Info」をあなたのサイトの実際の名前に置き換えることを忘れないでください。ログイン画面のカスタムロゴがサイトのホームページを指すようになりました.

    それで全部です。この記事が、Webサイト用のWordPressログインページを作成するさまざまな方法を学習するのに役立つことを願っています。 WordPressのログインセキュリティを向上させるためのヒントについては、WordPressの究極のセキュリティガイドをご覧ください。.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map