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

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

Info echo

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

Info echo

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

Info echo

… 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

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

Info echo

Ansprechend! – so gehts hier zum Progress
“Classic und TinyMCE – ist de luxe!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

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

Info echo

Werkraum ist Werkraum und Frontend ist Frontend
Illustraion SVG unDraw; Ticker von Ditty News Ticker
“Classic und TinyMCE – ist so fein!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Der Begriff Lesemodus ist für Internetseiten, um den Inhalt besonders lesefreundlich zu zeigen. 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.

Danke für

Desk L E S E M O D U S einschalten

Dunkelmodus und Lesemodus

Wunderschöner Dunkelmodus
Lesemodus frei von Design und Werbung.

Lesemodus
– kommt das gut an?



Start der Umfrage im Dezember 2021

ERGEBNISSE

Loading ... Loading ...

Schon klar meint! – die meisten Websites sind im heute so ausgelegt, dass sie gut lesbar sind. Nun hier gerade mit Theme Twenty Fourteen von drei Spalten, kann im Lesen von Beiträgen die Lebendigkeit der Website ablenken. Mit Anklicken des Lesemodus kehrt da Ruhe ein. Im Gegensatz von Browser-Lesemodus sind alle Funktionen des Beitrags samt Kommentar anwendbar.

Das CSS zum Lesemodus

Durch L E S E M O D U S einschalten folgt die vereinfachte Art der Darstellung.

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

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’ 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.
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 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>

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 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‘!


Aktualisiert im Jahr 2022-Juni