Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets
Der Lesemodus ist eine sehr nützliche Funktion, die es den Nutzern erleichtert, den Inhalt einer Internetseite ablenkungsfrei und lesefreundlich zu lesen. Diese Funktion ist besonders wichtig für längere Artikel oder Texte, bei denen es schwierig sein kann, den Überblick zu behalten oder den Lesefluss aufrechtzuerhalten. Dabei wird der Lesefluss so vereinfacht in Größe von Schrift in nur einer Spalte, mit ausgeblendeten Menüs und Werbung. Einen Lesemodus bieten die Browser schon an. Nur ist manchmal die Darstellung nicht vollständig.
Dunkelmodus und Lesemodus
Wunderschöner Dunkelmodus –
Lesemodus, frei von Design und Werbung.
Der Slogan "Wunderschöner Dunkelmodus – Lesemodus, frei von Design und Werbung" beschreibt gut die Eigenschaften eines Lesemodus, der frei von unnötigen visuellen Elementen und Ablenkungen ist und den Lesern ein komfortables und entspanntes Leseerlebnis bietet.
Wird geladen ...Klar, die meisten Websites sind heutzutage so gestaltet, dass sie gut lesbar sind. Aber bei manchen Websites, wie zum Beispiel dieser hier mit dem Theme Twenty Fourteen und drei Spalten, kann die Lesbarkeit durch zu viele Elemente abgelenkt werden. Durch das Aktivieren des Lesemodus wird eine ruhigere Darstellung erreicht. Im Gegensatz zum Browser-Lesemodus sind alle Funktionen des Beitrags und der Kommentare weiterhin verfügbar.
Das CSS zum Lesemodus
Durch das Einschalten des Lesemodus wird eine vereinfachte Darstellung der Webseite angezeigt. Die Seitenleisten werden ausgeblendet und der Inhalt wird hervorgehoben, vergrößert und mittig auf der Webseite dargestellt. Der Lesemodus ist insbesondere auf Desktop-Computern und Tablets hilfreich, da Websites oft für eine breitere Ansicht optimiert sind. Auf mobilen Geräten wird normalerweise eine einspaltige Darstellung verwendet, wodurch der Lesemodus weniger relevant ist.
Fachliche Erläuterungen
So wie hier dem Twenty Fourteen Theme. Siehe unterhalb und 'Details von CSS'
a.toggle-readermodeist für den 'Switch Text', das ist hier der Website in der Headerleiste..readermode div#content, das CSS ist sehr heikel, denn nur so ist das mittig und von wegen Mobil auch responsive; sodass die Website linkerseits anliegt und der verbreitete Content nicht stört.- So darunter ist das
.readermode #contentauskommentiert und würde für ohne mittige Ausrichtung sein. Das mittig könnte da auch mit Margins werden, doch wird das nicht Responsive.
- So darunter ist das
- Zuletzt das
.readermode a.imprint, .readermode .site-info::afterist hier der Website von Fußzeile rechts unten.
Details von CSS
/* == Lesemodus CSS == */
/* Text Umschalter Headerleiste */
a.toggle-readermode {
display: inline-block;
font-size: 1em;
margin: 12px 0 0px 25px;
}
/* Headerzeile die Farbe */
.readermode .header-main, .readermode .search-toggle {
background-color: #B1D7DE !important;
}
/* Meta */
.readermode .entry-meta {
background-color: #F8F1E3;
}
.readermode .entry-titel {
background-color: #F8F1E3;
}
/* Sidebar und Footer ausblenden */
.readermode #secondary, .readermode #content-sidebar, .readermode #footer-sidebar, .readermode .site:before {
display: none;
}
/* Body */
.readermode {
background-color: #B1D7DE !important;
}
/* Der Inhalt von Hintergrundfarbe und Text */
.readermode .entry-content {
display: inline;
background-color: #F8F1E3;
font-size:1.1em;
}
/* Inhaltsbereich das Drumherum */
.readermode #primary.content-area {
background-color: #DFD8C8;
}
.readermode .entry-header {
background-color: #F8F1E3;
-webkit-box-shadow: 0px 0px 14px -5px #000000;
box-shadow: 0px 0px 14px -5px #000000;
margin: 0 auto;
}
/* Inhaltsbereich und Rand vom Inhaltsbereich, breite, mittig u. responsiv */
.readermode div#content {
flex: 0 !important;
display: block !important;
width: 100% !important;
max-width: 700px;
margin: 0 auto !important;
box-sizing: border-box;
background-color: #F8F1E3;
-webkit-box-shadow: 0px 0px 14px -5px #000000;
box-shadow: 0px 0px 14px -5px #000000;
padding: 25px;
border-radius: 3px;
}
/*.readermode #content {
background-color: #F8F1E3;
-webkit-box-shadow: 0px 0px 14px -5px #000000;
box-shadow: 0px 0px 14px -5px #000000;
padding: 25px;
width: 700px;
border-radius: 3px;
}*/
/* Fußzeile */
.readermode .site-info {
background-color: #B1D7DE;
}
.readermode a.imprint, .readermode .site-info::after {
color: #535780 !important;
}
/* Ende Lesemodus CSS */- Des anders Themes von Selektor? – siehe CSS Selektor finden
Lesemodus im Zusammenspiel
mit Plug-in von Dunkelmodus
… So kann das zu Problemen führen, und zwar wenn aktiven Dunkelmodus der 'Lesemodus' aufgerufen wird. So war hier die Abstimmung von Hintergrund und Schrift schlecht. Jetzt im Umschalten von dunkel auf hell und wieder zurück zum Dunkel, dann passte das.
Der Besucher wird das anders erwarten. Somit ist ein separat Selektor fällig. So ist des CSS der Selektor .readermode .header-main, .readermode .search-toggle dazu Selektor zum Dunkelmodus bspw wp-dunkel-mode .readermode .header-main, .wp-dunkel-mode .readermode .search-toggle.
Beispiel CSS
Der Selektor .wp-dunkel-mode ist individuell anzupassen
/* Headerzeile */
.readermode .header-main, .readermode .search-toggle {
background-color: #B1D7DE !important;
}
.wp-dunkel-mode .readermode .header-main, .wp-dunkel-mode .readermode .search-toggle {
background-color: #386369 !important;
}Die Programmierung
Des technischen ist ein paar Klicks …
Im Ersten zum Lesemodus
Das Javascript. Hier gezeigt, mit Code für die functions.php, das ist hier von wegen das JS im Footer zu laden:
add_action('wp_footer', function () {
?>
<script>
(function($) {
let readermodeToggleButton = $(".toggle-readermode");
let readermodeToggleButtonDefaultText = $(readermodeToggleButton).html();
$(readermodeToggleButton).on("click", function(e) {
e.preventDefault();
$("body").toggleClass("readermode");
if ($("body").hasClass("readermode")) {
// AUS Text $(readermodeToggleButton).html("L E S E M O D U S ausschalten");
} else {
// ursprünglicher Text
$(readermodeToggleButton).html(readermodeToggleButtonDefaultText);
}
} );
})(jQuery);
</script>
<?php
});Pr. WP-Freund
Beispiel von HTML
<p style="text-align: center;"><span style="font-size: 20px;"><a class="toggle-readermode" href="#">Desk L E S E M O D U S einschalten</a></span></p>
Im Zweiten in der header.php oder besser im Menü
Bspw in der header.php
In der header.php
<a href="#" class="toggle-readermode">L E S E M O D U S einschalten</a>
- So ohne Childs-Theme wird das nach Theme Update zu erneuern sein. – darum auch die
header.phpin → Childs Theme
Im Menü
Auf dieser Website ist das obere primäre Menü für die Schaltflächen des Dunkelmodus und des Lesemodus reserviert. Um diese Schaltflächen zu erstellen, müssen Sie das Menü bearbeiten und
- unter "Menüeinträge" die Option "Individueller Link" auswählen. Fügen Sie zunächst eine beliebige URL hinzu, um das "Individuelle Links"-Widget zum Menü hinzuzufügen, und entfernen Sie dann die URL wieder.
- Geben Sie im Feld "Angezeigter Name" den Namen der Schaltfläche ein und
- fügen Sie im Feld "CSS-Klasse" den Code zur Funktion des Switch für den Lesemodus hinzu.
CSS bspw. zum Exempel
.toggle-readermode {
font-size: 14px;
font-weight: bold;
margin-right: 275px;
color: #3C536E;
}
.primary-navigation a {
font-size: 14px;
font-weight: bolder;
color: #3C536E !important;
}
Wer Spass daran ist folgend das mit Switche:
Im Dritten mit so Switche
Wer Interesse ist hier auch so Switche: Readermode Switcher. Dazu braucht es dann auch separates JavaScript für den Switch.
Folgend ist so Nachtrag, um das Ziel zum Lesemodus etwas anzupassen. Folgender Code ist modifiziert, um das mit dem Abstand in die Reihe zu bekommen:
/* Lesemodus Toggle und zusätzliche Class */
add_action('wp_footer', function () {
?>
<script>
(function($) {
let readermodeToggleButton = $(".toggle-readermode");
let readermodeToggleButtonDefaultText = $(readermodeToggleButton).html();
$(readermodeToggleButton).on("click", function(e) {
e.preventDefault();
$("body").toggleClass("readermode readermode_2");
if ($("body").hasClass("readermode")) {
// Z.B folgend ist hier das Toggle von Text auskommentiert:
/*$(readermodeToggleButton).html("L E S E M O D U S ausschalten");*/
// Beim Umschalten zum Lesemodus zur Oberseite der Seite scrollen
$("html, body").animate({scrollTop: 0}, "fast");
} else {
// ursprünglicher Text
$(readermodeToggleButton).html(readermodeToggleButtonDefaultText);
}
});
})(jQuery);
</script>
<?php
});Durch die Verwendung der animate()-Funktion mit der Option scrollTop wird ein Scroll-Effekt zum oberen Rand der Seite ausgeführt. Du kannst auch die Scroll-Geschwindigkeit durch Ändern des zweiten Arguments in der animate()-Funktion anpassen.
- Das bei
{scrollTop: 0}ist anpassbar, bspw hier der Website ist von Vorteil dies so auf{scrollTop: 250}einzustellen. - Anschließend das
"fast"ist auch zum individuellen.
Genauer diesem Kontext empfehle ich dir diesen Link Float-Top und das Tempo.
Demselben Code, nun ein Cookie setzten, um nach Anklicke des Lesemodus den Lesemodus beizubehalten.
Um ein Cookie zu setzen, das den Lesemodus beibehält, ist das JavaScript wie folgt ändern:
/* Lesemodus Toggle, Class und Cookie */
add_action('wp_footer', function () {
?>
<script>
(function($) {
let readermodeToggleButton = $(".toggle-readermode");
let readermodeToggleButtonDefaultText = $(readermodeToggleButton).html();
// Überprüfen, ob das Cookie bereits vorhanden ist
let readermode = getCookie("readermode");
if (readermode == "on") {
$("body").addClass("readermode");
}
$(readermodeToggleButton).on("click", function(e) {
e.preventDefault();
$("body").toggleClass("readermode");
// Cookie setzen
if ($("body").hasClass("readermode")) {
setCookie("readermode", "on", 30);
// Beim Umschalten zum Lesemodus zur Oberseite der Seite scrollen
$("html, body").animate({scrollTop: 250}, "fast");
} else {
setCookie("readermode", "off", 30);
}
// Toggle-Text aktualisieren
if ($("body").hasClass("readermode")) {
/*$(readermodeToggleButton).html("Lesemodus deaktivieren");*/
} else {
$(readermodeToggleButton).html(readermodeToggleButtonDefaultText);
}
});
// Funktion zum Setzen von Cookies
function setCookie(name, value, days) {
let expires = "";
if (days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
// Funktion zum Abrufen von Cookies
function getCookie(name) {
let nameEQ = name + "=";
let ca = document.cookie.split(';');
for(let i=0;i < ca.length;i++) {
let c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
})(jQuery);
</script>
<?php
});Dieses aktualisierte JavaScript verwendet die Funktionen setCookie und getCookie, um das Cookie zu setzen und abzurufen. Wenn das Cookie vorhanden ist und den Wert "on" hat, wird die Klasse "readermode" dem body-Element hinzugefügt, um den Lesemodus beizubehalten. Wenn der Benutzer den Lesemodus aktiviert oder deaktiviert, wird das Cookie entsprechend aktualisiert. Der Text des Toggle-Buttons wird ebenfalls aktualisiert, um den Status des Lesemodus widerzuspiegeln.
Und auf zum TEST. – somit ist auch viel Erfolg zu wünschen!
In Classic Editor mit TinyMCE das 'Ablenkungsfreie Schreiben' ist der Website das 'Ablenkungsfreie Lesen‘!
Aktualisiert im Jahr 2023-März
