Sic Lesemodus von Website

In Classic Editor mit TinyMCE das ‘Ablenkungsfreie Schreiben’ wie der Website das ‘Ablenkungsfreie Lesen’
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 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 zu lesen ist …

Lesemodus vs. Dunkelmodus

… So ist das des Hintergrunds von dunkler und im Weiter ist das von Werbung und so der Website weg. Des Letzteren ist das für den Leser sehr von Vorteil. Die Überlegung ist es wert, denn so Dunkelmodus, dass dann passt, kann sehr aufwendig werden. So wie hier der Website des Zeigens im sowohl als auch ist davon dann ganz abzusehen …

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.

Lesemodus
– kommt das gut an?!

Das CSS

Dass durch anklicke Button bspw des Texts ‚Wegerl Lesemodus’ das CSS in 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. Und hiermit gleich meine Danksagung an WP-Freund, der mir hier und u. a. sehr beistand. 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
/* == ANFANG 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 */

Im Zusammenspiel
bspw mit Plug-in von Dunkelmodus

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

/* 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

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

…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 Childs Theme

Im Dritten

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

Danke für

L E S E M O D U S einschalten

… Und wie ist dein Erfolg des Beitrags?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

DSGVO: Blog Website wegerl.at bedient sich dem Dienst Gravatar der Automattic Inc. In Angabe der E-Mail-Adresse, welche deiner Nutzung von Gravatar, erfolgt der Service nach Art. 6 Abs. 1 lit. f) DSGVO. Also nachdem dein Kommentar von wegerl.at freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.