Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
wegerl.at Lesemodus
smilies.4-user.de

Sic Lesemodus von Website!
– ist mal ganz praktisch

Im Classic Editor mit Advanced Editor Tools ist das 'Ablenkungsfreie Schreiben' genauso möglich wie das 'Ablenkungsfreie Lesen' auf der Website.
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; 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
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Der Lesemodus ist eine praktische Funktion, um den Inhalt von Internetseiten besonders lesefreundlich darzustellen. Gerade bei längeren Artikeln oder Texten kann es schwierig sein, den Überblick zu behalten und den Lesefluss aufrechtzuerhalten. Die Funktion vereinfacht den Lesefluss, indem die Schriftgröße erhöht und der Inhalt in einer einzigen Spalte angezeigt wird. Dabei werden störende Elemente wie Menüs und Werbung ausgeblendet.

Dunkelmodus und Lesemodus

Wunderschöner Dunkelmodus
Lesemodus, frei von Design und Werbung.

Der Slogan "Wunderschöner Dunkelmodus – Lesemodus, frei von Design und Werbung" beschreibt gut die Eigenschaften eines Lesemodus, der frei von unnötigen visuellen Elementen und Ablenkungen ist und den Lesern ein komfortables und entspanntes Leseerlebnis bietet.

Advanced Editor Tools das 'Ablenkungsfreie Schreiben' ist der Website das 'Ablenkungsfreie Lesen‘!

Lesemodus
– kommt das gut an?



Start der Umfrage im Dezember 2021

ERGEBNISSE

Wird geladen ... Wird geladen ...

Der Lesemodus:
Leseoptimierung für Internetseiten

Klar, die meisten Websites sind heutzutage so gestaltet, dass sie gut lesbar sind. Aber bei manchen Websites, wie zum Beispiel dieser hier mit dem Theme Twenty Fourteen und drei Spalten, kann die Lesbarkeit durch zu viele Elemente abgelenkt werden. Durch das Aktivieren des Lesemodus wird eine ruhigere Darstellung erreicht. Im Gegensatz zum Browser-Lesemodus sind alle Funktionen des Beitrags und der Kommentare weiterhin verfügbar.


Die Umsetzung des Lesemodus erfolgt nun durch 1. Implementierung per CSS und 2. Programmierung per JavaScript.

Tab 1: Implementierung per CSS
Tab 2: Programmierung per JavaScript
Tab 3: Features: Übergang von Normalmodus zum Lesemodus; Kontinuierlicher Lesemodus
Tab 4: Zusatzinformation: Einbetten von JavaScript-Code über functions.php

Tab 1: CSS

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.

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 */
.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;
}
Tab 2: Programmierung per JavaScript

Tab 2: JavaScript

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

