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

/* 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.
• .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
      $("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;
    }
  });

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

    // Prüfe, ob Anker `#trommel` in der URL vorhanden ist
    const anchor = window.location.hash;
    if (anchor === '#trommel') {
      // Springe zum Abschnitt mit dem Anker `#trommel`
      const targetElement = $(anchor);
      if (targetElement.length) {
        const topOffset = targetElement.offset().top;
        $("html, body").animate({scrollTop: topOffset}, "fast");
      }
    }
  }
})(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.

Zusatzinformation:
Einbetten von JavaScript-Code über functions.php

add_action('wp_footer', function () {
?>
<script>
// Hier steht der JavaScript-Code ...
</script>
<?php
});

add_action('wp_footer', function () { ?>
<script>
// Hier steht der JavaScript-Code ...
</script>
<?php });

Der Hauptvorteil dieses Ansatzes besteht darin, dass dadurch die Anzahl der HTTP-Anfragen an den Server reduziert wird. Im Gegensatz zur Verwendung einer separaten .js-Datei entfällt die zusätzliche Anfrage an den Server, was die Ladezeit der Seite verbessern kann.

Das Einbetten von JavaScript-Code über die functions.php in WordPress kann nützlich sein, um dynamischen Code zu erstellen, der auf Bedingungen oder Variablen auf der Seite reagiert. Da in der functions.php PHP verwendet werden kann, besteht die Möglichkeit, den JavaScript-Code anzupassen und variablebasierte Logik hinzuzufügen, bevor er im Footer der Webseite ausgegeben wird. Dadurch lässt sich der Code flexibel an die Anforderungen der jeweiligen Webseite anpassen.

Angenommen, du möchtest den Wert einer bestimmten PHP-Variable im JavaScript-Code verwenden. Du könntest diese Variable in der functions.php definieren und anschließend im JavaScript-Code verwenden. Hier ist ein vereinfachtes Beispiel:

In der functions.php:

add_action('wp_footer', function () {
  $variable_a = 42; // Eine PHP-Variable mit dem Wert 42
?>
<script>
// Hier im JavaScript-Code kannst du die PHP-Variable verwenden
var javascriptVariable = <?php echo $variable_a; ?>;
console.log(javascriptVariable); // Gibt den Wert 42 in der Browserkonsole aus
</script>
<?php
});

In diesem Beispiel wird die PHP-Variable $variable_a in der functions.php definiert und dann im eingebetteten JavaScript-Code als javascriptVariable verwendet. Wenn du die Seite lädst und den Code im Browser inspizierst, wirst du sehen, dass der Wert der JavaScript-Variable auf den Wert der PHP-Variable $variable_a gesetzt ist.

Das ist ein einfaches Beispiel, aber mit PHP in der functions.php können viel komplexere Logik erstellt werden, die den JavaScript-Code dynamisch anpasst, je nach Bedingungen, Datenbankabfragen oder anderen Faktoren auf der Webseite. Dadurch ermöglicht das Einbetten von JavaScript-Code über die functions.php eine größere Flexibilität und Anpassungsfähigkeit für das Verhalten einer Webseite.

Allerdings ist es immer noch üblich und empfohlen, für größere und allgemeine JavaScript-Dateien separate .js-Dateien zu verwenden, um den Code sauberer zu strukturieren und die Wartbarkeit zu verbessern. Wenn es um die Optimierung der Ladezeit geht, können Techniken wie das Zusammenfassen und Minifizieren von JavaScript-Dateien verwendet werden, um die Anzahl der HTTP-Anfragen weiter zu reduzieren und die Dateigröße zu verringern.

Letztendlich hängt die Wahl zwischen dem Einbetten von JavaScript über die functions.php oder in separaten Dateien von den individuellen Anforderungen und Komplexität der Webseite ab.