如何僅向登錄用戶顯示 Divi 的評論模塊

已發表: 2023-09-13

任何博客的評論部分都可以成為熱烈討論的地方。 然而,有時您可能想建立在線社區。 通過 Divi 條件選項功能,我們可以阻止不屬於您博客的用戶對帖子發表評論。 這可以適用於僅限會員的社區或作為會員網站的一項福利。

在本教程中,我們將向您展示如何僅向登錄用戶顯示 Divi 的評論模塊,這將允許您直接與社區互動! 我們將使用 Film Lab 博客帖子模板作為本 Divi 教程的基礎。

目錄
  • 1如何創建僅限會員的評論部分
    • 1.1之前:一個自由的所有評論部分
    • 1.2之後:僅限會員的評論部分
  • 2安裝博客文章模板
    • 2.1進入 Divi 主題生成器
    • 2.2上傳網站模板
    • 2.3保存 Divi 主題生成器更改
  • 3修改模板
    • 3.1打開帖子模板
    • 3.2為登錄模塊添加新行
    • 3.3添加登錄模塊
    • 3.4為登錄模塊添加文本
    • 3.5樣式登錄模塊
    • 3.6將顯示條件應用於登錄模塊行
    • 3.7激活新會員評論區的顯示條件
  • 4已完成的僅限會員評論部分
  • 5結論

如何創建僅限會員的評論部分

Divi 的條件功能允許我們選擇一組參數,模塊、行、列和部分可以與這些參數進行交互。 對於我們的例子,我們需要根據用戶的登錄狀態設置顯示條件。 以下是我們在本教程中為實現會員專用評論部分而將採取的步驟的摘要:

  1. 將您的博客文章模板上傳到 Divi 主題生成器(或創建您的博客模板!)
  2. 創建包含登錄模塊的僅限會員的評論部分
  3. 激活包含登錄模塊的行的顯示條件
  4. 激活包含註釋模塊的行的顯示條件
  5. 在隱身窗口中保存並測試模板

之前:所有人都可以自由參與的評論部分

這就是電影實驗室博客帖子模板的樣子,沒有會員專用的評論部分。 請注意,任何人都可以登陸博客文章、閱讀它並與評論部分互動。

如何在登錄後僅向登錄用戶顯示 Divi 的評論模塊

之後:僅限會員的評論部分

使用 Divi 的條件選項,我們現在可以顯示登錄模塊。 用戶登錄後,就可以與評論模塊進行交互。 如果他們不是登錄用戶,則無法查看或提交評論。

如何在登錄前僅向登錄用戶顯示 Divi 的評論模塊

安裝博客文章模板

在開始創建會員專用評論部分之前,我們需要下載我們將使用的模板。 您可以在此處下載電影實驗室博客帖子模板。

從 Divi 博客下載 Film Lab 博客帖子模板

轉到 Divi 主題生成器

要上傳模板,請導航至 WordPress 網站後端的 Divi 主題生成器。

Divi 會議佈局包入門

上傳網站模板

然後,在右上角,您會看到一個帶有兩個箭頭的圖標。 單擊該圖標。

將頁眉和頁腳佈局導入 Divi 主題生成器

導航到導入選項卡,上傳您可以在本文中下載的 JSON 文件,然後單擊“導入 Divi 主題生成器模板”。

頁眉和頁腳佈局包的導入設置

保存 Divi 主題生成器更改

上傳文件後,您會注意到一個新模板,其中包含分配給所有帖子的新正文區域。 一旦您想要激活模板,請立即保存 Divi Theme Builder 更改。

在 Divi 主題生成器中保存導入的博客文章佈局

修改模板

打開帖子模板

現在我們的模板已安裝並分配給我們網站上的所有博客文章,我們可以開始構建僅限會員的評論部分。 我們首先打開模板。

開始在 Divi Builder 中編輯博客文章正文模板

為登錄模塊添加新行

在與此模板的評論模塊相同的部分中添加一個新行切換到線框視圖以使其更容易。 然後,單擊綠色加號圖標在包含評論模塊的行上方添加一個新行。

為登錄模塊添加新內容

接下來,我們將向該行添加一列。

將一列佈局添加到新添加的行

添加登錄模塊

在我們的新行中,我們將添加一個登錄模塊。 我們希望用戶登錄我們的網站以訪問會員專享的評論部分。 滾動瀏覽模塊模式框,直到看到

當我們開始創建僅限會員的評論部分時添加登錄模塊

添加文本到登錄模塊

讓我們向登錄模塊添加一個標題。 我們還將使用此標題要求用戶在訪問我們的評論部分之前登錄。

添加標題到登錄模塊

風格登錄模塊

現在,我們將設計新添加的登錄模塊的樣式,以匹配電影實驗室博客模板的品牌。

設置登錄模塊背景

單擊油漆桶圖標。 這將為模塊的背景添加 #ff4125 的純色填充顏色。 接下來,單擊“使用背景顏色”開關。

為會員專用評論部分添加背景顏色到登錄模塊

背景

  • 背景顏色:#ff4125
  • 使用背景顏色:是

設置字段樣式

對於字段,我們將使用與背景部分相同的顏色和黑色文本。

開始設置登錄模塊字段的樣式

領域:背景和文本樣式

  • 字段背景顏色:#eae9e4
  • 字段文本顏色:#000000
  • 字段焦點背景顏色:#eae9e4
  • 字段焦點文本顏色:#000000

我們還將給字段一個邊框,並且沒有圓角。 這將模仿評論模塊的樣式。

登錄字段邊框樣式

