Diviのコメントモジュールをログインユーザーのみに表示する方法

どのブログのコメント セクションも、素晴らしい議論の場になる可能性があります。 ただし、オンラインでコミュニティを構築したいと思うときが来るかもしれません。 Divi 条件オプション機能を使用すると、ブログに参加していないユーザーが投稿にコメントできないようにすることができます。 これは、会員限定のコミュニティや会員制サイトの特典として機能する可能性があります。

このチュートリアルでは、ログインしているユーザーのみに Divi のコメント モジュールを表示する方法を説明します。これにより、コミュニティと直接対話できるようになります。 この Divi チュートリアルのベースとして、Film Lab ブログ投稿テンプレートを使用します。

メンバー限定のコメントセクションを作成する方法

Divi の条件機能を使用すると、モジュール、行、列、セクションが相互作用できるパラメータのセットを選択できます。 今回の場合は、ユーザーのログイン状態に基づいて表示条件を設定したいと思います。 このチュートリアルでメンバー限定のコメント セクションを作成する手順の概要を次に示します。

1. ブログ投稿テンプレートを Divi テーマ ビルダーにアップロードします (またはブログ テンプレートを作成してください)。
2. ログインモジュールを含むメンバー限定のコメントセクションを作成します
3. ログインモジュールを含む行の表示条件を有効にする
4. コメントモジュールを含む行の表示条件を有効にする
5. シークレット ウィンドウでテンプレートを保存してテストする

変更前: 自由に投稿できるコメント セクション

これは、メンバー限定のコメント セクションを除いた Film Lab ブログ投稿テンプレートの外観です。 誰でもブログ投稿にアクセスして読んで、コメント セクションを操作できることに注意してください。

変更後: メンバー限定のコメント セクション

Divi の条件オプションを使用して、ログイン モジュールを表示できるようになりました。 ユーザーがログインすると、コメント モジュールと対話できるようになります。 ログイン ユーザーでない場合は、コメントを表示したり送信したりすることはできません。

ブログ投稿テンプレートのインストール

メンバー限定のコメント セクションの作成を開始する前に、使用するテンプレートをダウンロードする必要があります。 ここから Film Lab ブログ投稿テンプレートをダウンロードできます。

Diviテーマビルダーに移動します

テンプレートをアップロードするには、WordPress ウェブサイトのバックエンドにある Divi テーマ ビルダーに移動します。

ウェブサイトのテンプレートをアップロードする

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

インポートタブに移動し、この投稿でダウンロードできる JSON ファイルをアップロードし、「Import Divi Theme Builder Templates」をクリックします。

Divi テーマビルダーの変更を保存する

ファイルをアップロードすると、すべての投稿に新しい本文領域が割り当てられた新しいテンプレートが表示されます。 テンプレートをアクティブ化したい場合は、すぐに Divi テーマ ビルダーの変更を保存します。

テンプレートの変更

投稿テンプレートを開く

これでテンプレートがインストールされ、サイト上のすべてのブログ投稿に割り当てられたので、メンバー専用のコメント セクションの作成を開始できます。 まずテンプレートを開きます。

ログインモジュールの新しい行を追加

このテンプレートのコメント モジュールと同じセクション内に新しい行を追加します。 ワイヤーフレーム ビューに切り替えると簡単になります。 次に、緑色のプラス アイコンをクリックして、コメント モジュールを含む行の上に新しい行を追加します。

次に、行に 1 つの列を追加します。

ログインモジュールの追加

新しい行に、ログイン モジュールを追加します。 ユーザーが当社の Web サイトにログインして、会員限定のコメント セクションにアクセスできるようにしたいと考えています。 モジュールのモーダル ボックスをスクロールして、

ログインモジュールにテキストを追加

ログインモジュールにタイトルを追加しましょう。 また、このタイトルを使用して、コメント セクションにアクセスする前にユーザーにログインを求めることもあります。

スタイルログインモジュール

次に、Film Lab ブログ テンプレートのブランドに合わせて、新しく追加したログイン モジュールのスタイルを設定します。

ログインモジュールの背景の設定

ペイントバケツアイコンをクリックします。 これにより、モジュールの背景に塗りつぶし色 #ff4125 が追加されます。 次に、 「背景色の使用」トグルをクリックします。

背景

• 背景色: #ff4125
• 背景色の使用: はい

フィールドのスタイリング

フィールドの場合は、セクションと同じ色を背景に黒のテキストで使用します。

フィールド: 背景とテキストのスタイル

• フィールドの背景色: #eae9e4
• フィールドのテキストの色: #000000
• フィールド フォーカスの背景色: #eae9e4
• フィールドのフォーカスのテキストの色: #000000

また、フィールドに境界線を付け、角を丸くしないようにします。 これは、コメント モジュールのスタイルを模倣します。

フィールド: 背景とテキストのスタイル

• フィールドの角丸: 0
• フィールドの境界線のスタイル: すべて
• フィールドの境界線の幅: 1px
• フィールドの境界線の色: #000000
• フィールドの境界線のスタイル: 実線

タイトルのスタイリング

タイトルにはテンプレート全体で使用されているのと同じフォントが使用され、白になります。

タイトルテキスト

• タイトル見出しテキスト: H2
• タイトルのフォント: ムリッシュ
• タイトル文字色: #ffffff

