So zeigen Sie die geschätzte Lesezeit und die Anzahl der Wörter in Divi an (mit ReadingTime.js)

Einige Leute (einschließlich mir) wissen es zu schätzen, die Länge eines Blogbeitrags zu beachten oder, was noch wichtiger ist, wie viel Zeit das Lesen in Anspruch nehmen wird. Eine gute Möglichkeit, dies zu tun, besteht darin, oben in Ihren Blog-Posts eine geschätzte Lesezeit und/oder Wortzahl anzuzeigen. Sie sehen diese Funktion in beliebten Blogs wie medium.com. Es muss nicht aufdringlich sein oder den Benutzer von der Interaktion mit dem Inhalt ablenken. Aber es kann einen schönen UX-Boost für diejenigen hinzufügen, die viel Zeit damit verbringen, Inhalte im Web zu verschlingen.

In diesem Tutorial zeigen wir Ihnen eine schnelle und einfache Möglichkeit, Ihren Divi-Blog-Posts eine geschätzte Lesezeit und Wortzahl hinzuzufügen. Die Bibliothek von readingTime.js, die wir verwenden werden, ist einfach, leicht und einfach auf Ihrer Divi-Site zu implementieren. Außerdem haben Sie mehr Kontrolle über den Stil und die Platzierung der Lesezeit und die Platzierung der Wortzahl. All dies, ohne auf ein anderes Plugin angewiesen zu sein!

Wir werden die geschätzte Lesezeit und Wortzahl einer Blogpost-Vorlage mit dem Divi Theme Builder hinzufügen. Sobald es also der Vorlage hinzugefügt wurde, werden die Lesezeit und die Wortzahl in allen Ihren Beiträgen auf Ihrer Website gut angezeigt.

Lass uns anfangen.

Vorgeschmack

Hier ist ein kurzer Blick auf die Lesezeit und Wortzahl, die wir einer Beitragsvorlage in Divi hinzufügen werden.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es 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

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.

HERUNTERLADEN

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 Vorlage hoch

Gehe zum Divi Theme Builder

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

Website-Vorlage hochladen

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

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'.

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.

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

So zeigen Sie die geschätzte Lesezeit und die Anzahl der Wörter in Divi . an

Was Sie brauchen, um loszulegen

Um zu beginnen, 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. Wählen/Importieren Sie die Divi Business Consultant Post-Vorlagendatei (hier herunterladen).
5. Klicken Sie auf die Schaltfläche Importieren

Danach haben Sie eine Beitragsvorlage, die Sie bearbeiten können.

Hinzufügen von Text/HTML zur Beitragsvorlage

Um die Beitragsvorlage zu bearbeiten, klicken Sie auf das Bearbeitungssymbol im benutzerdefinierten Textbereich.

Fügen Sie im Post-Layout-Editor eine neue einspaltige Zeile unter der Zeile mit den Post-Metadaten im oberen Abschnitt des Layouts hinzu.

Wenn Sie fertig sind, fügen Sie der neuen Zeile ein Textmodul hinzu.

Fügen Sie in den Textmoduleinstellungen den folgenden HTML-Code in den Textkörper ein (über die Registerkarte Text):

<p>Reading Time: <span style="color: #edbb5f;" class="eta"></span> ( Word Count: <span style="color: #edbb5f;" class="word-count"></span> )</p>

Wichtig ist, dass das span-Tag mit der Klasse „eta“ schließlich die geschätzte Lesezeit des Beitragsinhalts anzeigt. Und das span-Tag mit der Klasse „word-count“ zeigt die Wortzahl des Post-Inhalts an.

Den Lesezeittext gestalten

Aktualisieren Sie auf der Registerkarte Design die Textstile wie folgt:

• Textschriftart: Poppins
• Schriftstärke des Textes: Fett
• Textschriftart: TT
• Text Textfarbe: #ffffff
• Text Textgröße: 14px (Desktop), 12px (Telefon)
• Text Buchstabenabstand: 2px
• Textausrichtung: Mitte

Die Reihe stylen

Wenn die Texteinstellungen abgeschlossen sind, öffnen Sie die Einstellungen für die Zeile und aktualisieren Sie Folgendes:

• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Aktualisieren Sie auf der Registerkarte Erweitert die Position:

• Position: Absolut
• Ort: unten links

Hinzufügen des Codes

Um den erforderlichen Code hinzuzufügen, um die geschätzte Lesezeit und Wortanzahl zu generieren, fügen Sie zunächst ein Codemodul unter dem Textmodul hinzu.

Wir werden die Bibliothek readingtime.js mit etwas benutzerdefiniertem Code verwenden, um auf unseren Beitragsinhaltsbereich, die Lesezeit-Zielklasse eta und die Wortzahl-Zielklasse word-count abzuzielen.

Fügen Sie den folgenden Code in den Codeblock ein und achten Sie darauf, den Code in die Skript- Tags einzuschließen:

(function($) {
$(document).ready(function(){
$('.et_pb_post_content').readingTime({
readingTimeTarget: $('.eta'),
wordCountTarget: $('.word-count'), 
wordsPerMinute: 275,
lang: 'en',
});
}); 
})( jQuery );

Über den Kodex

Die Zielklasse et_pb_post_content wird verwendet, um den Beitragsinhaltsbereich in Divi zu bestimmen , der den Beitragsinhalt enthält, damit der Code den Text kennt, den er zum Zählen und Abschätzen der Lesezeit benötigt. Wenn Sie beispielsweise body als Ziel verwenden, berechnet der Code den gesamten Inhalt/Text auf der gesamten Seite, nicht nur den Inhalt des Artikels.

Das readingTimeTarget wird der Klasse eta zugewiesen, die der Klasse entspricht, die wir dem span- Tag im Textmodul hinzugefügt haben. Und das wordCountTarget wird der word-count- Klasse zugewiesen, die wir dem anderen span- Tag im Textmodul hinzufügen.

Sie können auch den Wert für Wörter pro Minute (derzeit 275) aktualisieren, um das darzustellen, was Ihrer Meinung nach sein sollte. Dies wirkt sich natürlich auf die angezeigte Lesezeit aus. Nach meinen Recherchen liest der durchschnittliche Erwachsene etwa 300 Wörter pro Minute. Außerdem können Sie den Sprachwert jederzeit aktualisieren. Sie können beispielsweise 'en' durch 'fr' ersetzen, wenn der Text auf Französisch angezeigt werden soll). Weitere Informationen finden Sie in der Dokumentation zu github.

Speichern Sie das Vorlagenlayout und den Theme Builder.

Navigieren Sie dann zu Divi > Themenoptionen > Integrationen.

Fügen Sie dann die Bibliothek mit den Skript- Tags zum Kopfbereich hinzu:

src="https://cdnjs.cloudflare.com/ajax/libs/reading-time/2.0.0/readingTime.min.js"

Es sollte so aussehen…

Endergebnis

Jetzt müssen Sie nur noch einen Live-Blog-Post auf Ihrer Website besuchen, um die geschätzte Lesezeit und die Wortzahl oben im Post-Inhalt anzuzeigen.

Abschließende Gedanken

Das Hinzufügen einer geschätzten Lesezeit und Wortanzahl zu Ihren Divi-Blog-Posts ist überraschend einfach. Außerdem können Sie auswählen, wo das Element in Ihrer Beitragsvorlage angezeigt werden soll, und es mithilfe der integrierten Divi-Designeinstellungen gestalten. Hoffentlich wird dies nützlich sein!

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

Danke schön!