So erstellen Sie einen Kommentarschalter für Ihre Divi-Blog-Post-Vorlage

Veröffentlicht: 2020-11-11

Kommentare sind ein wichtiger Bestandteil jeder Blog-Post-Vorlage. Für einige Besucher kann ein langer Kommentarbereich jedoch zu einem Problem werden, wenn sie versuchen, durch den Rest des Inhalts des Beitrags zu scrollen. Das Erstellen eines Kommentarumschalters ist eine großartige Lösung für dieses Problem. Indem Sie Benutzern die Möglichkeit geben, die Kommentare umzuschalten (ein- oder auszublenden), können Sie die Benutzererfahrung verbessern, indem Sie zunächst eine prägnantere Version Ihres Beitrags bereitstellen und ihnen die Möglichkeit geben, die Kommentare jederzeit anzuzeigen oder auszublenden.

In diesem Tutorial zeigen wir Ihnen, wie Sie einen Kommentarschalter für Ihre Kommentare in der Divi-Blogpost-Vorlage erstellen. Sobald wir die Kommentar-Umschaltleiste mit dem Divi Builder erstellt haben, fügen wir den erforderlichen Code hinzu, um den Kommentarbereich anzuzeigen/auszublenden, wenn Sie auf die Umschaltleiste klicken.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Laden Sie die Vorlage KOSTENLOS herunter

Um die Vorlage zum Umschalten von Kommentaren aus diesem Tutorial in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter
Kostenlos herunterladen

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

So laden Sie die kostenlose Download-Vorlage hoch

Gehe zum Divi Theme Builder

Um die Vorlage hochzuladen, navigieren Sie zum Divi Theme Builder im Backend Ihrer WordPress-Website.

Blogpost-Vorlage für Divi's Copywriter Layout Pack

Website-Vorlage hochladen

Dann sehen Sie in der oberen rechten Ecke ein Symbol mit zwei Pfeilen. Klicken Sie auf das Symbol.

Blogpost-Vorlage für Divi's Copywriter Layout Pack

Navigieren Sie zum Import-Tab, laden Sie die JSON-Datei hoch, die Sie in diesem Beitrag herunterladen konnten, und klicken Sie auf 'Divi Theme Builder-Vorlagen importieren'.

Blogpost-Vorlage für Divi's Copywriter Layout Pack

Divi Theme Builder-Änderungen speichern

Nachdem Sie die Datei hochgeladen haben, sehen Sie eine neue Vorlage mit einem neuen Textbereich, der All Posts zugewiesen wurde. Speichern Sie die Änderungen im Divi Theme Builder, sobald die Vorlage aktiviert werden soll.

divi Texter-Blog-Post-Vorlage

Kommen wir zum Tutorial, damit wir lernen können, dieses Ding von Grund auf neu zu bauen, oder?

So erstellen Sie einen Kommentarschalter für Ihre Divi-Blog-Post-Vorlage

Hochladen der Theme Builder Pack 5 Blogpost-Vorlage

Um zu beginnen, werden wir eine Starthilfe für das Design erhalten, indem wir eine unserer vorgefertigten Blog-Post-Vorlagen hinzufügen. Um die Vorlage in den Theme Builder zu importieren, müssen Sie Folgendes tun:

  1. Navigieren Sie zum Divi Theme Builder
  2. Klicken Sie oben rechts auf der Seite auf das Portabilitätssymbol.
  3. Wählen Sie im Popup-Fenster Portabilität die Registerkarte Importieren aus.
  4. Laden Sie die Produktvorlagendatei von Divi Divi Theme Builder 5 herunter und importieren Sie sie. Nachdem Sie das Paket hier heruntergeladen haben, entpacken Sie die Datei und Sie finden die Datei „divi-theme-builder-pack-5-post-template.json“, die Sie importieren müssen.
  5. Klicken Sie auf die Schaltfläche Importieren
  6. Nachdem die Vorlage importiert wurde, klicken Sie auf das Bearbeitungssymbol im benutzerdefinierten Textbereich der Vorlage, um das Vorlagenlayout zu bearbeiten.

Erstellen der Kommentar-Umschaltleiste

Unser erster Schritt besteht darin, die Kommentarleiste zu erstellen, die die Kommentare schließlich ein- / ausblendet. Dazu erstellen wir eine neue Zeile über der Zeile, die das Kommentarmodul/Inhalt enthält. Dann füllen wir die Zeile mit dem Umschalttitel und dem Symbol, um das Design zu vervollständigen.

Zeile hinzufügen

Scrollen Sie zum Ende des vorgefertigten Layouts und fügen Sie eine neue Zeile direkt unter der Zeile mit dem Kommentarmodul hinzu.

Ziehen Sie die neue Zeile über die Kommentarzeile.

Fügen Sie dann die Beschriftung „Kommentar-Umschaltleiste“ zur Zeile in der Ebenenansicht hinzu, um sie später leichter erkennen zu können.

Zeileneinstellungen

Öffnen Sie die Einstellungen für die neue Zeile und fügen Sie folgenden Hintergrund hinzu:

  • Hintergrundfarbe: #624de3

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

  • Abgerundete Ecken: 10px

  • Dachrinnenbreite: 1
  • Maximale Breite: 1180px
  • Polsterung: 10px oben, 10px unten, 5% links, 5% rechts

Fügen Sie auf der Registerkarte "Erweitert" die folgende CSS-Klasse zur Zeile hinzu:

  • CSS-Klasse: et-comment-toggle

Fügen Sie dann das folgende benutzerdefinierte CSS zum Hauptelement hinzu: 

display:flex;
align-items:center;

Der Kommentar-Toggle-Titel