PHP / JavaScript, die Details

  1. add_action('wp_footer', function () { ... });: Dieser Teil bindet den Code an das wp_footer-Hook, um ihn im Footer der Website auszuführen. Der JavaScript-Code wird zwischen den <script> ... </script>-Tags platziert.
  2. let readermodeToggleButton = $(".toggle-readermode");: Hier wird ein Element mit der Klasse "toggle-readermode" ausgewählt und in der Variable readermodeToggleButton gespeichert.
  3. let readermodeToggleButtonDefaultText = $(readermodeToggleButton).html();: Der ursprüngliche Text des Elements wird in der Variable readermodeToggleButtonDefaultText gespeichert.
  4. $(readermodeToggleButton).on("click", function(e) { ... });: Diese Funktion wird ausgeführt, wenn auf das ausgewählte Element geklickt wird. Sie aktiviert/deaktiviert den Lesemodus und ändert den Text des Elements entsprechend.
  5. $(document).ready(function() { ... });: Diese Funktion wird ausgeführt, wenn das Dokument vollständig geladen ist. Sie überprüft die Fensterbreite und aktiviert den Lesemodus automatisch für mobile Geräte.
  6. Die Zeile if ($(window).width() >= 720 && $(window).width() <= 1080) { überprüft, ob die Fensterbreite des Browsers zwischen 720 und 1080 Pixel liegt. Dies bedeutet, dass der Code darauf prüft, ob die Website auf einem Bildschirm mit einer Breite zwischen 720 und 1080 Pixel angezeigt wird. Wenn dies der Fall ist, wird der Lesemodus automatisch aktiviert, indem der entsprechende CSS-Klassenname ("readermode") dem <body>-Element hinzugefügt wird. In Bemerkung dieser Funktionsweise bleibt der Lesemodus auch nach Weiterklick und es braucht hierzu kein Cookie.
  7. $("body").addClass("readermode");: Hier wird der Lesemodus zum <body>-Element hinzugefügt.
  8. $("html, body").animate({scrollTop: 250}, "fast");: Diese Animation scrollt die Seite zur oberen Position (250 Pixel) nach dem Umschalten in den Lesemodus automatisch nach oben, um den Benutzern einen optimalen Startpunkt für das Lesen zu bieten.
    • Das bei {scrollTop: 250} ist anpassbar, bspw hier der Website ist von Vorteil dies so auf {scrollTop: 250} einzustellen.
    • Anschließend das  "fast" ist ebenso zum individuellen.
      Genaueres diesem Kontext von 'slow''medium' und 'fast' empfehle ich dir den Artikel Link Link Float-Top und das Tempo nachzulesen.
  9. $(readermodeToggleButton).on("click", function(e) { und $(".toggle-readermode").on("click", function(e) {: Diese beiden Zeilen dienen dazu, auf das Klicken des Lesemodus-Schalters zu reagieren und die Funktion toggleReaderMode() auszuführen.
  10. Durch das Hinzufügen der e.preventDefault()-Zeile wird das Standardverhalten des Klickereignisses unterdrückt, und es können spezifische Aktionen ausgeführt werden, um den Lesemodus zu steuern.
  11. toggleReaderMode();: Diese Funktion wird aufgerufen, um den Lesemodus zu aktivieren oder zu deaktivieren. Der genaue Inhalt dieser Funktion ist im gegebenen Code nicht ersichtlich.
  12. Der Code enthält auch eine zusätzliche Überprüfung auf URL-Parameter. Wenn der URL-Parameter toggle-readermode vorhanden ist, wird der Lesemodus automatisch aktiviert. Wenn zusätzlich ein Anker bspw. #trommel in der URL vorhanden ist, wird die Seite zum Abschnitt mit dem Anker #trommel gescrollt. Dadurch wird bei Bedarf ein bestimmter Abschnitt der Seite direkt angesteuert, wenn der Lesemodus aktiviert wird. Das Beispiel wie, sehe https://wegerl.at/wordpress-verzeichnis-vs-datenbank/?toggle-readermode/#trommel.

Diese Beschreibung erläutert die verschiedenen Teile des Codes und wie sie zusammenwirken, um den Lesemodus auf der Website zu steuern (welches sehr individuelles und hier der Website in Anwendung ist), automatisch zu aktivieren und auf bestimmte Bedingungen wie die Fensterbreite und URL-Parameter zu reagieren, einschließlich der Verwendung eines Ankers.

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>

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>

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 → Child-Theme

wegerl.at Lesemodus

…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.
Dashboard → Design / Menüs, unter Menüeinträge 'Individuelle Links' usw.

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;
}
Tab 3: Features: Übergang von Normalmodus zum Lesemodus; Kontinuierlicher Lesemodus

Tab 3

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.

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

Tab 4

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

In WordPress kann JavaScript-Code in die functions.php auf zwei Arten eingefügt werden:

  1. 'Ursprünglsiche Schreibweise'
  2. 'Kompakte Schreibweise'

Dieser Code wird dann einmalig im Footer-Bereich der Webseite ausgegeben, wenn die Seite geladen wird.

Ursprüngliche Schreibweise:

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

In dieser Schreibweise wird der PHP-Code durch den schließenden PHP-Tag ?> unterbrochen, bevor der JavaScript-Code mit <script> beginnt. Der PHP-Code wird nach dem Öffnen der anonymen Funktion { mit ?> beendet, und der JavaScript-Code ist völlig von PHP getrennt. Der Nachteil dieser Schreibweise ist, dass kein PHP-Code innerhalb des JavaScript-Blocks verwendet werden kann, da es zwei separate PHP-Blöcke sind.

Kompakte Schreibweise:

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

In dieser Schreibweise bleibt der PHP-Code kontinuierlich, und der schließende PHP-Tag ?> wird erst nach dem Schließen der anonymen Funktion } platziert. Dadurch wird der JavaScript-Code effektiv in den PHP-Code eingebettet, ohne dass es eine Unterbrechung durch den PHP-Tag gibt. Der Vorteil dieser Schreibweise ist, dass du innerhalb des JavaScript-Blocks auf PHP-Variablen und -Funktionen zugreifen kannst, da es nur einen einzigen PHP-Block gibt.


In Bezug auf die Funktionalität haben beide Schreibweisen denselben Effekt: Sie fügen den JavaScript-Code über die add_action('wp_footer', ...)-Funktion hinzu, sodass er im Footer der Webseite ausgegeben wird. Der Unterschied liegt lediglich in der Formatierung des Codes und in der Möglichkeit, innerhalb des JavaScript-Blocks auf PHP zuzugreifen.

Die kompakte Schreibweise kann in Situationen nützlich sein, in denen auf PHP-Variablen oder -Funktionen innerhalb des JavaScript-Blocks zuzugreifen ist, während die ursprüngliche Schreibweise sinnvoll ist, wenn eine klare Trennung zwischen PHP- und JavaScript-Code gegen sein soll.

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.


Aktualisiert im Jahr 2023-Juli