Diviでログイン/ログアウトボタンを使用してポップアップログインフォームを作成する方法

Diviでポップアップログインフォームを作成することは、サイトへのログインとログアウトのデザインとユーザーエクスペリエンスを向上させる効果的な方法です。 アイデアは、ユーザーがページのヘッダーにあるログインボタンをクリックするたびにポップアップボックスに表示されるログインフォームを作成することです。 これは、ユーザーをカスタムログインページにリダイレクトするよりも便利です。 さらに、Web開発者はログインフォームのカスタムデザインを（少なくとも最初のフロントエンドで）作成できます。これは、従来のWordPressログインエクスペリエンスのさわやかな代替手段になります。

このチュートリアルでは、Diviでカスタムログインボタンとログアウトボタンを備えたポップアップログインフォームを作成します。 Diviログインモジュールといくつかのボタンモジュールを使用して、ユーザーが別のページにリダイレクトされることなくログインおよびログアウトできるようにすることで、フロントエンドでシームレスなポップアップログインエクスペリエンスを作成します。

確かに、このソリューションはフロントエンドのログインフォームのデザインに限定されています。つまり、発生したエラー（またはユーザーがパスワードをリセットする必要がある場合）は、「wp-login」にある従来のWordPressログインフォーム/ページのデザインにリダイレクトされます。 .php」。 ただし、プラグインを使用せずにフロントエンドでカスタムログインデザインを探している場合は、これが解決策になる可能性があります。

始めましょう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

ログインボタンとログアウトボタンがそれぞれどのように変化するかに注目してください。 また、ユーザーがログインすると、現在のページに残ります。 さらに、ポップアップログインフォームには、ユーザーがログアウトしようとするたびに異なる「警告」コンテンツが表示されます。

テンプレートを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してファイルをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

無料テンプレートをアップロードする方法

テンプレートをアップロードするには、WordPressWebサイトのバックエンドにあるDiviThemeBuilderに移動します。

次に、右上隅に2つの矢印の付いたアイコンが表示されます。 アイコンをクリックします。

[インポート]タブに移動し、この投稿でダウンロードできたJSONファイルをアップロードして、[Diviテーマビルダーテンプレートのインポート]をクリックします。

ファイルをアップロードすると、デフォルトのWebサイトテンプレートに新しいグローバルヘッダーとフッターが表示されます。 テンプレートをアクティブ化したらすぐに、Diviテーマビルダーの変更を保存します。

ヘッダーテンプレートの要素を変更するには、テンプレートを開くことから始めます。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

このポップアップログインフォームとカスタムログイン/ログアウトボタンを任意のカスタムヘッダーに追加できますが、事前に作成されたヘッダーを使用してプロセスを高速化し、デザインをすぐに開始します。

まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。

クラウドファンディングヘッダーテンプレートをテーマビルダーにインポートする

開始するには、Diviのクラウドファンディングレイアウトパックの無料のヘッダーとフッターをダウンロードしてください。 これを行うには、ブログ投稿にアクセスしてください。

次に、メールアドレスを入力してzipファイルをダウンロードします。

その後、ファイルを解凍してインポートできるようにします。

ファイルをテーマビルダーにインポートするには、次の手順に従います。

1. Divi> ThemeBuilderに移動します。
2. 移植性アイコンをクリックします。
3. [移植性]ポップアップで、[インポート]タブを選択します。
4. 以前にダウンロードした解凍ファイルを選択してインポートします。
5. [インポート]ボタンをクリックします。
6. 編集アイコンをクリックして、インポートされたヘッダーを編集します。

Diviでカスタムログイン/ログアウトボタンを使用してポップアップログインフォームを作成する

パート1：ログインボタンとログアウトボタンの作成

グローバルヘッダーレイアウトエディターが表示されたら、レイヤービューを開いて、すべての要素を簡単に確認できるようにします。

ヘッダーセクションの一番上の行で、列3の[ログイン]ボタンの横にあるソーシャルメディアフォローモジュールを削除します。

ログインボタンの作成

ログインボタンを作成するには、一番上の行の列3にあるボタンモジュールの設定を開きます。

[デザイン]タブで以下を更新します。

• ボタンアイコン：ロックアイコン（スクリーンショットを参照）
• ボタンアイコンの配置：左
• ボタンのホバー時にアイコンのみを表示：いいえ
• パディング：上0.5em、下0.5em、左2em、右0.7em

[詳細設定]タブで、次のようにボタンに2つのカスタムCSSクラスを指定します。

• CSSクラス：et-toggle-popup et-popup-login-button

ログアウトボタンの作成

ログアウトボタンを作成するには、列3の既存のログインボタンを複製します。

2つのボタンを区別しやすくするために、それぞれのラベルを更新できます。 次に、column3の重複ボタンモジュールの設定を開きます。

ボタンのテキストを「ログアウト」に変更します。

[デザイン]タブで以下を更新します。

