Der Begriff Lesemodus ist für Internetseiten, um des Inhalts auf besonders lesefreundliche Formatierung zu zeigen. Dabei wird der Lesefluss so vereinfacht in Größe von Schrift nur eine Spalte, so in Ausblendung von Steuerelementen und Werbung. Des Lesemodus bieten die Browser schon an. Nur ist da im Ganzen das nicht konform. So ist da und dort des Browsers nicht mal alles drauf, was da zu lesen ist …

Danke für

Desk L E S E M O D U S einschalten

Schon klar meint! – die meisten Websites sind im Heute so ausgelegt, dass im Sinne Lesemodus ist. Nun hier gerade mit Theme Twenty Fourteen von drei Spalten, kann im Lesen von Beitrag die Lebendigkeit der Website ablenken. Mit anklicke von Lesemodus kehrt da die Ruhe ein. Und hingegen von Browsers Lesemodus sind alle Funktionen des Beitrags samt Kommentar und so.

Das CSS zum Lesemodus

Dass durch anklicke Button bspw oberhalb des Texts L E S E M O D U S einschalten das CSS welcher von Lesemodus folgt.

Infolge sind die Seitenleisten ausgeblendet und des Contents ist etwas hervorgehoben, vergrößert und so mittig der Website als auch responsive. Des Letzteren ist zwar von Mobilprogramms für Handy sekundär, da die Website normalerweise nur in einer Spalte zu sehen ist. So kann aber auch das von wegen der Schriftgröße sehr von Vorteil sein.

Erläuterungen

So des bspw wie hier dem Twenty Fourteen Theme. Siehe unterhalb und anklicke 'Details von CSS'.

• a.toggle-readermode ist für den 'Switch Text' im Header.
• .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.

/* == 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 Missfallen führen. Und zwar wenn der Dunkelmodus aktiv ist und der 'Lesemodus' aufgerufen wird. So war hier so Überlagerung und der Lesemodus zu heller Schrift. Okay im Switch von dunkel auf hell und zurück zum Dunkel passt das. Aber wenn so wie der Besucher das erwartet, dann ist 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.

Bspw 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 PHP samt Javascript in die functions.php

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}

Im Zweiten in der header.php

…wie hier ist das 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.php in → Childs Theme

Im Dritten zum TEST

… ist das dann zu testen. – somit ist auch viel Erfolg zu wünschen!

In Classic Editor mit TinyMCE das 'Ablenkungsfreie Schreiben' ist gleich der Website das 'Ablenkungsfreie Lesen‘!