さまざまな画面サイズで適切に表示されるように、タイトルにレスポンシブ サイズを追加していることに注目してください。

タイトルテキスト: フォントサイズ

• タイトルテキストのフォントサイズ (デスクトップ): 64px
• タイトルテキストのフォントサイズ (タブレット): 48px
• タイトルテキストのフォントサイズ (Mobiler): 48px

ボタンのスタイルを設定する

時間を節約するには、ボタン設定をコメント モジュールからログイン モジュールにコピーして貼り付けます。 コメントモジュールの設定アイコンをクリックします。

「デザイン」タブに移動します。 「ボタン」タブまで下にスクロールします。 ボタン タブを右クリックし、 [ボタン スタイルのコピー]をクリックします。

その後、コメント モジュールを終了します。 歯車アイコンをクリックしてログインモジュールに入ります。

もう一度、 「デザイン」タブをクリックし、 「ボタン」タブまで下にスクロールします。 次に、右クリックして [ボタン スタイルの貼り付け] を選択します。 出来上がり！ このボタンは、コメント モジュール内のボタンに似ています。

これで、ログイン モジュールのボタンがコメント モジュールのボタンのスタイルとほぼ一致しました。 やったー！

ログインモジュール行に表示条件を適用する

ログイン モジュールのスタイルを設定したら、最初の表示条件を設定できるようになりました。 会員限定のコメント欄を作成する場合、表示条件は重要です。 Divi は、これを可能にする表示条件機能内にさまざまなオプションを提供します。 歯車アイコンをクリックして、ログイン モジュールを含む行の設定を入力します。

行設定内の「詳細」タブをクリックし、 「条件」タブをクリックします。 次に、プラスアイコン をクリックします。

プラス アイコンをクリックすると、この行を表示 (または非表示) する条件について多くのオプションが表示されます。 「ユーザーステータス」まで下にスクロールし、「ログインステータス」をクリックします。

それが完了すると、別のモーダルボックスが届きます。 このモーダル ボックス内で、 「User is Logged In」というドロップダウンをクリックし、それを「User is Logged Out」に変更します。 これは、メンバー限定のコメントセクションに貢献するものです。 私たちはユーザーにサイトのメンバーになってもらいたいため、コメント セクションにアクセスするには有効なログイン資格情報を持っている必要があります。 有効な資格情報を持っていない場合は、サイトのコメント セクションにアクセスできません。

表示条件

• 次の場合にのみ表示: ユーザーがログアウトしている
• 有効条件: はい

表示条件を選択したら、モーダル ボックスの緑色のチェック ボタンをクリックして変更を保存してください。 キャッシュ プラグインに関する通知に注意してください。

新規会員限定コメント欄の表示条件を有効にする

このチュートリアルの最後の部分は、コメント モジュールを含む行の表示条件を設定することです。 これを行うには、歯車アイコンをクリックして行設定にアクセスします。

ログイン モジュールを含む行と同様に、行設定内で[詳細設定] タブをクリックし、次に[条件] タブをクリックしてプラス アイコンを押して表示条件を追加します。

コメント モジュールを含む行については、ユーザーがログアウトしている場合にのみ表示するのではなく、ユーザーがログインしている場合にのみ表示するようにします。

完成したメンバー限定のコメントセクション

コメント モジュールとログイン モジュールを含む行の両方に表示条件を追加したので、簡単なテストを実行できます。 シークレット ウィンドウまたはプライベート ブラウジング ウィンドウでサイト上のブログ投稿にアクセスします。

当社では、プライベート ブラウザまたはシークレット ウィンドウを使用して表示条件をテストします。これは、ウィンドウを使用すると、Web サイト内を閲覧中に一時的に Web サイトからログアウトされるためです。 通常の閲覧に戻り、Web サイトに「ログイン」すると、コメント セクションが表示されるはずです。 あるいは、WordPress Web サイトからログアウトして、完成した作品を確認することもできます。 このチュートリアルはコメントモジュールで行いましたが、これは Divi 内の任意のモジュール、行、列、またはセクションにネイティブに適用できます。 追加のプラグインは必要ありません。 時間をかけてさまざまな表示設定を組み合わせて、結果を確認してください。

結論は

WordPress Web サイトにコミュニティを作成すると、Web サイトを最もよく使用するユーザーの信頼を深めることができます。 これを行う方法は、メンバー同士が簡単に交流できるメンバー専用のコメント セクションを作成することです。 Divi には、これを簡単に行うためのツールと機能が組み込まれています。 Divi のネイティブ表示条件を使用すると、ユーザーが相互に対話することのみを許可することが可能です。 さらに、[デザイン]タブとDiviの完全な編集ツールを使用して、コメントモジュールを簡単にスタイル設定できます。 アジャイルなプライベート コミュニティを構築するために、Divi を使用するときにメンバーシップ プラグインをインストールする必要はありません。 Divi のコアの特定の機能を有効にすることで、ログイン ユーザーのコメント セクションを作成し、オンライン コミュニティを強化し、WordPress ウェブサイトを軽くて機敏に保つことができます。 Web サイトに簡単なメンバーシップ機能を追加するプラグインを利用する前に、Web サイトのさまざまな側面について Divi の表示条件を今すぐ確認することを検討してください。