• ボタンアイコン：ロック解除アイコン（スクリーンショットを参照）

[詳細設定]タブで、[CSSクラス]ボタンを次のように更新します。

• CSSクラス：et-toggle-popup et-popup-logout-button

最初のクラスは同じままですが、2番目のクラスは異なります。

パート2：ポップアップセクションの作成

ボタンが完成したら、ログインフォームを含むポップアップとして機能するポップアップセクションを作成する準備が整いました。

ヘッダーセクションの下に、新しい通常のセクションを追加します。

次に、セクション内に1列の行を挿入します。

セクション設定

行を更新する前に、セクション設定を開きます。

[コンテンツ]タブで、セクションに白い背景色を付けます。

• 背景色：#ffffff

[デザイン]タブで、以下を更新します。

• 幅：100％
• 最大幅：800px（デスクトップ）、80％（タブレット）、100％（電話）
• セクションの配置：中央
• 高さ：自動（デスクトップとタブレット）、100％（電話）
• 最大高さ：100％
• パディング：0px上、0px下

• 丸みを帯びた角：10px
• ボックスシャドウ：スクリーンショットを参照
• ボックスシャドウの垂直位置：0px
• ボックスシャドウブラー強度：100px
• ボックスシャドウスプレッド強度：50px

[詳細設定]タブで、以下を更新します。

カスタムCSSクラスを追加します。

• CSSクラス：et-popup-login

カスタムCSSのスニペットをメイン要素に追加します。

overscroll-behavior: contain;

可視性と位置のオプションを更新します。

• 水平オーバーフロー：非表示
• 垂直オーバーフロー：自動
• 位置：固定
• 場所：センターセンター
• Zインデックス：999999

行設定

セクションの設定が完了したら、行の設定を開き、次の設計設定を更新します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：100％
• 最大幅：100％
• パディング：0px上、5vh下

パート3：閉じるポップアップアイコンの作成

クリック時にポップアップを閉じる/非表示にするポップアップを閉じるアイコンを作成するには、宣伝文句モジュールを使用します。

行に新しい宣伝文モジュールを追加します。

宣伝文モジュールの設定を開き、タイトルと本文のテキストを削除します。

次に、次のようにアイコンを追加します。

• アイコンを使用：はい
• アイコン：「x」アイコン（スクリーンショットを参照）

[デザイン]タブで、以下を更新します。

• アイコンの色：＃004e43
• 画像/アイコンの配置：中央揃え
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：50px
• 幅：50px
• モジュールの配置：右
• 高さ：50px

[詳細設定]タブで、次のようにCSSクラスを宣伝文に追加します。

• CSSクラス：et-toggle-popup

パート4：「ログアウト」および「ログイン」ログインフォームの作成

ログイン時とログアウト時にログインフォームのコンテンツとデザインを変えるために、2つの異なるログインフォームモジュールを作成します。 1つ目は、ユーザーが「ログアウト」するたびに表示されるログインフォームです。 2つ目は、ユーザーが「ログイン」するたびに表示されるログインフォームです。

「ログアウト」フォームの作成

「ログアウト」ログインフォームを作成するには、行内の宣伝文モジュールアイコンの下に新しいログインフォームモジュールを追加します。

ログインモジュールの設定を開き、以下を更新します。

[コンテンツ]タブ

• 現在のページにリダイレクト：はい
• 背景色を使用：いいえ

[デザイン]タブ

• フィールド背景色：rgba（0,78,67,0.05）
• フィールドフォーカスの背景色：rgba（0,78,67,0.15）
• テキストの配置：中央
• テキストの色：暗い

• タイトルフォント：ポピンズ
• タイトルフォントの太さ：半太字
• タイトルテキストの色：＃000000
• タイトルラインの高さ：1.3em
• ボディフォント：Work Sans

ボタンスタイルを更新するには、ヘッダーセクションの行の3番目の列に作成したログインボタンのボタンスタイルをコピーします。

次に、ボタンスタイルを[デザイン]タブの[ログイン設定]のボタンオプショングループに貼り付けます。

次に、ログインフォームのボタンスタイルを次のように更新します。

• ボタンのテキストの色：#ffffff
• ボタンの背景色：＃004e43
• ボタンの背景色（ホバー）：＃00683c
• ボタンの境界線の幅：0px
• ボタンのパディング：上15px、下15px

次に、サイズ設定オプションを次のように更新します。

• 幅：100％
• 最大幅：80％（デスクトップ）、90％（タブレット）、95％（電話）
• モジュールの配置：中央

詳細設定タブ

[詳細設定]タブで、CSSクラスとカスタムCSSを次のように更新します。

• CSSクラス：et-logged-out-form

ログインのカスタムCSS説明：

width: 100% !important;
float: none !important;

ログインフォームのカスタムCSS：

width: 100% !important;
padding: 0px !important;

