wegerl.at Lesemodus

Sic Lesemodus von Website!
– ist mal ganz praktisch

Im Classic Editor mit TinyMCE ist das ‘Ablenkungsfreie Schreiben’ so wie der Website das ‘Ablenkungsfreie Lesen’ möglich.
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Classic und TinyMCE – ist so klasse!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit TinyMCE Advanced
"Classic und TinyMCE – ist das ausgezeichnete!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Classic und TinyMCE – ist so sehr gut !"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Classic und TinyMCE – und tut sehr gut!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

TinyMCE aktive Installationen: 2+ Millionen
"Classic und TinyMCE – ist so fabelhaft!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Classic und TinyMCE – ist de luxe!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Classic und TinyMCE – ist so fein!"
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.

Lesemodus
– kommt das gut an?



Start der Umfrage im Dezember 2021

ERGEBNISSE

Wird geladen ... 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-readermode ist 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 #content auskommentiert und würde für ohne mittige Ausrichtung sein. Das mittig könnte da auch mit Margins werden, doch wird das nicht Responsive.
  • Zuletzt das .readermode a.imprint, .readermode .site-info::after ist 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 */

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>

Bspw in der header.php des Switchs für Lesemodus
Bspw in der header.php des Switchs für Lesemodus
  • So ohne Childs-Theme wird das nach Theme Update zu erneuern sein. – darum auch die header.php in → Childs Theme

wegerl.at Lesemodus

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

  1. 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.
  2. Geben Sie im Feld "Angezeigter Name" den Namen der Schaltfläche ein und
  3. fügen Sie im Feld "CSS-Klasse" den Code zur Funktion des Switch für den Lesemodus hinzu.
Dashboard → Design / Menüs, unter Menüeinträge 'Individuelle Links' usw.
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