So fügen Sie eine Lesefortschrittsleiste zu WordPress-Beiträgen hinzu (3 einfache Wege)

Kennen Sie das Gefühl, wenn Sie einen langen Artikel online lesen und keine Ahnung haben, wie viel noch übrig ist? Das ist das Problem, das Lesefortschrittsleisten für Ihre WordPress-Besucher lösen.

Diese einfachen visuellen Indikatoren zeigen den Lesern genau an, wie viel von einem Artikel sie bereits gelesen haben, was sie ermutigen kann, weiterzulesen und auf Ihrer Seite zu bleiben. Es nutzt die gleiche Befriedigung, die man beim Abschließen von etwas mit einem klaren Endpunkt empfindet.

Wir verwenden hier bei WPBeginner keine Fortschrittsbalken, da unsere Tutorials so konzipiert sind, dass sie schnell durchsuchbar sind. Die meisten Leute springen direkt zu dem Abschnitt, den sie benötigen, anstatt alles von Anfang bis Ende zu lesen.

Aber wenn Sie längere Blogbeiträge, ausführliche Anleitungen oder detaillierte Artikel veröffentlichen, kann ein Lesefortschrittsbalken wirklich dazu beitragen, die Leute bei der Stange zu halten.

In diesem Leitfaden zeigen wir Ihnen drei verschiedene Möglichkeiten, einen auf Ihre WordPress-Website zu integrieren, egal ob Sie eine einfache Plugin-Lösung oder etwas Benutzerdefinierteres wünschen.

Wann Sie eine Lesefortschrittsleiste zu Ihren WordPress-Blogbeiträgen hinzufügen sollten

Für längere Blogbeiträge kann das Hinzufügen einer Lesefortschrittsleiste ein wertvolles Werkzeug sein, um die Leute auf Ihrer WordPress-Website zu halten. Sie kann den Lesern mitteilen, wie viel sie gelesen haben und wie viel noch übrig ist.

Leser scrollen eher weiter, wenn sie sehen, dass sie sich dem Ende des Artikels nähern. Eine Fortschrittsleiste kann sie motivieren, das Lesen zu beenden.

Außerdem verleiht ein Lesemeter Ihrem Inhalt einen Hauch von Interaktivität. Es kann das Lesen eher wie eine Reise mit einem klaren Ziel erscheinen lassen.

Es ist jedoch wichtig, Ihren Inhalt zu berücksichtigen. Unsere Tests haben gezeigt, dass Lesefortschrittsbalken am besten funktionieren, wenn Ihr Inhalt linear konsumiert werden muss. Das heißt, sie sind möglicherweise nicht notwendig für Websites wie unsere, die sich auf schnelle, übersichtliche Referenzmaterialien konzentrieren.

In diesem Sinne sehen wir uns an, wie Sie ganz einfach eine Lesefortschrittsleiste zu Ihren WordPress-Beiträgen hinzufügen können. Sie können die Schnelllinks unten verwenden, um zu Ihrer bevorzugten Methode zu springen:

• Methode 1: Ein benutzerdefiniertes Theme mit Lesefortschrittsanzeigen entwerfen
• Methode 2: Lesefortschrittsbalken mit einem kostenlosen Plugin hinzufügen
• Methode 3: Hinzufügen einer Lesefortschrittsleiste mit Code
• Bonustipps, um Ihre WordPress-Blog-Leser bei Laune zu halten

Methode 1: Ein benutzerdefiniertes Theme mit Lesefortschrittsanzeigen entwerfen

Eine Möglichkeit, eine Lesefortschrittsleiste in WordPress-Beiträgen hinzuzufügen, ist die Verwendung eines Theme-Builders mit einer Fortschrittsleistenfunktion. Auf diese Weise fügt sich das Design der Fortschrittsleiste nahtlos in den Rest Ihres Themes ein und ist somit angenehmer für das Auge.

Beachten Sie, dass diese Methode die Änderung Ihres Themes beinhaltet. Wir empfehlen sie daher nicht, wenn Sie mit Ihrem Theme zufrieden sind und es nicht bald wechseln möchten. In diesem Fall sollten Sie stattdessen Methode 2 (Plugin) oder Methode 3 (Code) verwenden.