これにより、デスクトップでもログインフォームモジュールが行/列の幅全体に広がるようになります。

「ログイン」フォームの作成

フォームの「ログアウト」バージョンが完成したので、ユーザーエクスペリエンスを最大化するために、さまざまなコンテンツとスタイルを持つ「ログイン」バージョンを作成する必要があります。

「ログアウト」ログインフォームを作成するには、既存のログインフォームを複製します。

次に、各ログインフォームのラベルをそれぞれ更新します。

複製の設定（「ログイン」フォーム）を開き、動的コンテンツとしてサイトタイトルをログインフォームモジュールのタイトルに追加します。

次に、サイトタイトルの動的コンテンツの設定を開き、次のように前後のコンテンツを更新します。

• 前：「ログアウトしようとしています」
• 後： "。 「「

これにより、サイトからログアウトしようとしているユーザーに適切な動的通知が作成されます。

次に、次のH3見出しを本文に追加します。

<h3>Are you sure?</h3>

ログイン時にログインフォームモジュールのコンテンツを見たことがあれば、カスタムの「ログアウト」リンクを含むカスタムメッセージがあることをご存知でしょう。 このリンクをボタンのようにスタイル設定するには、本文リンクのフォント/テキスト設定を次のようにカスタマイズする必要があります。

• 本文のオプションの下にあるリンクタブを選択します。
• リンクフォント：Work Sans
• リンクフォントの太さ：半太字
• リンクフォントスタイル：TT
• リンクテキストの配置：中央
• リンクテキストの色：#ffffff

注：ライブページでフォームを表示するまで、これらの結果をプレビューすることはできません。

[詳細設定]タブで、CSSクラスとカスタムCSSを次のように更新します。

• CSSクラス：et-logged-in-form

ログインフォームのカスタムCSS：

display:none;

パート5：カスタムコードの追加

ポップアップログインフォームの機能に必要なカスタムCSSとJQueryを追加するには、最後のログインフォームモジュールの下に新しいコードモジュールを作成します。

CSS

コードモジュールの設定を開き、次のCSSをコードボックスに貼り付けます。CSSが必要なスタイルタグでラップされていることを確認してください。

/* hide popup section */
.et-popup-login {
  display: none;
}

/* hide login button when logged in */
.logged-in .et-popup-login-button {
  display: none !important;
}

/* hide logout button when logged out */
.et-popup-logout-button {
  display: none !important;
}

/* show logout button when logged in */
.logged-in .et-popup-logout-button {
  display: inline-block !important;
}

/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
  display: none !important;
}

/* hide logged in form when logged out */
.et-logged-in-form {
  display: none !important;
}

/* show logged in form when logged in */
.logged-in .et-logged-in-form {
  display: block !important;
}

/* style logout link within logged in form */
.et-logged-in-form a {
  display: block;
  padding: 15px 1em;
  border-radius: 8px;
  background: #004e43;
  max-width: 400px;
  margin: 20px auto 0px;
}
.et-toggle-popup {
  cursor: pointer;
}

/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
  display: block !important;
}
body.et-fb .et-popup-login-button {
  display: inline-block !important;
}

CSSは、WordPressに組み込まれている「ログイン」クラスを使用して、対応するログイン/ログアウトボタンと「ログイン」/「ログアウト」ログインフォームをユーザーがログインまたはログインするたびに非表示/表示することに注意してください。ログアウトしました。

JQuery

終了スタイルタグの下に、次のJQueryを貼り付けて、必要なスクリプトタグでコードをラップしていることを確認します。

(function ($) {
  $(document).ready(function () {
    $(".et-toggle-popup").click(function (e) {
      e.preventDefault();
      $(".et-popup-login").fadeToggle(500);
    });
  });
})(jQuery);

このスニペットは、ユーザーがクラス「et-toggle-popup」（ログインボタンとログアウトボタンに加えて「x」の宣伝文句アイコン）を持つ3つの要素のいずれかをクリックするたびに、ポップアップセクションを切り替えるだけです。

それでおしまい！

テンプレートに加えた変更をテーマビルダーに保存することを忘れないでください。 保存すると、ライブページで結果を表示できます。

最終結果

デスクトップ、タブレット、電話での最終結果は次のとおりです。

ログインボタンとログアウトボタンがどのように変化するかに注目してください。 また、ユーザーがログインすると、ユーザーは現在のページに留まります。 さらに、ポップアップログインフォームには、ユーザーがログアウトしようとするたびに異なる「警告」コンテンツが表示されます。

最終的な考え

うまくいけば、このポップアップログインフォームとカスタムログイン/ログアウトボタンを作成することで、Diviのログインフォームを創造的な方法で使用する方法についての洞察が得られるでしょう。 各ログインフォーム（またはボタン）のデザインとコンテンツを自由に調整して、独自のWebサイトで独自のログインエクスペリエンスを作成してください。

コメントでお返事をお待ちしております。

乾杯！