Lesefortschritt Balken (Reading Progress Bar) ohne WordPress Plugin

1 Kommentar
Lesefortschritt Balken (Reading Progress Bar) ohne WordPress Plugin

Den Lesefortschritt eines Beitrags mit einer sogenannten »Reading Progress Bar« darzustellen ist eine feine Sache und dazu noch sehr benutzerfreundlich. Man kann entweder ein völlig überfrachtetes WordPress Plugin für diesen Job installieren oder es mit nur wenig Arbeit selbst bauen. Ich zeige Dir, wie einfach es das ist.

Okay, mit dem optimalen WordPress Hosting im Rücken könnte es auch ein Plugin sein, aber die Ladezeit mobiler Websites ist jetzt auch ein Ranking-Faktor und nicht so einfach zu optimieren wie die Desktop-Version. Also nimm kein Plugin:-)

Übrigens: Damit Dein WordPress schnell lädt, solltest Du Dir meine perfekte .htaccess Datei ansehen.

Lesefortschritt Balken (Reading Progress Bar) ganz einfach erstellen

Das erstellen ist ganz einfach. Du musst Deinem Theme ein wenig HTML zufügen und eine kleine JavaScript-Datei zusätzlich laden. Um das alles tun zu können, empfehle ich Dir ein Child-Theme für Dein genutztes Theme zu erstellen.

Teil 1: Das HTML hinzufügen

 <div id="reading-progress">
    	<span id="progress-bar" class="bar" style="width: 0%"></span>
 </div>

Dieser kleine HTML-Schnipsel muss in der Theme-Datei header.php nach dem schließenden </body> und vor dem eigentlichen Header Deiner Website eingefügt werden. Genau wie auf dem folgenden Screenshot zu sehen:

An dieser Stelle fügst Du das HTML ein

Teil 2: Das nötige JavaScript hinzufügen

Das JavaScript ist wirklich sehr klein und leicht. Es wird Deine Website nicht verlangsamen. Du kannst die Datei weiter unten herunterladen.

jQuery( document ).ready( function($) {
	window.addEventListener('scroll', function(e) {
		var s = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
		var body = document.body;
		var html = document.documentElement;
		var d = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
		var c = window.innerHeight;
		var position = (s / (d - c)) * 100;
		document.getElementById('progress-bar').setAttribute('style', 'width: ' + position + '%');
	});
});

Die JavaScript-Datei hinzufügen

Die Reading Progress Bar wird nur auf den Beiträgen geladen. Nicht auf Seiten oder Archiven. Jetzt musst Du eigenes CSS als Datei dem Header von WordPress zufügen.

Entpacke den Ordner und lege die Datei in Deinem Theme-Ordner ab. Danach füge folgendes zu Deiner functions.php Datei hinzu:

<?php
// Ab hier kopieren
if ( ! function_exists( 'evolution_readingbar_enqueue_script' ) ) :
/**
 * Das JavaScript für die Reading Progress Bar laden
 * 
 * @author Andreas Hecht
 * @since 1.0.0
 */
function evolution_readingbar_enqueue_script() {
    
    if ( is_single() ) :
    // Nur auf Beitraegen laden
    wp_enqueue_script('progress-bar', get_stylesheet_directory_uri() .'/progress-bar.js', array('jquery'));
    endif;
}
add_action('wp_enqueue_scripts', 'evolution_readingbar_enqueue_script');
endif;

Teil 3: Den Lesefortschritt Balken etwas Design mitgeben

Hier kommt etwas CSS, damit erstens der Lesefortschrittbalken angezeigt wird und zweitens die Höhe und die Farbe bestimmt wird. Das CSS kannst Du in Deine style.css Datei Deines Themes hinein schreiben.

/* Reading Progress Bar */
#reading-progress {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 5px;
    margin: 0px;
    left: 0px;
    z-index: 999999;
}
#reading-progress .bar {
    height: 5px;   /* Die Höhe des Balkens */
    position: fixed;
    top: 0px;
    z-index: 99;
    background-color: #bc3315;  /* Die Farbe des Balkens. Hier Rot */
}

Oder: Du lädst das CSS im Header als Inline-CSS

Wenn Du das möchtest, dann füge folgendes Snippet Deiner functions.php hinzu:

<?php

// Ab hier kopieren
if ( ! function_exists( 'evolution_reading_bar_css' ) ) :
/**
 * Das CSS für den Lesefortschritt Balken dem Header hinzufügen
 * 
 */
function evolution_reading_bar_css() {
?>
<style>
/* Reading Progress Bar */
#reading-progress {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 5px;
    margin: 0px;
    left: 0px;
    z-index: 999999;
}
#reading-progress .bar {
    height: 5px;   /* Die Höhe des Balkens */
    position: fixed;
    top: 0px;
    z-index: 99;
    background-color: #bc3315;  /* Die Farbe des Balkens. Hier Rot */
}
</style>    
<?php }
add_action( 'wp_head', 'evolution_reading_bar_css' );
endif;

Das Ergebnis: Ein cooler Lesefortschritt Balken

Am oberen Rand ist der Balken zu sehen, bei mir in Grün gehalten.

Am oberen Rand ist der Balken zu sehen, bei mir in Grün gehalten.

Fazit

So einfach ist es, eine coole Reading Progress Bar zu erstellen. Viel Spaß damit!

Wenn dir dieser Artikel gefallen hat, freue ich mich über ein Like bei:

Andreas Hecht

Der Autor: Andreas Hecht

Andreas ist der Gründer und CEO der SEO Agentur Hamburg und Experte für Suchmaschinenoptimierung und WordPress Entwicklung.

Vorheriger Beitrag
SEO optimale interne Verlinkung ᐅ Der Guide für Rankingerfolge
Nächster Beitrag
WordPress Child Theme erstellen: So schnell und ganz einfach

1 Kommentar. Hinterlasse eine Antwort

  • Peter Müller
    23. März 2021 11:55

    Hallo Andreas,
    sehr schöne Idee, vielen Dank dafür!

    > Dieser kleine HTML-Schnipsel muss in der Theme-Datei header.php
    > nach dem schließenden und vor dem eigentlichen Header …
    NACH dem schließenden /body ist doch ein bisschen spät oder?

    Ich habe es ohne Child-Theme umgesetzt und das HTML mit den Block-Elements aus GeneratePress Premium 2.0 eingefügt, mit dem Hook before_header.

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Bitte füllen Sie dieses Feld aus.
Bitte füllen Sie dieses Feld aus.
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren.

Menü