Tutorials Dafür brauchst Du wirklich kein Plugin

Lesefortschritt Balken (Reading Progress Bar) ohne WordPress Plugin

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: PageSpeed ermitteln – So machst Du es richtig.

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!

Andreas Hecht

Andreas Hecht

Andreas hat 2010 die SEO Agentur Hamburg gegründet und bringt kleine und mittlere Unternehmen mit laufender SEO Betreuung in die Top-10 Platzierungen bei Google. Er ist zudem Experte in WordPress Entwicklung und Performance.

Jetzt den Newsletter abonnieren!

Hol Dir die neuesten Beiträge über WordPress und SEO direkt in Deinen Posteingang. Als Dankeschön bekommst Du Gratis mein neues E-Book:

E-Book: Wie Du Dein WordPress raketenschnell machst

Ich muss Deine Daten für den Versand des Newsletters speichern. Du kannst Dein Abo jederzeit kündigen. Danach lösche ich Deine Daten zeitnah.

Und keine Angst, ich spamme Dich nicht voll, auch ich hasse Spam.

Das könnte auch interessant sein...

Seobility SEO Tool

Schreibe einen Kommentar

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

Teilen
Teilen
Teilen