Wegerl-Beitrag vs. mithilfe von Lektor

Von einem Besucher wurde ich aufmerksam gemacht, dass ein Beitrag schwer verständlich ist.

Die Texte auf Wegerl-Array sind zur Lesbarkeit als auch der Rechtschreibung und Grammatik geprüft. Doch das Deutsch ist nicht immer so verständlich? Wie das auf gut Deutsch gemeint ist hier im Beitrag … Genau so stelle ich mir dann einfaches Lektorat vor!

Oder so Freundschaft im Gegenlesen von Beiträgen ist dann von Erfolg.

Dem Beitrag hier die Rede ist

Es ist schon sehr außergewöhnlich, so daneben liegend zu sein. Und dem Beitrag in Erinnerung hat das mit der Fitness von damals zu tun. Aber oft ist auch das sich verschachteln in Begriffen und das intuitive Verständnis erklärend schuld. Die Beiträge sind eben selbst so Schritt für Schritt erarbeitet und dann so erklärlich gemacht. Darum ist sehr gut sich auch mal durch Lektor helfen zu lassen.

BeitragWenn dir mal ein Beitrag sehr auffällig ist, –
sei so nett und mag das über das
Kontakt-Formular mitteilen.

Des SEO Score von gut hat die
Lesefreundlichkeit nicht viel am Hut!

90 / 100

Der SEO-Score ist ein Maß, wie gut die Aspekte einer Webseite zur möglichst guten Positionierung sind, das “Ranking”. Zur Errechnung des Score-Wertes gibt es Parameter. Zum Beispiel das Fokus-Schlüsselwort im Titel, in der Meta-Beschreibung, in Zwischenüberschriften und im Inhalt auch der URL.


Weiter ist das die Menge an Text, die Verlinkungen extern wie intern und Bebilderung mit dem Fokus-Schlüsselwort. – aber das hat nicht mit der Lesefreundlichkeit zu tun, sodass der Besucher dem Text auch gut folgen kann.


Das Beispiel

Das Beispiel ist des Beitrags Lesemodus Website.

In der ersten Spalte ist so, wie hier auf Wegerl-Array der Beitrag war und in der zweiten Spalte ist das nach gemeinsamer Bearbeitung. Es ist da der Unterschied zu sehen, dass so Lektor sehr wohl von Nutzen sein kann.

Beitrag Textvergleich
des vorher und nachher


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

Lesemodus und Dunkelmodus

So schön der Dunkelmodus der Website ist der Lesemodus frei von Steuerelementen u. Werbung.

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

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


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 Menüs und Werbung.

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


– als ihr meint auch WordPress und das für Beginne lesbare Format.

Aber hallo! –. U M F R A G E
🧡 … so zum Zeit entschleunigen.
WordPress, und wie steht es um deine Kompetenz?

Nein, danke! –, oder so, ich hab schon. –
das Pop-up

WordPress

Fünf Kompetenzstufen

  1. Des Neulings die Anfänge verstehen sich von selbst. Der Arbeitsstil scheint durch unsicheres Handeln geprägt zu sein. Einzelheiten sind zu erkennen, aber nicht zum Gesamten.
  2. Der Mittelweg ist gern in Anwendung und so sehr gut. Die sich stellenden Aufgaben ins Positive. Das HTML und CSS, so der Schablonen erfolgreich.
  3. Die dritte Stufe ist des Könnens, auch durch Fleiß. Die Kompetenz zeigt sich dann in Anwendung der Bildung. So Problemen folgt die Durchführung zum Erfolg, eventuell auch deren Beschrieb. So arbeiten in CSS (nicht immer von Erfolg) und klein PHP.
  4. Des nächst der vierten Stufe setzt sich ab und das heißt hier der Autor. Der Autor ist des WordPress gewandt! – d. h. auch des CSS und mehr von PHP. – und ist dem Beschrieb sehr gut. – Ein guter Autor muss kein Experte sein. Redakteure bspw. sind nicht Experten, aber können Inhalte aufbereiten und verstehen es zumindest. – effizient.
  5. Der Experte ist des WordPress-Backends (PHP), die Entwicklung an und für sich. Sehr gewandt in PHP, Javascript und CSS. – aus dem Effeff.

Und so ein „Danke“ schon mal für die Abstimmung!

Wie ist Dein
WordPress-Standpunkt?
Fünf Kompetenzstufen



Start der Umfrage im Juni 2022

ERGEBNISSE

Loading ... Loading ...

Pop-up

Zum WordPress-Standpunkt haben mich die Kompetenzstufen angesprochen und in Recherche zum Thema ist ein Beitrag geworden:

→ WordPress und die fünf Kompetenzstufen

… um das mal auf den Punkt zu bringen.

Das zur Umfrage ist von WP-Polls und
das Pop-up ist von Boxzilla.

Hell- oder Dunkelmodus? Website Dunkelmodus