1.) Implementierung per CSS

Dies beinhaltet das Ausblenden von Seitenleisten sowie das Hervorheben, Vergrößern und Zentrieren des Inhalts auf der Webseite. Der Lesemodus ist besonders auf Desktop-Computern und Tablets nützlich, da viele Websites für eine breitere Ansicht optimiert sind. Auf mobilen Geräten hingegen wird normalerweise eine einspaltige Darstellung verwendet, wodurch der Lesemodus weniger relevant ist.

Folgendes CSS ist Beispiels mit Twenty Fourteen Theme:

/* == 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;
}

.readermode #footer-sidebar.footer-sidebar.widget-area.masonry {
    display: none;
}

/* Spezifisch Ditty-Ticker */
.custom-news-ticker {
    height: 0;
    overflow: hidden;
}

.readermode .custom-news-ticker {
    height: auto;
    overflow: visible;
}

.custom-news-ticker {
    margin-top: -10px; 
    margin-bottom: 15px;
    display: block;
    z-index: 9999 !important;
}

@media (max-width: 767px) {
    .custom-news-ticker {
        display: none !important;
    }
}

/* 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 die Umgebung */
.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;
}

/* Inhalsbereich bspw. */
/*.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 CSS, die Details:

• a.toggle-readermode ist für den 'Switch Text'. Bspw. ist das hier der Website in der Headerleiste.
• Der Selektor .custom-news-ticker betrifft den Ticker, welcher hier im Einsatz ist und in der content.php implementiert ist:

<div class="custom-news-ticker">
<?php if (function_exists("ditty_news_ticker")) {
    ditty_news_ticker(123);
} ?>
</div>

• .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. Anmerkung: 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.

Bedarfs von anderem Theme-Selektor? Erfahre, wie der passende CSS-Selektor zu finden ist.

/* Headerzeile Readermode */
.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;
}

2.) Programmierung per JavaScript

Dank einiger technischer Anpassungen ist es nun möglich, den Lesemodus mit nur wenigen Klicks zu aktivieren. Dabei haben wir uns bewusst dazu entschieden, in der Schaltfläche auf einen visuellen Wechsel zwischen "Lesemodus ein" und "Lesemodus aus" zu verzichten.

In zwei weitern Schritten erfolgt die Programmierung wie folgt: Zuerst das JavaScript für die Funktionalität und anschließend das Coding der Lesemodus-Schaltfläche.

Im Ersten:
Das JavaScript zur Funktion

Hinweis: Der Code bindet PHP an das wp_footer-Hook, um ihn im Footer der Website auszuführen. Hier ist das Beispiel des Codes für die functions.php des Child-Themes:

/* Toggle Lesemodus */
add_action('wp_footer', function () {
?>
<script>
  (function($) {
    let readermodeToggleButton = $(".toggle-readermode");
    let readermodeToggleButtonDefaultText = $(readermodeToggleButton).html();
    let readermodeActive = false;

    // Funktion, um Lesemodus zu aktivieren/deaktivieren
    function toggleReaderMode() {
      $("body").toggleClass("readermode");
      readermodeActive = !readermodeActive;
      if (readermodeActive) {
        // Beim Umschalten zum Lesemodus zur Oberseite der Seite scrollen, es sei denn, ein Anker ist im Link vorhanden
        if (!window.location.hash) {
          $("html, body").animate({ scrollTop: 250 }, "fast");
        }
      }
    }

    $(readermodeToggleButton).on("click", function(e) {
      e.preventDefault();
      toggleReaderMode();
    });

    /* Lesemodus für mobil automatisch
    $(document).ready(function() {
      if ($(window).width() >= 720 && $(window).width() <= 1080) {
        $("body").addClass("readermode");
        // Scrollen zur Oberseite der Seite
        $("html, body").animate({scrollTop: 250}, "fast");
        readermodeActive = true;
      }
    });*/
  
    /* Lesemodus generell aktivieren 
    $(document).ready(function() {
      $("body").addClass("readermode");
      // Scrollen zur Oberseite der Seite, es sei denn, ein Anker ist im Link vorhanden
      if (!window.location.hash) {
        $("html, body").animate({ scrollTop: 250 }, "fast");
      }
      readermodeActive = true;
    });*/

    /* Lesemodus generell aktivieren, nur für Beiträge 
    $(document).ready(function() {
      // Überprüfe, ob die Klasse 'single' im Body-Element vorhanden ist (Beitragsseite)
      if ($('body').hasClass('single')) {
        $("body").addClass("readermode");
        // Scrollen zur Oberseite der Seite, es sei denn, ein Anker ist im Link vorhanden
        if (!window.location.hash) {
          $("html, body").animate({ scrollTop: 250 }, "fast");
        }
        readermodeActive = true;
      }
    });*/

    /* Lesemodus generell aktivieren, nur für Beiträge ab '@media (min-width: 768px)' */
    $(document).ready(function() {
      // Überprüfe, ob die Klasse 'single' im Body-Element vorhanden ist (Beitragsseite) und Bildschirmbreite größer als 768 Pixel
      if ($('body').hasClass('single') && window.innerWidth >= 768) {
        $("body").addClass("readermode");
        // Scrollen zur Oberseite der Seite, es sei denn, ein Anker ist im Link vorhanden
        if (!window.location.hash) {
          $("html, body").animate({ scrollTop: 250 }, "fast");
        }
        readermodeActive = true;
      }
    });

    // Prüfe, ob URL-Parameter vorhanden ist
    const urlParams = new URLSearchParams(window.location.search);
    const readermodeParam = urlParams.get('toggle-readermode');
    if (readermodeParam !== null) {
      toggleReaderMode(); // Aktiviere Lesemodus, wenn URL-Parameter "toggle-readermode" vorhanden ist
    }
  })(jQuery);
</script>
<?php
});

