Den Lesefortschritt eines Beitrags mit einer sogenannten »Blog 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 (Blog 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:
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 Blog 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: Eine coole Blog Progress Bar
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!