Für diese Methode verwenden wir den Thrive Theme Builder. Neben einem Lesefortschrittsbalken bietet der Thrive Theme Builder Dutzende von Theme-Vorlagen für verschiedene Zwecke, von Blogs bis hin zu Unternehmenswebsites.

Das Beste daran ist, dass der Drag-and-Drop-Builder einfach zu bedienen ist und sich somit hervorragend für absolute Anfänger eignet.

Mehr über die Plattform erfahren Sie in unserem Thrive Themes Testbericht.

Ein Nachteil von Thrive Themes ist, dass es keine kostenlose Version gibt. Das gesagt, Sie können unseren Thrive Themes Gutscheincode verwenden, um bis zu 50% Rabatt auf Ihren ersten Kauf zu erhalten.

Schritt 1: Installieren Sie den Thrive Theme Builder

Der erste Schritt ist die Einrichtung des Thrive Theme Builders. Sie können auf dieses Plugin zugreifen, indem Sie sich auf der Website von Thrive Themes in Ihr Konto einloggen.

Laden Sie dann das Thrive Product Manager Plugin herunter und installieren Sie es. Weitere Informationen finden Sie in unserem Anfängerleitfaden zum Thema Installieren eines WordPress-Plugins.

Sobald das Plugin aktiv ist, klicken Sie im WordPress-Adminbereich auf Product Manager.

Klicken Sie dann auf die Schaltfläche 'In mein Konto einloggen', um Ihre WordPress-Website mit Ihrem Thrive Themes-Konto zu verbinden.

Danach sollten Sie nun eine Liste aller verfügbaren Thrive Themes Produkte in Ihrem Konto sehen.

Wählen Sie hier „Thrive Architect“ aus und aktivieren Sie das Kontrollkästchen „Produkt installieren“.

Dieses Page-Builder-Plugin funktioniert mit dem Theme-Builder zusammen, deshalb müssen wir es aktivieren.

Scrollen Sie als Nächstes zum Abschnitt „Thrive Theme Builder“ und aktivieren Sie das Kontrollkästchen „Theme installieren“.

Klicken Sie nun einfach auf „Ausgewählte Produkte installieren“.

Auf der nächsten Seite sehen Sie, dass Thrive Product Manager den Thrive Theme Builder installiert und aktiviert.

Wenn der Vorgang abgeschlossen ist, klicken Sie auf „Zum Theme Builder Dashboard gehen“.

Wählen Sie nun ein WordPress-Theme aus.

Wenn Sie nicht sicher sind, welche Sie wählen sollen, klicken Sie einfach auf die Schaltfläche 'Vorschau', um zu sehen, wie das Theme zuerst aussieht. Klicken Sie dann auf 'Wählen', sobald Sie Ihre Entscheidung getroffen haben.

Sie sollten nun zum Theme Builder Wizard gelangen.

Dieser Einrichtungsassistent führt Sie durch das Hochladen Ihres eigenen Logos, die Auswahl von Markenfarben, die Ihrem Theme hinzugefügt werden, und die Einrichtung der verschiedenen Strukturen und Vorlagen Ihres Themes.

Führen Sie den Einrichtungsassistenten aus, bevor Sie mit dem nächsten Schritt fortfahren.

Schritt 2: Fügen Sie Ihrer Einzelbeitragsvorlage eine Lesefortschrittsleiste hinzu

Nach der Einrichtung Ihres Themes fügen wir nun eine Lesefortschrittsleiste zu Ihrer Theme-Vorlage hinzu. Da wir die Lesemeterleiste nur in WordPress-Beiträgen anzeigen möchten, müssen wir nur die Einzelbeitragsvorlage bearbeiten.

Wechseln Sie dazu im Thrive Theme Builder zum Tab 'Vorlagen'. Suchen Sie dann die Vorlage 'Standardbeitrag' und klicken Sie auf 'Bearbeiten'.

Sie sollten sich nun im Theme Builder befinden. Es sollte eine linke Seitenleiste zur Bearbeitung Ihrer Vorlage, eine Vorschau der Vorlage selbst und eine kleine Symbolleiste auf der rechten Seite zum Hinzufügen weiterer Blöcke oder zum Ändern des Vorlagenstils geben.

Um den Lesefortschrittsbalken hinzuzufügen, scrollen Sie die linke Seitenleiste nach unten und suchen Sie die Einstellung 'Lesefortschrittsanzeige'. Klicken Sie einfach auf den Schalter, um ihn zu aktivieren.