^{Pr. WP-Freund}

Beispiel von HTML

Lesemodus als Button:

<p style="text-align: center;"><span style="font-size: 20px;"><a class="toggle-readermode" href="#"><button>D·e·s·k L E S E M O D U S / VS.</button></a></span></p>

D·e·s·k L E S E M O D U S / VS.

Lesemodus als Link:

<p style="text-align: center;"><span style="font-size: 20px;"><a class="toggle-readermode" href="#">L E S E M O D U S / VS.</a></span></p>

L E S E M O D U S / VS.

Lesemodus über die URL aktivieren:

Um den Lesemodus über die URL zu aktivieren, kann der toggle-readermode-Parameter verwendet werden. Ein Beispiel dafür ist der URL: https://wegerl.at/lesemodus-website/?toggle-readermode.

Im Zweiten:
Das Coding der Lesemodus-Schaltfläche

Folgend sind zwei Beispiele: Das erste Beispiel zeigt die Implementierung in der header.php, während das zweite Beispiel zeigt, wie es hier auf der Website im Headermenü aussieht.

In der header.php

<a href="#" class="toggle-readermode">L E S E M O D U S / VS.</a>

• So ohne Childs-Theme wird das nach Theme Update zu erneuern sein. – darum auch die header.php in → Child-Theme

…oder viel besser des Beispiels:

Im Headermenü

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, ist das Menü zu bearbeiten:

1. Unter "Menüeinträge" die Option "Individueller Link" auswählen. Füge zunächst eine beliebige URL (#) hinzu, um das "Individuelle Links"-Widget zum Menü hinzuzufügen, und entferne dann die URL wieder.
2. Gebe im Feld "Angezeigter Name" den Namen der Schaltfläche ein und
3. füge im Feld "CSS-Klassen" den Code zur Funktion des Wechsel für den Lesemodus hinzu.

Unter "Angezeigter Name" ist, wie es hier der Website ist, mit einem Icon versehen: <i class="i-class icon-icon-icons-lesen-farbig"></i>D·e·s·k L E S E M O D U S / VS.

CSS 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;
}

Features

Dazu gehört eine sanftere Übergangsfunktion zwischen dem Normalmodus und dem Lesemodus sowie eventuell eines kontinuierlichen Lesemodus dank von Cookie-Funktion.

Übergang von Normalmodus zum Lesemodus

Der Übergang vom Normalmodus zum Lesemodus ist eine interessante Möglichkeit, die noch implementiert werden könnte und ist allein mit CSS zu bewerkstelligen:

/* Übergang von Normal- zu Lesemodus*/
.readermode div#content {
    -webkit-animation: fadein 1.5s;
    -moz-animation: fadein 1.5s;
    -ms-animation: fadein 1.5s;
    -o-animation: fadein 1.5s;
    animation: fadein 1.5s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-ms-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-o-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

Mit Switche-Button zum Lesemodus

Wer Interesse ist hier auch so Switche: Readermode Switcher. Dazu braucht es dann auch separates JavaScript für den Switch.

Kontinuierlicher Lesemodus: Dank Cookie-Funktion

Der kontinuierliche Lesemodus bezieht sich auf den Modus, in dem der Benutzer den Lesemodus aktiviert und dieser aktiv bleibt, bis er manuell deaktiviert wird. Dies wird mithilfe einer Cookie-Funktion realisiert.

Mit demselben Code wie im vorherigen Abschnitt 'Im Ersten zum Lesemodus' kann nun ein Cookie gesetzt werden, um den Lesemodus beizubehalten, wenn die Seite erneut aufgerufen wird.

Beachte, das ist für sich selbst zu entscheiden, ob man diese Funktion für seine Besucher von nutzen ist.

Um das Cookie zu setzen, welches den Lesemodus beibehält, ist das JavaScript wie folgt zum gesamten Code zu implmentieren:

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

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