如何為您的 Divi 博客帖子模板創建評論切換

已發表: 2020-11-11

評論是任何博客文章模板的重要組成部分。然而，對於一些訪問者來說，每當他們試圖滾動瀏覽帖子的其餘內容時，冗長的評論部分就會成為一個問題。創建評論切換是解決這個問題的一個很好的方法。通過讓用戶能夠切換（顯示或隱藏）評論，您可以通過最初提供更簡潔的帖子版本並為他們提供隨時顯示或隱藏評論的能力來改善用戶體驗。

在本教程中，我們將向您展示如何為您的 Divi 博客帖子模板評論創建評論切換。使用 Divi Builder 構建評論切換欄後，我們將添加必要的代碼以在單擊切換欄時顯示/隱藏評論區域。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

免費下載模板

要使用本教程中的評論切換帖子模板，您首先需要使用下面的按鈕下載它。要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

您已成功訂閱。請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

如何上傳免費下載模板

轉到 Divi 主題生成器

要上傳模板，請導航到 WordPress 網站後端的 Divi Theme Builder。

Divi 的 Copywriter Layout Pack 的博客文章模板

上傳網站模板

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

Divi 的 Copywriter Layout Pack 的博客文章模板

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

Divi 的 Copywriter Layout Pack 的博客文章模板

保存 Divi 主題生成器更改

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

divi 撰稿人博客文章模板

讓我們進入教程，這樣我們就可以學習從頭開始構建這個東西，好嗎？

如何為您的 Divi 博客帖子模板創建評論切換

上傳 Theme Builder Pack 5 博客帖子模板

首先，我們將通過添加我們預製的博客文章模板之一來快速啟動設計。要將模板導入 Theme Builder，您需要執行以下操作：

導航到 Divi 主題生成器
單擊頁面右上角的便攜性圖標。
在可移植性彈出窗口中選擇導入選項卡。
下載並導入 Divi Divi Theme Builder 5 產品模板文件。在此處下載包後，解壓縮文件，您將找到需要導入的“divi-theme-builder-pack-5-post-template.json”文件。
單擊導入按鈕
導入模板後，單擊模板自定義正文區域上的編輯圖標以編輯模板佈局。

創建評論切換欄

我們的第一步是創建最終顯示/隱藏評論的評論切換欄。為此，我們將在保存評論模塊/內容的行上方創建一個新行。然後我們將用切換標題和圖標填充該行以完成設計。

添加行

繼續並滾動到預製佈局的底部，並直接在包含評論模塊的行下方添加一個新行。

將新行拖到評論行上方。

然後將標籤“Comments Toggle Bar”添加到圖層視圖內的行，以便稍後輕鬆識別。

行設置

打開新行的設置並添加以下背景：

背景顏色：#624de3

在設計選項卡下，更新以下內容：

圓角：10px

天溝寬度：1
最大寬度：1180px
填充：頂部 10 像素，底部 10 像素，左 5%，右 5%

在高級選項卡下，將以下 CSS 類添加到該行：

CSS 類：et-comment-toggle

然後將以下自定義 CSS 添加到主元素：

display:flex;
align-items:center;

評論切換標題

要添加評論切換標題，請在左欄中添加一個新的文本模塊。

刪除模擬正文內容並在將鼠標懸停在正文內容框上時選擇“使用動態內容”圖標。

從下拉列表中，選擇“發表評論計數”。

在 Post Comment Count 設置中，更新以下內容：

在之前輸入框中粘貼以下 HTML：

Show/Hide Comments <span style="font-size:0.7em">(

在 After 輸入框中，粘貼以下 HTML：

 comments)</span>

在鏈接到評論區選項下選擇否。

然後保存設置。

在設計選項卡下，更新以下內容：

文字字體：魔方
文字字體粗細：中等
文字字體樣式：TT
文字文字大小：24px（桌面）、18px（平板電腦）、16px（手機）
文本行高：1em
文本對齊方式：左
文字顏色：淺

評論切換欄圖標

為了創建評論切換欄圖標，我們將使用一個僅顯示我們想要使用的圖標的模糊模塊。

將新的模糊模塊添加到行的右列。

取出模擬標題和正文內容，然後選擇使用加號圖標。

在設計選項卡下，更新以下內容：

圖標顏色：#ffffff
圖標字體大小：40px

寬度：50px
模塊對齊：右
高度：50px
圖像/圖標動畫：無動畫

在高級選項卡下，將以下自定義 CSS 添加到主元素：

display:flex;
align-items:center;

然後再向 Blurb Image 添加一個 CSS 片段：

margin-bottom: 0px !important;

使用評論模塊/內容優化行

現在評論切換欄已經完成，我們需要優化包含評論模塊/內容的現有行，使其具有必要的 CSS 類和間距。

首先，您可以將標籤“評論切換內容”添加到該行。然後打開行設置並更新填充如下：

填充頂部 4%，底部 4%，左側 4%，右側 4%