Nach dem Hinzufügen des Fortschrittsbalkens sollten nun weitere Einstellungen zur Bearbeitung vorhanden sein.

Zuerst können Sie wählen, ob Sie die Fortschrittsleiste unter dem Header oder am oberen Rand des Ansichtsfensters (direkt über dem Header) hinzufügen möchten. Wenn Sie die erste Option wählen, müssen Sie sicherstellen, dass der Header auf 'sticky' (feststehend) eingestellt ist, was wir Ihnen später zeigen werden.

Als Nächstes können Sie die Farbe des Fortschrittsbalkens ändern. Klicken Sie dazu einfach auf die Farbauswahl.

Nun können Sie eine der Themenfarben auswählen, d. h. das vordefinierte Farbschema Ihres Themas. Oder Sie klicken auf 'Von Themafarbe lösen', um eine völlig andere Farbe zu wählen, die nicht Teil Ihres Themas ist.

Wenn Sie die Option „Von Theme-Farbe trennen“ wählen, können Sie auch die Deckkraft der Farbe anpassen.

Auf diese Weise können Sie anpassen, wie opak die Fortschrittsleiste im Verhältnis zu ihrem Hintergrund aussieht. Dennoch ist es am besten, die Farbe der Fortschrittsleiste nicht so grell zu gestalten, dass sie die Benutzer vom Lesen ablenkt.

Wenn Sie mit der Farbe zufrieden sind, klicken Sie einfach auf „Übernehmen“.

Schließlich können Sie die Höhe des Fortschrittsbalkens anpassen.

Der Theme Builder ermöglicht es Ihnen, die Größe der Leiste auf bis zu 10 Pixel einzustellen. Dies stellt sicher, dass die Fortschrittsleiste nicht zu groß aussieht. In diesem Sinne empfehlen wir eine Größe zwischen 5 und 10, damit die Fortschrittsleiste gut sichtbar ist.

Wenn Sie mit dem Aussehen der Leiste zufrieden sind, klicken Sie einfach auf 'Arbeit speichern', um Ihre Änderungen zu übernehmen.

Schritt 3: Machen Sie Ihren Header Sticky (Optional)

Wenn Sie Ihre Lesefortschrittsleiste unter dem Header anzeigen lassen möchten, müssen Sie diesen Schritt befolgen. Andernfalls können Sie ihn überspringen.

Scrollen Sie zuerst die linke Seitenleiste nach oben und klicken Sie auf 'Header'.

Eine andere Reihe von Einstellungen zum Anpassen des Headers sollte nun in der Seitenleiste erscheinen.

Scrollen Sie nach unten zum Abschnitt „Header“ und klicken Sie auf „Bearbeiten“.

Öffnen Sie nun den Tab „Scroll-Verhalten“.

Dann müssen Sie 'Sticky' auswählen. Je nach Ihrem Thema müssen Sie möglicherweise auch den Abstand vom oberen Bildschirmrand auf 1 Pixel ändern, damit die Fortschrittsleiste angezeigt wird.

Sie können die restlichen Einstellungen so belassen und unten auf „Fertig“ klicken.

Schritt 4: Hinzufügen einer Lesedaueranzeige (Optional)

Eine weitere Funktion von Thrive Theme Builder ist die Anzeige der geschätzten Lesezeit, um einen Beitrag von Anfang bis Ende zu lesen. Dies hilft den Benutzern zu sehen, wie lange es dauert, einen Artikel zu lesen, und ermöglicht es ihnen, Inhalte auszuwählen, die zu ihrer verfügbaren Zeit passen.

Klicken Sie zuerst auf den Block, der für die Anzeige Ihrer Post-Metadaten verantwortlich ist.

Dies ist der Teil Ihrer Single-Post-Vorlage, der Informationen wie den Autor des Blogbeitrags, Kategorien, Tags usw. anzeigt.

Klicken Sie dann in der Symbolleiste auf das Symbol für 'Dynamischer Text'.

Hier müssen Sie im ersten Dropdown-Menü 'Content' und im zweiten 'Reading time remaining (in minutes)' auswählen.

Klicken Sie danach auf „Einfügen“.

Sie sollten nun neuen Text sehen, der besagt: „0 Minuten verbleibend“ in den Post-Metadaten. Sie können diesen Text nach Belieben anpassen.

