Как создать переключатель комментариев для шаблона сообщения в блоге Divi

Комментарии - важная часть любого шаблона сообщения в блоге. Однако для некоторых посетителей длинный раздел комментариев может стать проблемой всякий раз, когда они пытаются прокрутить остальной контент в сообщении. Создание переключателя комментариев - отличное решение этой проблемы. Предоставляя пользователям возможность переключать (показывать или скрывать) комментарии, вы можете улучшить взаимодействие с пользователем, изначально предоставив более краткую версию вашего сообщения и предоставив им возможность показывать или скрывать комментарии, когда они пожелают.

В этом уроке мы покажем вам, как создать переключатель комментариев для комментариев шаблона поста в блоге Divi. После того, как мы создадим панель переключения комментариев с помощью Divi Builder, мы добавим необходимый код для отображения / скрытия области комментариев при нажатии панели переключения.

Давайте начнем!

Sneak Peek

Вот краткий обзор дизайна, который мы построим в этом уроке.

Скачать шаблон БЕСПЛАТНО

Чтобы получить доступ к шаблону сообщения переключения комментариев из этого руководства, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Как загрузить шаблон для бесплатной загрузки

Перейти в конструктор тем Divi

Чтобы загрузить шаблон, перейдите к Divi Theme Builder на бэкэнде вашего сайта WordPress.

Загрузить шаблон веб-сайта

Затем в правом верхнем углу вы увидите значок с двумя стрелками. Щелкните значок.

Перейдите на вкладку импорта, загрузите файл JSON, который вы смогли загрузить в этом посте, и нажмите «Импортировать шаблоны Divi Theme Builder».

Сохранить изменения Divi Theme Builder

После того, как вы загрузите файл, вы увидите новый шаблон с новой областью тела, которая была назначена для всех сообщений. Сохраните изменения Divi Theme Builder, как только захотите активировать шаблон.

Давайте перейдем к руководству, чтобы мы могли научиться создавать эту вещь с нуля, не так ли?

Как создать переключатель комментариев для шаблона сообщения в блоге Divi

Загрузка шаблона сообщения в блоге Theme Builder Pack 5

Для начала мы собираемся получить толчок к дизайну, добавив один из наших готовых шаблонов сообщений в блоге. Чтобы импортировать шаблон в Theme Builder, вам необходимо сделать следующее:

1. Перейдите к конструктору тем Divi
2. Щелкните значок переносимости в правом верхнем углу страницы.
3. Выберите вкладку «Импорт» во всплывающем окне «Переносимость».
4. Загрузите и импортируйте файл шаблона продукта Divi Divi Theme Builder 5. После того, как вы загрузите пакет здесь, разархивируйте файл, и вы найдете файл «divi-theme-builder-pack-5-post-template.json», который вам нужно будет импортировать.
5. Нажмите кнопку импорта.
6. После импорта шаблона щелкните значок редактирования в настраиваемой области тела шаблона, чтобы изменить макет шаблона.

Создание панели переключения комментариев

Нашим первым шагом является создание панели переключения комментариев, которая в конечном итоге будет отображать / скрывать комментарии. Для этого мы собираемся создать новую строку над строкой, содержащей модуль / контент комментариев. Затем мы заполним строку заголовком и значком переключателя, чтобы завершить дизайн.

Добавить ряд

Прокрутите готовый макет до конца и добавьте новую строку прямо под строкой, содержащей модуль комментариев.

Перетащите новую строку над строкой комментариев.

Затем добавьте метку «Панель переключения комментариев» к строке внутри представления слоев для облегчения идентификации в дальнейшем.

Настройки строки

Откройте настройки для новой строки и добавьте следующий фон:

• Цвет фона: # 624de3

На вкладке дизайна обновите следующее:

• Закругленные углы: 10 пикселей

• Ширина желоба: 1
• Максимальная ширина: 1180 пикселей
• Отступ: 10 пикселей сверху, 10 пикселей снизу, 5% слева, 5% справа.

На вкладке «Дополнительно» добавьте в строку следующий класс CSS:

• Класс CSS: et-comment-toggle

Затем добавьте следующий настраиваемый CSS к основному элементу:

display:flex;
align-items:center;

Заголовок переключателя комментариев

Чтобы добавить заголовок переключателя комментариев, добавьте новый текстовый модуль в левый столбец.

Удалите фиктивное содержимое основного текста и выберите значок «Использовать динамическое содержимое» при наведении курсора на поле содержимого основного текста.

В раскрывающемся списке выберите «Количество комментариев».

В настройках счетчика комментариев обновите следующее:

В поле ввода Перед вставьте следующий HTML-код:

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

В поле ввода После вставьте следующий HTML-код:

 comments)</span>

Выберите НЕТ в разделе "Ссылка на область комментариев".

Затем сохраните настройки.

На вкладке дизайна обновите следующее:

• Шрифт текста: Рубик
• Толщина шрифта текста: средний
• Стиль шрифта текста: TT
• Размер текста: 24 пикселей (рабочий стол), 18 пикселей (планшет), 16 пикселей (телефон)
• Высота текстовой строки: 1em
• Выравнивание текста: по левому краю
• Цвет текста: светлый

Значок панели переключения комментариев

Чтобы создать значок панели переключения комментариев, мы собираемся использовать модуль рекламного сообщения, который отображает только значок, который мы хотим использовать.

Добавьте новый модуль рекламного сообщения в правый столбец строки.

Выньте фиктивный заголовок и содержимое основного текста, а затем выберите использование значка плюса.

На вкладке дизайна обновите следующее:

• Цвет значка: #ffffff
• Размер шрифта значка: 40 пикселей

• Ширина: 50 пикселей
• Выравнивание модуля: справа
• Высота: 50 пикселей
• Анимация изображения / значка: без анимации

На вкладке Advanced добавьте следующий настраиваемый CSS к основному элементу:

display:flex;
align-items:center;

Затем добавьте еще один фрагмент CSS в Blurb Image:

margin-bottom: 0px !important;

Оптимизация строки с помощью модуля / содержимого комментариев

Теперь, когда панель переключения комментариев завершена, нам нужно оптимизировать существующую строку, содержащую модуль / содержимое комментариев, чтобы она имела необходимый класс CSS и интервал.

Во-первых, вы можете добавить к строке метку «Комментарии Toggle Content». Затем откройте настройки строки и обновите отступы следующим образом:

• Отступ 4% сверху, 4% снизу, 4% слева, 4% справа

На вкладке «Дополнительно» добавьте в строку следующий класс CSS:

• Класс CSS: et-comment-toggle-content

Затем сохраните и выйдите из редактора макета.

И также сохраните изменения в построителе тем.

Добавление собственного кода

Код, который нам нужен для добавления функции переключения для комментариев, можно добавить в модуль кода.

Добавьте новый модуль кода под модулем рекламного сообщения в строку панели переключения комментариев, которую мы создали ранее.

Затем вставьте следующий 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, завернутым в Then, вставьте следующий CSS, убедившись, что вы обернули код в теги стиля , добавьте следующий код JQuery, убедившись, что он заключен в Then, вставьте следующий 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 без использования плагина.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!