在高級選項卡下，將以下 CSS 類添加到該行：

CSS 類：et-comment-toggle-content

然後保存並退出佈局編輯器。

並將更改保存到主題構建器。

添加自定義代碼

我們需要為註釋添加切換功能的代碼可以添加到代碼模塊中。

在我們之前創建的註釋切換欄行中的 blurb 模塊下添加一個新的代碼模塊。

然後粘貼以下 CSS，確保將代碼包裝在樣式標籤中。

.et-comment-toggle .et-pb-icon {
  transition: all 300ms;
  } 
.et-comment-toggle.open .et-pb-icon { /*rotate the plus icon 45 degrees when toggle opens*/
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  }
.et-comment-toggle-content { /* hide comment toggle content initially */
  display:none;
  }
.et-comment-toggle-content.ctc-active { /* show comment toggle content when active */
    display:block;
  }  
.et-fb .et-comment-toggle-content {
  display:block;
  }
.et-comment-toggle {
  cursor:pointer;
  }

在包裹的 CSS 下然後粘貼以下 CSS 確保將代碼包裹在樣式標籤中，添加以下 JQuery 代碼確保將其包裹在然後粘貼以下 CSS 確保將代碼包裹在腳本中標籤。

function isStorageAvailable(type) {
    try {
        var storage = window[type],
            x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            storage.length !== 0;
    }
}

jQuery(document).ready(function($) {
    var isSessionStorageAvailable = window.isStorageAvailable('sessionStorage');
    var $commentToggle = $('.et-comment-toggle');
    var $commentToggleContent = $('.et-comment-toggle-content');

    $commentToggle.on('click', function() {
        // Toggle content and add 'ctc-active' class:
        $commentToggleContent.slideToggle(300).toggleClass('ctc-active');

        // Add class to animate toggle icon:
        if ($commentToggleContent.hasClass('ctc-active')) {
            $commentToggle.addClass('open');
        } else {
            $commentToggle.removeClass('open');
        }

        // If storage is available, set item in browser session storage
        // (so we can know to open the toggle automatically
        // when user reloads the page).
        if (isSessionStorageAvailable) {
            $commentToggleContent.hasClass('ctc-active') ?
            sessionStorage.setItem('etCommentToggleEnabled','1'):
            sessionStorage.removeItem('etCommentToggleEnabled');
        }
    });

    // If storage is available, open toggle automatically
    // on page load if item is in browser session storage.
    // This allows the anchor links to work after adding
    // a comment or reply in the comment form.
    if (isSessionStorageAvailable) {
        '1' == sessionStorage.getItem('etCommentToggleEnabled') ?
        $commentToggleContent.addClass('ctc-active'):
        $commentToggleContent.removeClass('ctc-active');
    }

    // Open toggle if url has hash tag and no session storage.
    // This is will make sure the toggle is open for incoming
    // anchor links (from another page) to specific comments.
    if (window.location.hash) {
        $commentToggleContent.addClass('ctc-active');
        if (isSessionStorageAvailable) {
            sessionStorage.setItem('etCommentToggleEnabled','1');
        } else {
            sessionStorage.removeItem('etCommentToggleEnabled');
        }
    }

    // Add class to animate toggle icon if needed on page reload:
    if ($commentToggleContent.hasClass('ctc-active')) {
        $commentToggle.addClass('open');
    } else {
        $commentToggle.removeClass('open');
    }
});

關於評論切換功能

這個評論切換有 jQuery，它會在用戶的瀏覽器會話中記住切換的狀態（打開或關閉）。因此，如果用戶選擇顯示評論並刷新頁面，評論將保持打開狀態。此外，每當用戶在評論表單上提交評論或回复時，評論將自動打開/顯示。這很重要，因為每次用戶提交評論時，頁面都會重新加載他們提交的滾動條。事實上，只要在頁面上使用錨鏈接，評論切換就會自動打開/顯示，以防萬一您想從另一個頁面鏈接到某個評論。

最後結果

要查看最終結果，只需打開您網站上的任何實時博客文章。

最後的想法

希望此評論切換功能有助於簡化您的 Divi 博客文章的設計，以便用戶可以選擇更簡潔的文章佈局。而且，由於提供的代碼為您提供了在需要時保持評論可見的附加功能，因此您可以選擇將評論切換添加到任何 Divi 博客帖子模板，而無需使用插件。

我期待在評論中收到您的來信。

乾杯!

如何為您的 Divi 博客帖子模板創建評論切換

搶先看

免費下載模板

免費下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

如何上傳免費下載模板

轉到 Divi 主題生成器

上傳網站模板

保存 Divi 主題生成器更改

如何為您的 Divi 博客帖子模板創建評論切換

上傳 Theme Builder Pack 5 博客帖子模板

創建評論切換欄

添加行

行設置

評論切換標題

評論切換欄圖標

使用評論模塊/內容優化行

添加自定義代碼

關於評論切換功能

最後結果

最後的想法

您已成功訂閱。請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！