In unserem Fall haben wir beschlossen, das Wort 'verbleibend' zu entfernen.

Wenn Sie fertig sind, vergessen Sie nicht, auf „Arbeit speichern“ zu klicken.

Schritt 5: Vorschau Ihrer Lesefortschrittsanzeigen

Nachdem Sie nun Ihre Einstellungen für die Fortschrittsanzeige konfiguriert haben, können Sie Ihren Blogbeitrag besuchen, um die Leiste in Aktion zu sehen.

Wenn Sie eine Vorschau anzeigen möchten, anstatt den Balken live auf Ihrer Website zu sehen, können Sie einfach unten auf die Schaltfläche „Vorschau“ klicken. Thrive Theme Builder ermöglicht es Ihnen, Ihre Website in der Vorschau auf Desktop, Tablet und Mobilgeräten anzuzeigen.

Sie können gerne so viele Änderungen vornehmen, wie nötig sind.

So sieht unsere Lesefortschrittsleiste aus:

Methode 2: Lesefortschrittsbalken mit einem kostenlosen Plugin hinzufügen

Wenn Sie einfach eine einfache Lesefortschrittsleiste kostenlos zu Ihren WordPress-Beiträgen hinzufügen möchten, können Sie das Plugin Catch Scroll Progress Bar verwenden.

Dieses Lesefortschrittsbalken-Plugin zeigt automatisch einen Lesemesser auf Ihren Seiten und Beiträgen an, und Sie können es einfach an Ihre Vorlieben anpassen.

Installieren Sie zuerst das Plugin in Ihrem WordPress-Adminbereich. Weitere Informationen finden Sie in unserem Leitfaden für Anfänger zum Thema Installieren eines WordPress-Plugins.

Sobald das erledigt ist, gehen Sie zu Catch Scroll Progress Bar auf Ihrem WordPress-Dashboard. Sie sehen nun einige Einstellungen für die Fortschrittsleiste, die Sie konfigurieren können.

Mit diesem Plugin können Sie die Position der Fortschrittsleiste von oben nach unten ändern. Sie können sie aber auch einfach so belassen, wenn Sie die normale obere Position bevorzugen.

Eine weitere Sache, die Sie anpassen können, ist die Hintergrundfarbe und die Vordergrundfarbe.

Die Hintergrundfarbe bezieht sich auf die Standardfarbe der Fortschrittsleiste, wenn der Leser die Seite noch nicht durchgescrollt hat. Die Vordergrundfarbe ist die Farbe, die erscheint, wenn der Leser nach unten scrollt.

Als Nächstes kommt die Deckkraft, die die Transparenz der Vorder- und Hintergrundfarben steuert. Der Bereich liegt zwischen 0 und 1, wobei 1 opak und 0 transparent oder unsichtbar ist.

Sie können gerne mit den Zahlen experimentieren, bis Sie den gewünschten Transparenzgrad gefunden haben.

Als Nächstes können Sie die Höhe und den Randradius des Fortschrittsbalkens anpassen.

Für die Höhe haben wir festgestellt, dass die beste Zahl zwischen 1 und 8 liegt, aber nicht mehr. Andernfalls kann die Fortschrittsleiste zu groß aussehen.

Der Randradius bestimmt, wie abgerundet die Ecken Ihres Fortschrittsbalkens aussehen. Wenn Ihnen das nicht gefällt, können Sie einfach '0' eingeben.

Dieses Plugin lässt Sie auch entscheiden, in welchen Vorlagen der Fortschrittsbalken angezeigt werden soll: auf Ihrer Homepage, Blogseite, Archiven und Kategorien und/oder einzelnen Beiträgen oder Seiten.

Normalerweise müssen Sie nur einen Lesefortschrittsbalken zu Ihren WordPress-Blogbeiträgen hinzufügen. In diesem Fall haben wir nur „Einzelne Seite/Beitrag“ in der Einstellung „Bedingung der Vorlage für den Fortschrittsbalken auswählen“ gewählt.

Wir haben auch die Option „Beiträge“ unter „Wählen Sie den Beitragstyp, für den die Fortschrittsleiste gelten soll“ überprüft, da wir möchten, dass die Leiste nur in Blogbeiträgen angezeigt wird.

Fühlen Sie sich frei, die Bedingungen zu prüfen, die am besten zu Ihrer Website passen.

