如何为您的 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 布局包！