領域:背景和文本樣式

  • 字段圓角:0
  • 字段邊框樣式:全部
  • 字段邊框寬度:1px
  • 字段邊框顏色:#000000
  • 字段邊框樣式:實心

設置標題樣式

標題將使用整個模板中使用的相同字體,並且為白色。

設置登錄模塊標題文本的樣式

標題文字

  • 標題標題文本:H2
  • 標題字體:Mulish
  • 標題文字顏色:#ffffff

請注意,我們為標題添加了響應式大小,以便在不同的屏幕尺寸上看起來不錯。

設置登錄模塊的標題文本字體大小

標題文本:字體大小

  • 標題文本字體大小(桌面):64px
  • 標題文本字體大小(平板電腦):48px
  • 標題文本字體大小(Mobiler):48px

設置按鈕樣式

為了節省時間,請將按鈕設置從評論模塊複製並粘貼到我們的登錄模塊。 單擊評論模塊的設置圖標。

從評論模塊複製按鈕設置

導航至“設計”選項卡。 向下滾動到“按鈕”選項卡。 右鍵單擊按鈕選項卡,然後單擊複製按鈕樣式

再次從評論模塊複製按鈕設置

然後,退出評論模塊。 單擊齒輪圖標進入登錄模塊。

輸入登錄模塊設置

再次單擊“設計”選項卡並向下滾動到“按鈕”選項卡。 接下來,右鍵單擊並選擇“粘貼按鈕樣式” 。 瞧! 該按鈕看起來與評論模塊中的按鈕很接近。

將按鈕樣式從評論模塊粘貼到登錄模塊

現在,我們的登錄模塊的按鈕與評論模塊按鈕的樣式非常匹配。 耶我們!

登錄模塊按鈕樣式

將顯示條件應用於登錄模塊行

設置好登錄模塊的樣式後,我們現在可以將第一個顯示條件設置到位。 顯示條件對於創建僅限會員的評論部分至關重要。 Divi 在“顯示條件”功能中提供了各種選項來幫助實現這一點。 單擊齒輪圖標可輸入包含登錄模塊的行的設置。

使用登錄模塊輸入行的行設置

單擊行設置中的“高級”選項卡,然後單擊“條件”選項卡。 然後,單擊加號圖標

準備激活僅限會員評論部分的顯示條件

當您單擊加號圖標時,您將有許多選項來選擇顯示(或隱藏)該行的條件。 向下滾動到“用戶狀態”,然後單擊“登錄狀態”。

激活登錄模塊行的登錄狀態顯示條件

完成後,我們將收到另一個模式框。 在此模式框中,我們要單擊顯示“用戶已登錄”的下拉列表,並將其更改為“用戶已註銷” 。 這就是我們僅限會員的評論部分的貢獻。 由於我們希望人們成為網站會員,因此他們必須擁有有效的登錄憑據才能訪問我們的評論部分。 如果他們沒有有效的憑據,則無法訪問我們網站的評論部分。

僅當用戶註銷時才顯示此行

顯示條件

  • 僅在以下情況下顯示:用戶已註銷
  • 啟用條件:是

選擇顯示條件後,請確保通過單擊模式框的綠色複選按鈕來保存更改。 請注意有關緩存插件的通知。

保存顯示條件設置,為我們的會員專用評論部分做準備

激活新會員專用評論部分的顯示條件

本教程的最後一部分是為包含評論模塊的行設置顯示條件。 為此,請單擊齒輪圖標以訪問行設置。

編輯包含評論模塊的行以創建僅限會員的評論部分

與包含登錄模塊的行一樣,進入“行設置”後,我們將單擊“高級”選項卡,然後單擊“條件”選項卡並按加號圖標添加顯示條件。

激活註釋模塊行的顯示條件

對於包含評論模塊的行,我們希望它僅在用戶登錄時顯示,而不是僅在用戶註銷時顯示。

包含僅限會員評論部分的評論模塊的行的顯示條件

僅限會員評論部分已完成

現在我們已經向評論模塊和登錄模塊行添加了顯示條件,我們可以進行快速測試。 在隱身或私人瀏覽窗口中訪問您網站上的博客文章。

我們的會員僅在私人瀏覽器中評論部分

我們使用私人瀏覽器或隱身窗口來測試我們的顯示條件,因為該窗口會在我們瀏覽網站時暫時將我們從網站中註銷。 當您返回常規瀏覽並“已”登錄您的網站時,您應該會看到您的評論部分。 或者,您可以退出 WordPress 網站來查看您完成的作品! 雖然我們在評論模塊上完成了本教程,但這可以應用於 Divi 中本機的任何模塊、行、列或部分; 不需要額外的插件。 花一些時間混合和匹配不同的顯示設置,看看你會做出什麼。

綜上所述

在 WordPress 網站上創建社區可以加深最常使用您網站的用戶的信任。 實現此目的的一種方法是創建一個僅限會員的評論部分,使會員可以輕鬆地相互交互。 Divi 具有內置的工具和功能,使這一切變得輕而易舉。 借助 Divi 的本機顯示條件,可以允許您的用戶僅相互交互。 此外,您可以使用“設計”選項卡和 Divi 的完整編輯工具輕鬆設置評論模塊的樣式。 構建敏捷的私人社區,使用Divi時無需安裝會員插件。 通過激活 Divi 核心中的某些功能,您可以創建登錄用戶評論部分,增強您的在線社區,並保持您的 WordPress 網站輕便靈活。 在使用插件向您的網站添加簡單的會員功能之前,請考慮立即查看 Divi 的顯示條件以了解您網站的各個方面。