Wenn Sie mit den Einstellungen Ihres Fortschrittsbalkens zufrieden sind, klicken Sie auf 'Änderungen speichern'.

Wenn Sie nun Ihren Blogbeitrag auf Mobilgeräten oder Desktops in der Vorschau anzeigen, sollten Sie eine Fortschrittsleiste sehen.

Methode 3: Hinzufügen einer Lesefortschrittsleiste mit Code

Sie können auch benutzerdefinierten Code verwenden, um eine Lesefortschrittsleiste zu Ihrer WordPress-Website hinzuzufügen.

Oft werden Sie in Tutorials aufgefordert, Code direkt in die functions.php-Datei Ihres Themes einzufügen. Wir empfehlen dies jedoch nicht, da der kleinste Fehler Ihre Website beschädigen kann.

Stattdessen empfehlen wir die Verwendung des Plugins WPCode. Es ist der einfachste und sicherste Weg, benutzerdefinierten Code in WordPress einzufügen, ohne Kerndateien von WordPress bearbeiten zu müssen.

Wir haben WPCode gründlich getestet und festgestellt, dass es eine zuverlässige und anfängerfreundliche Lösung ist.

Es verfügt über eine integrierte Bibliothek mit fertigen Code-Snippets, die Sie mit wenigen Klicks zu Ihrer Website hinzufügen können, einschließlich eines für eine Lesefortschrittsleiste. Sie können unsere vollständige WPCode-Bewertung lesen, um mehr über seine Funktionen zu erfahren und warum wir es empfehlen.

Um zu beginnen, müssen Sie das kostenlose WPCode Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, sehen Sie sich unser Tutorial zur Installation eines WordPress-Plugins an.

Sobald das Plugin aktiviert ist, gehen Sie im WordPress-Dashboard zu Code Snippets » Library.

Suchen Sie von dort aus in der Bibliothek nach der 'Scroll Progress Bar', bewegen Sie den Mauszeiger darüber und klicken Sie auf die Schaltfläche 'Snippet verwenden'.

WPCode fügt den Code dann automatisch für Sie hinzu.

Die richtige Einfügungsmethode wird auch im Hintergrund für Sie ausgewählt.

Danach müssen Sie nur noch den Schalter von Inaktiv auf Aktiv umlegen.

Klicken Sie dann auf die Schaltfläche „Aktualisieren“.

Jetzt können Sie einen Blogbeitrag auf Ihrer Website anzeigen.

Eine einfache Fortschrittsanzeige sollte nun wie folgt erscheinen:

Bonustipps, um Ihre WordPress-Blog-Leser bei Laune zu halten

Möchten Sie gelegentliche Besucher zu treuen Lesern machen? Wir haben das Richtige für Sie!

Schauen Sie sich diese Experten-WordPress-Tutorials mit Tipps an, um Ihr Publikum zu fesseln:

• Gestalten Sie jeden WordPress-Beitrag unterschiedlich, um Ihre Inhalte visuell ansprechend zu gestalten.
• Erstellen Sie benutzerdefinierte Form-Teiler, um Ihren Text aufzuteilen und die Leser durch Ihre Inhalte zu führen.
• Fügen Sie Emojis hinzu, um Ihre Persönlichkeit und einen Hauch von Spaß in Ihren Blog zu bringen.
• Neue Beiträge für wiederkehrende Besucher hervorheben und sie immer wieder zurückkommen lassen.
• Heben Sie Text in Ihren WordPress-Beiträgen hervor und betonen Sie wichtige Punkte für Ihre Leser.
• Fügen Sie einfache und elegante Fußnoten zu Ihren Blogbeiträgen hinzu, um Ihre Recherche zu präsentieren.
• Beeindrucken Sie Ihre Besucher, indem Sie rotierende Testimonials auf Ihrer WordPress-Website anzeigen.
• Fügen Sie eine Schriftgrößenanpassung zu Ihrer WordPress-Website hinzu, um sicherzustellen, dass Ihre Inhalte für alle zugänglich sind.

Wir hoffen, dieser Artikel hat Ihnen geholfen, Lesefortschrittsbalken in WordPress hinzuzufügen. Möglicherweise möchten Sie auch unseren vollständigen Leitfaden zum Bearbeiten einer WordPress-Website und unsere Expertenauswahl der besten Canva-Alternativen für Website-Design-Grafiken sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.