Um den Kommentar-Toggle-Titel hinzuzufügen, fügen Sie ein neues Textmodul in die linke Spalte ein.

Löschen Sie den simulierten Hauptteilinhalt und wählen Sie das Symbol "Dynamische Inhalte verwenden", wenn Sie mit der Maus über das Textkörper-Inhaltsfeld fahren.

Wählen Sie in der Dropdown-Liste "Anzahl der Post-Kommentare" aus.

Aktualisieren Sie in den Einstellungen für die Anzahl der Postkommentare Folgendes:

Fügen Sie im Eingabefeld Vorher den folgenden HTML-Code ein: 

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

Fügen Sie im Eingabefeld Nach den folgenden HTML-Code ein:

 comments)</span>

Wählen Sie NEIN unter der Option Link zum Kommentarbereich.

Speichern Sie dann die Einstellungen.

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

  • Textschriftart: Rubik
  • Schriftstärke des Textes: Mittel
  • Textschriftart: TT
  • Text Textgröße: 24px (Desktop), 18px (Tablet), 16px (Telefon)
  • Textzeilenhöhe: 1em
  • Textausrichtung: Links
  • Textfarbe: Hell

Das Kommentarleistensymbol

Um das Symbol für die Kommentarleiste zu erstellen, verwenden wir ein Klappenmodul, das nur das Symbol anzeigt, das wir verwenden möchten.

Fügen Sie der rechten Spalte der Zeile ein neues Klappenmodul hinzu.

Nehmen Sie den falschen Titel und den Hauptinhalt heraus und wählen Sie dann aus, um das Plus-Symbol zu verwenden.

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

  • Symbolfarbe: #ffffff
  • Symbolschriftgröße: 40px

  • Breite: 50px
  • Modulausrichtung: Rechts
  • Höhe: 50px
  • Bild-/Symbolanimation: Keine Animation

Fügen Sie auf der Registerkarte "Erweitert" das folgende benutzerdefinierte CSS zum Hauptelement hinzu: 

display:flex;
align-items:center;

Fügen Sie dann dem Blurb-Image ein weiteres CSS-Snippet hinzu: 

margin-bottom: 0px !important;

Optimieren der Zeile mit dem Kommentarmodul/Inhalt

Nachdem die Kommentarleiste nun komplett ist, müssen wir die vorhandene Zeile mit dem Kommentarmodul/-inhalt so optimieren, dass sie die erforderliche CSS-Klasse und den erforderlichen Abstand hat.

Zuerst können Sie der Zeile das Label „Comments Toggle Content“ hinzufügen. Öffnen Sie dann die Zeileneinstellungen und aktualisieren Sie die Auffüllung wie folgt:

  • Polsterung 4 % oben, 4 % unten, 4 % links, 4 % rechts

Fügen Sie auf der Registerkarte "Erweitert" die folgende CSS-Klasse zur Zeile hinzu:

  • CSS-Klasse: et-comment-toggle-content

Anschließend speichern und den Layout-Editor verlassen.

Und speichern Sie die Änderungen auch im Theme Builder.

Hinzufügen des benutzerdefinierten Codes

Der Code, den wir zum Hinzufügen der Umschaltfunktion für die Kommentare benötigen, kann einem Codemodul hinzugefügt werden.

Fügen Sie ein neues Codemodul unter dem Klappentextmodul in der Kommentarleiste hinzu, die wir zuvor erstellt haben.

Fügen Sie dann das folgende CSS ein und stellen Sie sicher, dass der Code in die style- Tags eingeschlossen ist. 

.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;
  }

Fügen Sie unter dem CSS, das in das dann eingefügt ist, fügen Sie das folgende CSS ein und stellen Sie sicher, dass der Code in die style- Tags eingeschlossen ist, fügen Sie den folgenden JQuery-Code hinzu, und stellen Sie sicher, dass es in das dann eingefügt wird, fügen Sie das folgende CSS ein und stellen Sie sicher, dass der Code im Skript eingeschlossen ist Stichworte. 

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');
    }
});

Über die Funktion zum Umschalten von Kommentaren

Dieser Kommentar-Umschalter verfügt über jQuery, der den Status des Umschalters (geöffnet oder geschlossen) während der Browsersitzung des Benutzers speichert. Wenn der Benutzer die Kommentare anzeigt und die Seite aktualisiert, bleiben die Kommentare geöffnet. Außerdem werden die Kommentare automatisch geöffnet/angezeigt, wenn ein Benutzer einen Kommentar abgibt oder auf das Kommentarformular antwortet. Dies ist wichtig, denn jedes Mal, wenn ein Benutzer einen Kommentar abgibt, lädt die Seite eine Schriftrolle zu seinem Beitrag. Tatsächlich wird der Kommentarschalter automatisch geöffnet/angezeigt, wenn ein Ankerlink auf der Seite verwendet wird, nur für den Fall, dass Sie auf einen bestimmten Kommentar von einer anderen Seite verlinken möchten.

Endergebnis

Um das Endergebnis zu überprüfen, öffnen Sie einfach einen beliebigen Live-Blog-Post auf Ihrer Website.

Abschließende Gedanken

Hoffentlich wird dieser Kommentarschalter nützlich sein, um das Design Ihrer Divi-Blog-Posts zu optimieren, damit Benutzer ein prägnanteres Layout des Posts genießen können, wenn sie dies wünschen. Und da Ihnen der bereitgestellte Code zusätzliche Funktionen bietet, um die Kommentare bei Bedarf sichtbar zu halten, haben Sie eine schöne Option zum Hinzufügen von Kommentarumschaltern zu jeder Divi-Blog-Post-Vorlage, ohne ein Plugin verwenden zu müssen.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!