Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.
Werbung
Mehr schaffen in weniger Zeit – Der Advanced Editor für kreative Köpfe.
Optimieren Sie Ihre Bearbeitung: Advanced Editor Tools
Mit dem Advanced Editor können Designer und Content Creatoren kreative Ideen umsetzten.
Der Dunkelmodus oder Dark-Modus wird durch das 'Night Eye'-Plug-in im Browser mittels spezieller CSS-Stile und Anpassungen realisiert. Wenn der Nutzer den Dunkelmodus aktiviert, ändert das Plug-in dynamisch das Erscheinungsbild der Webseite, um die Darstellung für eine angenehmere Nutzung in dunklen Umgebungen anzupassen. Wir haben uns in dieses Plug-in verliebt und halten es für sinnvoll, es entsprechend anzupassen. Dazu gehören Anpassungen von Schriftfarbe und Bildern sowie der separate Kontrast, und der Shortcode, um den NightEyeDialog aufzurufen.
Night Eye originär … intelligente Konvertierung. Night Eye invertiert die Farben nicht nur, sondern wandelt sie um. Dies führt zu einem reibungslosen und konsistenten Dunkelmodus-Erlebnis. – und Sehens des Plug-ins möchten wir das auch bejahen.
Der Wechsel zwischen Hell und Dunkel erfolgt durch Anklicke des Buttons und dann im Dialogfenster des Night Eye Plug-ins. Nach der Aktivierung oder Deaktivierung der Modi wird die Website automatisch neu geladen, um eine sofortige konsistente Darstellung zu gewährleisten. Die Pro-Version enthält auch die Möglichkeit, über die Zeiteinstellung den Dunkelmodus automatisch zu aktivieren.
… Ja, die zusätzliche Anfrage zum Wechseln und der nachfolgenden Neuladung der Website ist für manche nicht ideal, aber dennoch akzeptabel. Nämlich nach einer Neuladung der Website passt sich die Farbgestaltung aller Elemente in einem äußerst komplexen Zusammenspiel sehr gut an, was die Entscheidung rechtfertigt.
Die Farbverläufe sind hier sogar perfekt umgesetzt. Weitere Anpassungen sind somit kaum erforderlich, insbesondere im Lesemodus, der hier auf der Website vorhanden ist. Ein anderes Plug-in, das den Wechsel ohne Neuladung der Website ermöglicht, erforderte an sehr viel mehr Zeilen CSS, um einen konformen Dunkelmodus in verschiedenen Bereichen zu erreichen. Das sind so Anpassungen des Ajax von 'Relevanssi – A Better Search', Tabmenü, PRISM-Code, Tabellen sowie des Umschaltens von Lesemodus zu erreichen.
Schriftfarbe und Bilder anpassen
Neben der automatischen Anpassung der Farben im Dunkelmodus wären auch Anpassungen des Buchstabenabstands (letter-spacing) sehr vorteilhaft. Diese erweiterten Funktionen bietet derzeit keine der verfügbaren Plug-ins. 🙂 Daher demonstriert das Beispiel auf der Website, wie diese Anpassungen beim Wechsel zwischen hellem und dunklem Modus zu einem harmonischeren Schriftbild beitragen können. So zum Verständnis zur Lesbarkeit folge der Website leserlich.info.
Der Images so Einstellungen Low Brightness und Grayscale sind mit 'Night Eye' nicht dabei. Folgend ist das mit ein paar Zeilen CSS gemacht.
Zum Beispiel wie es hier der Website, da ist des Beispiels auch die Schriftfarbe etwas anders, als es der Einstellung mit "Dark theme: Dark" wobei das bei "Color adjustment" so belassen ist, wie es der Grundeinstellung hervorgeht.
/* Night Eye: Ändert die Farbe, den Buchstabenabstand und die Schriftstärke von Absätzen und Listen */
[nighteyeplgn="active"] #content p,
[nighteyeplgn="active"] #content li {
color: #e3dcd1 !important;
letter-spacing: 0.4px;
font-weight: 350;
}
/* Night Eye: Ändert die Farbe, den Buchstabenabstand und die Schriftstärke von fett markierten Texten */
[nighteyeplgn="active"] #content strong,
[nighteyeplgn="active"] #content b {
color: #e3dcd1 !important;
letter-spacing: 0.6px;
font-weight: 500;
}
/* Night Eye: Ändert die Darstellung von Bildern */
[nighteyeplgn="active"] img {
filter: brightness(80%) grayscale(80%);
opacity: 0.9;
}
/* Night Eye: Entfernt den Hintergrund für CSS-String-Token */
[nighteyeplgn="active"] .language-css .token.string {
background: none;
}
/* Night Eye: Ändert die Darstellung von eingebetteten Inhalten */
[nighteyeplgn="active"] p > iframe,
[nighteyeplgn="active"] span > iframe {
filter: brightness(85%) grayscale(10%);
}
/* Night Eye Button */
[nighteyeplgn="active"] .NightEyeWidget {
filter: brightness(110%) grayscale(90%);
}
Es kann es eine Herausforderung sein, Farben zu wählen, die einen guten Kontrast bieten und angenehm für die Augen sind.
Button (NightEyeWidget) und Positionierung
Anmerkung: Der Button zum Aufruf des NightEyeDialog ist auf dieser Website vollständig mit display: none ausgeblendet, da wir den Button in der Headerzeile anbieten. Siehe weiter unten unter der Überschrift: "NightEyeDialog über Shortcode".
Der Button (NightEyeWidget) weist bei der Positionierung gelegentlich Unstimmigkeiten auf, vorwiegend wenn er anders als oben und unten ausgerichtet werden soll. Dieses Problem wurde wie folgt gelöst:
Der NightEyeDialog wird durch Anklicken des NightEyeWidgets aufgerufen, mit dem man den Modus wechseln kann. In den Einstellungen, unter dem Bereich 'Content', kann beliebiger Inhalt gespeichert werden, zum Beispiel:
<span class="boldes" style="font-size: 1.1em;">Genieße die Schönheit der Dunkelheit
oder die Schönheit von Helligkeit.
</span>
<img class="aligncenter wp-image-237548 size-full" style="margin-top: 95px; margin-bottom: 25px;" role="img" src="https://wegerl.at/wp-content/uploads/2024/07/OpenClipart-Vectors-owl-dialog.jpeg" alt="Eule" width="125" height="175" loading="eager" />
<span style="font-size: 1rem;">Dunkelmodus von</span>
<a class="no-icon" href="https://plugins.nighteye.app/client/login" target="_blank" rel="noopener"><img class="aligncenter" title="NIGHT EYE PLUGINS" role="img" src="https://plugins.nighteye.app//src/view/rs/img/logos/nigh-eye-logo.png" alt="" width="140" height="38" loading="eager" /></a>
Im HTML ist darauf zu achten, dass bei den Bildern das Attribut loading="eager" verwendet wird. Dadurch werden die Bilder ohne Verzögerung geladen, was das Lazy Loading verhindert und so zu einer flüssigen Visualisierung beiträgt.
Ähnlich verhält es sich mit dem folgenden CSS, das position: absolute; verwendet. Dadurch wird die Position des NightEyeToggleButtons präzise festgelegt und effizient ausgerichtet. Eine einfachere, aber weniger konforme Alternative wäre, position: absolute; wegzulassen und stattdessen margin-top: -123px; mit einer Anpassung über @media zu nutzen. Dies könnte jedoch beim Aufruf des NightEyeDialogs zu einer unruhigen Darstellung des Buttons führen.
Um sicherzustellen, dass das folgende CSS durchgehend wirksam ist, sollte es entweder im Customizer oder über die im Linkhinweis gezeigte Alternative angewendet werden. Dies betrifft besonders die Darstellung auf Mobilgeräten.
🙂 Punkt, Punkt, Komma, Strich, fertig ist das Wunschprofil:
Das würde dem box-shadow ohne die Definition des Kind-Selektors > nicht funktionieren.
Dieses CSS-Snippet wendet die angegebenen Stile nur dann an, wenn .switchNE ein direktes Kind von .NightEyeToggleButton ist und .sliderNE ein Kind von .switchNE ist (es kann ein direktes oder ein indirektes Kind sein).
Optimierung des Bildladeverhaltens im NightEyeDialog
Wenn man dem NightEyeDialog wie im Beispiel auch so Bildchen einpflegt und allein die Auszeichnung im Bild mit Attribut loading="eager" nicht so erfolgreich ist, dann könnte man mit JS das Preloading des Bildchens forcieren, aber lese danach weiter:
/* --- NightEyeDialog, Bild preloading --- */
window.addEventListener('load', () => {
setTimeout(() => {
const img1 = new Image();
img1.src = 'https://../OpenClipart-Vectors-owl-dialog.jpeg';
const img2 = new Image();
img2.src = 'https://../nigh-eye-logo.png';
img1.onload = () => {
console.log('First image preloaded');
};
img2.onload = () => {
console.log('Second image preloaded');
};
img1.onerror = () => {
console.error('Failed to preload the first image');
};
img2.onerror = () => {
console.error('Failed to preload the second image');
};
}, 100); // Verzögerung von 100 ms nach Seitenladung
});
/* - Ende NightEyeDialog Bild ohne Lazy Loading + Bild preloading - */
Aber so richtig "stick" wird es damit auch nicht, egal wie man es dreht und wendet. Bleibt nur ein Base64-kodiertes Bild: Damit sollte beim Aufruf des NightEyeDialogs alles "sticken"! 🙂
"Stick" stammt aus dem Turnjargon und bedeutet, dass ein Turner nach einer akrobatischen Bewegung so landet, dass er stabil und ohne Nachschwung stehen bleibt.
Die beiden Bilder wurden zunächst so optimiert, dass ihre Größe passend ist und sie nicht unnötig viel Speicherplatz beanspruchen. Komprimiert zusammen ergeben sie 10 KB. Dennoch kann die Ladezeit bei so kleinen Dateien manchmal störend wirken. Daher haben wir die beiden Bilder in Base64 konvertiert, was sie zusammen auf 13 KB vergrößert. Da sie nun direkt im HTML eingebettet sind, ist keine Verzögerung beim Seitenaufbau spürbar, und der NightEyeDialog erscheint dadurch sehr flüssig.
Base64-Bilder können nützlich sein, um kleine Ressourcen direkt im Code einzubetten und somit zusätzliche HTTP-Anfragen zu vermeiden.
Ideal für kleine Bilder wie Icons oder Platzhalter, die oft schnell verfügbar sein müssen.
Nicht für große Bilder empfohlen, da die Base64-Kodierung die Dateigröße erhöht und den Code unübersichtlich machen kann.
Button (NightEyeWidget) zeigte Aufblitzer in Verbindung mit Preloader
Das ist ein spezifisches Problem, welches in Verbindung mit einem Preloader auftreten kann. Mit Neuladung der Website war ein aufblitzender Effekt des Night Eye Widget.
Der Button wird zunächst mittels CSS auf display: none; gesetzt:
.NightEyeWidget {
display: none;
}
… und anschließend über JavaScript wieder sichtbar gemacht:
/* --- NightEyeWidget: Mit CSS ist ausblendet, und seitenspezifisch mit JS einblenden --- */
document.addEventListener("DOMContentLoaded", () => {
const nightEyeWidget = document.querySelector('.NightEyeWidget');
if (nightEyeWidget) {
const isHomepage = document.body.classList.contains('home');
const isBlog = document.body.classList.contains('blog');
const isSinglePost = document.body.classList.contains('single');
const isContactPage = document.body.classList.contains('page-id-123'); // Bspw., ob es sich um die Kontaktseite handelt
if (!(isHomepage || isBlog || isSinglePost || isContactPage)) {
// NightEyeWidget auf Seiten ausblenden, die nicht die Startseite, Blog, einzelne Beiträge oder die Kontaktseite sind
nightEyeWidget.style.display = 'none';
} else {
// Nach einer gewissen Zeit das NightEyeWidget wieder anzeigen
setTimeout(() => {
nightEyeWidget.style.display = 'block'; // Anzeigen des NightEyeWidgets
}, 500); // Hier kannst du die Zeit in Millisekunden festlegen (z.B. 1000 für 1 Sekunde)
}
}
});
/* - Ende NightEyeWidget: Mit CSS ist ausblendet, und seitenspezifisch mit JS einblenden - */
Zusätzlich sollte die Positionierung des Buttons .NightEyeWidget ausschließlich auf der Startseite, der Blogseite und bei einzelnen Beiträgen erfolgen, welches im obigen Code mit integriert ist.
Folgendem ist ohne Ausschlüsse, also der gesamten Website:
/* --- NightEyeWidget: Mit CSS ist ausblendet, und mit JS einblenden --- */
document.addEventListener("DOMContentLoaded", () => {
const nightEyeWidget = document.querySelector('.NightEyeWidget');
if (nightEyeWidget) {
setTimeout(() => {
nightEyeWidget.style.display = 'block';
}, 500);
}
});
/* - Ende NightEyeWidget: Mit CSS ist ausblendet, und mit JS einblenden - */
🧡 Kontrast zwischen Hintergrund und Schrift variierbar
Weiterhin finden wir es sinnvoll, dem Besucher die Möglichkeit zu bieten, den Kontrast von Hintergrund und Schrift anzupassen. Die Funktion basiert grundsätzlich auf der normalen Visualisierung, wie sie von Night Eye bereitgestellt wird.
Bereit für Anpassungen? Sei auf unterschiedliche Aspekte vorbereitet!
Mit dem ersten Klick auf die Schaltfläche wird der Selektor .toggle-night angewendet.
Ein weiterer Klick aktiviert den Selektor .toggle-contrast.
Ein dritter Klick stellt wieder die grundlegende Einstellung her.
Dem Beispiel zufolge ist der Schalter nur bei aktiviertem Dunkelmodus sichtbar, das kann hier: L I C H T Ein/Aus oder in der Headerzeile aktiviert werden.
Bei hellem Umgebungslicht ist der Unterschied allerdings kaum merkbar oder sogar disruptiv wirkt.
Hierzu können CSS und JavaScript beitragen:
/* --- NightEye: Kontrast variabel --- */
document.addEventListener("DOMContentLoaded", function() {
const toggleElements = document.querySelectorAll('.toggle-night-mode');
const bodyElement = document.body;
// Funktion zum Umschalten der Modi
function toggleModes() {
if (bodyElement.classList.contains('toggle-contrast')) {
// Wenn der Kontrastmodus aktiv ist, auf Normalmodus wechseln
bodyElement.classList.remove('toggle-contrast');
bodyElement.classList.add('toggle-normal');
localStorage.setItem('mode', 'normal');
} else if (bodyElement.classList.contains('toggle-night')) {
// Wenn der Nachtmodus aktiv ist, auf Kontrastmodus wechseln
bodyElement.classList.remove('toggle-night');
bodyElement.classList.add('toggle-contrast');
localStorage.setItem('mode', 'contrast');
} else if (bodyElement.classList.contains('toggle-normal')) {
// Wenn der Normalmodus aktiv ist, auf Nachtmodus wechseln
bodyElement.classList.remove('toggle-normal');
bodyElement.classList.add('toggle-night');
localStorage.setItem('mode', 'night');
} else {
// Wenn kein Modus aktiv ist, Normalmodus aktivieren
bodyElement.classList.add('toggle-normal');
localStorage.setItem('mode', 'normal');
}
}
// Event-Listener für alle Schalter
toggleElements.forEach(element => {
element.addEventListener('click', toggleModes);
});
// Modus beim Laden der Seite anwenden, falls aktiviert
const savedMode = localStorage.getItem('mode');
if (savedMode === 'night') {
bodyElement.classList.add('toggle-night');
} else if (savedMode === 'contrast') {
bodyElement.classList.add('toggle-contrast');
} else if (savedMode === 'normal') {
bodyElement.classList.add('toggle-normal');
} else {
// Kein gespeicherter Modus, daher sicherstellen, dass der Normalmodus aktiv ist
bodyElement.classList.add('toggle-normal');
localStorage.setItem('mode', 'normal');
}
});
/* - Ende NightEye: Kontrast variabel - */
Falls nur ein Selektor (.toggle-night) bevorzugt wird, wie folgt:
/* --- Night Eye mit Kontrast --- */
document.addEventListener("DOMContentLoaded", function() {
const toggleElements = document.querySelectorAll('.toggle-night-mode');
const bodyElement = document.body;
// Funktion zum Umschalten des Nachtmodus
function toggleNightMode() {
if (bodyElement.classList.contains('toggle-night')) {
bodyElement.classList.remove('toggle-night');
localStorage.removeItem('nightMode');
} else {
bodyElement.classList.add('toggle-night');
localStorage.setItem('nightMode', 'active');
}
}
// Event-Listener für alle Schalter
toggleElements.forEach(element => {
element.addEventListener('click', toggleNightMode);
});
// Nachtmodus beim Laden der Seite anwenden, falls aktiviert
if (localStorage.getItem('nightMode') === 'active') {
bodyElement.classList.add('toggle-night');
}
});
/* Ende Night Eye mit Kontrast */
Der Button wird über eine Classe bereitgestellt und ist somit auf einer Seite mehrfach anwendbar.
Der Kontrast-Schalter
Durch das folgende CSS wird der Schalter nur im aktivierten Nachtmodus sichtbar. Außerdem ist das CSS so gestaltet, dass es hier zur Website passt und in der Headerzeile platziert ist. Gegebenenfalls muss es individuell angepasst werden:
/* --- Kontrast-Schalter nur bei Nachtmodus visuell --- */
/* toggle night mode */
.toggle-night-mode {
display: none;
}
[nighteyeplgn="active"] .toggle-night-mode:not(.header-main) {
display: block;
display: inline;
top: 0px;
list-style: none;
display: inline-block;
vertical-align: middle;
}
/*.menu-item {
list-style: none;
display: inline-block;
vertical-align: middle;
}*/
/* Ende Kontrast-Schalter nur bei Nachtmodus visuell */
Perfekte Anpassung: Variiere Farben und Kontraste, steuer den NightEyeDialog per Shortcode und Tastatur!
🧡 NightEyeDialog über Shortcode
Das NightEyeWidget ist nicht immer die optimale Lösung. Daher haben wir einen Shortcode erstellt, insbesondere weil dieser in der Headerleiste sehr trefflich ist.
Code für die functions.php:
/* ––– NightEye Shortcode (Class) ––– */
function clickable_nighteye_shortcode() {
return '<span aria-label="NightEye Swippe" tabindex="0" role="button" aria-pressed="false" class="focusable clickable-nighteye clickableNightEye">
Licht Ein/Aus
</span>';
}
add_shortcode('clickable_nighteye', 'clickable_nighteye_shortcode');
function enqueue_custom_scripts() {
?>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var clickableNightEyeElements = document.querySelectorAll('.clickableNightEye');
clickableNightEyeElements.forEach(function(clickableNightEye) {
clickableNightEye.addEventListener('click', function () {
triggerNightEyeWidgetClick();
});
clickableNightEye.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
triggerNightEyeWidgetClick();
}
});
});
function triggerNightEyeWidgetClick() {
var widget = document.querySelector('.NightEyeWidget.NightEyePositionLeft');
if (widget) {
var event = new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window
});
widget.dispatchEvent(event);
}
}
});
</script>
<?php
}
add_action('wp_footer', 'enqueue_custom_scripts');
/* – Ende NightEye Shortcode – */
Der Shortcode lautet [clickable_nighteye] oder so per Class:
/* Schaltfläche für NightEye Shorcode */
.focusable.clickable-nighteye {
display: inline-block; /* Den gesamten Block klickbar machen */
padding: 10px 20px; /* Erhöhe die Klickfläche durch Polsterung */
cursor: pointer; /* Zeigt an, dass es sich um ein klickbares Element handelt */
}
Wenn man den Shortcode lieber per ID erhält, dann ist dieser Code:
/* ––– NightEye Shortcode (ID) --- */
function clickable_nighteye_shortcode() {
return '<span aria-label="NightEye Swippe" tabindex="0" role="button" aria-pressed="false" class="focusable clickable-nighteye" id="clickableNightEye">
<i class="i-class icon-IcoMoon"></i>Licht Ein/Aus
</span>';
}
add_shortcode('clickable_nighteye', 'clickable_nighteye_shortcode');
function enqueue_custom_scripts() {
?>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var clickableNightEye = document.getElementById('clickableNightEye');
if (clickableNightEye) {
clickableNightEye.addEventListener('click', function () {
triggerNightEyeWidgetClick();
});
clickableNightEye.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
triggerNightEyeWidgetClick();
}
});
}
function triggerNightEyeWidgetClick() {
var widget = document.querySelector('.NightEyeWidget.NightEyePositionLeft');
if (widget) {
var event = new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window
});
widget.dispatchEvent(event);
}
}
});
</script>
<?php
}
add_action('wp_footer', 'enqueue_custom_scripts');
/* – Ende NightEye Shortcode (ID) - */
Kommentar zur Erstellung des Shortcodes durch ChatGPT: Zuerst wurden verschiedene Ansätze probiert, die sich als umständlich erwiesen und nicht zum Erfolg führten. Erst der Hinweis an ChatGPT, einfach dem NightEyeWidget einen Klick zu geben, brachte bald Erfolg.
🧡 Tastaturnavigation bedienbar machen
Für die Benutzererfahrung kann es weiterhin wichtig sein, dass die Tastaturnavigation integriert ist. Dies betrifft auf dieser Website die Headerzeile mit den Buttons ('Kontrast +/-', 'Licht An/Aus', 'Lesemodus' und den Schriftgrößen-Resizer).
Separates CSS ist für den ToggleButton nicht erforderlich, da man davon ausgehen kann, dass mit Shift oder Enter der Wechsel vollzogen wird.
Das HTML der Buttons
Die beiden Buttons im HTML könnten wie folgt aussehen:
<span class="focusable toggle-night-mode" aria-label="KONTRAST -/+" tabindex="0" role="button">
<i class="i-kontr icon-icon-brightness"></i>KONTRAST +/-
</span>
<span class="focusable clickable-nighteye clickableNightEye" aria-label="Tag- Nachtmodus" tabindex="0" role="button">
<i class="i-licht icon-switch"></i> L i c h t Ein/Aus
</span>
Die Verwendung von class="focusable", aria-label, tabindex, und role, bezieht sich meist auf die Barrierefreiheit (Accessibility) und die Verbesserung der Nutzererfahrung, insbesondere für Benutzer, die auf Tastaturnavigation oder Screenreader angewiesen sind.
Zugänglichkeitseinstellungen
class="focusable":
Diese Klasse wird verwendet, um Elemente als fokussierbar zu kennzeichnen, sodass sie mit der Tastatur (z.B. durch Tabben) erreicht werden können.
Oft wird diese Klasse in Verbindung mit CSS genutzt, um bestimmte Stile beim Fokussieren eines Elements anzuwenden (z.B. visuelle Hervorhebung).
aria-label:
aria-label wird verwendet, um einem Element eine zugängliche Beschreibung hinzuzufügen. Diese Beschreibung ist für Screenreader und andere assistive Technologien sichtbar, jedoch nicht für das Auge.
Beispiel: aria-label="Hauptmenü" sagt einem Screenreader, dass dieses Element das Hauptmenü repräsentiert, auch wenn der sichtbare Text anders ist oder gar nicht existiert.
tabindex:
tabindex definiert die Tabulatorreihenfolge eines Elements. Ein tabindex="0" macht das Element fokussierbar und fügt es in die natürliche Tab-Reihenfolge ein. Ein positiver Wert definiert eine explizite Reihenfolge, und tabindex="-1" macht das Element zwar fokussierbar, aber nicht durch Tab erreichbar.
Das ist wichtig für die Tastaturnavigation, um sicherzustellen, dass Benutzer mit der Tastatur alle wichtigen Elemente erreichen können.
role:
Das role-Attribut wird verwendet, um die Rolle eines Elements innerhalb der Anwendung zu definieren, besonders für assistive Technologien.
Beispiel: role="button" weist einem span– oder div-Element die Rolle eines Buttons zu, was Screenreadern und Browsern hilft zu verstehen, wie das Element funktionieren soll.
In unserem Beispiel, bei dem diese Attribute auf Menüpunkte oder interaktive Elemente angewendet werden, besteht das Ziel darin, sicherzustellen, dass alle Benutzer, einschließlich derjenigen, die auf assistive Technologien angewiesen sind, problemlos navigieren und die Webseite nutzen können.
focusable wird dafür sorgen, dass die Elemente in der Tab-Reihenfolge auftauchen.
aria-label gibt den Elementen eine sinnvolle Beschreibung.
tabindex="0" ermöglicht die Navigation zu diesen Elementen via Tab-Taste.
role="button" stellt sicher, dass Screenreader diese Elemente korrekt als interaktiv erkennen.
'Individuelle Links' im Menü: CSS-Classen richtig einsetzen
Die Verwendung der Funktion 'CSS-Klassen (optional)' im WordPress-Menü-Editor ermöglicht es, Classen direkt auf Menü-Elemente anzuwenden, ohne zusätzliche manuelle CSS-Anpassungen im Code vornehmen zu müssen.
Wenn die Funktionen im Menü korrekt anklickbar sein sollen, ist es wichtig, die Classen wie toggle-night-mode, clickable-nighteye clickableNightEye usw. im Widget 'Individuelle Links' im dafür vorgesehenen Bereich 'CSS-Klassen (optional)' einzutragen. Dadurch sind keine zusätzlichen, potenziell problematischen CSS-Anweisungen wie display: inline-block; erforderlich, was Konflikte und Darstellungsprobleme vermeiden kann.
Im Menü 'Individuelle Links'
Hier zeigen wir, wie die Buttons zu erstellen sind.
Beispiel toggle-night-mode in CSS-Klassen, 'Angezeigter Name' das HTML mit dem entsprechenden Inhalt und dem Feld URL bitte ohne Hashtag oder das Doppelkreuz [#]
Anmerkung: In diesem Beispiel ist die Classe toggle-night-mode doppelt vorhanden, da dies für das Styling zur Aus- und Einblendung erforderlich ist. Erstaunlicherweise funktioniert das CSS für die Aus- und Einblendung nicht, wenn die Classe nur unter 'CSS-Klassen (optional)' eingetragen ist.
NightEye-Button:
Angezeigter Name
<span class="focusable" aria-label="Tag- Nachtmodus" tabindex="0" role="button"> <i class="i-licht icon-switch"></i> L i c h t Ein/Aus </span>
Es gab ein Problem, als der Code so konfiguriert war, dass das JavaScript für den Toggle-Button erst geladen wurde, nachdem der Dialog aufgerufen wurde. Dieses Problem trat auf, wenn die Enter-Taste zweimal verwendet wurde – einmal zum Öffnen des Dialogs und ein zweites Mal für den Toggle-Button. Dies betraf insbesondere die Interaktion mit der Enter-Taste.
Interessanterweise funktionierten die anderen Kombination für das Öffnen des Dialogs und die Interaktion mit dem Toggle-Button wie vorgesehen, ohne das beschriebene Problem zu verursachen.
Hier sind die beiden Code-Segmente, die nur teilweise wie beschrieben funktionieren:
Folgend die separate Tastaturnavigantion für Toggle-Button: Der Code ist so strukturiert, dass er nur aktiv wird, wenn der NightEyeDialog geöffnet wird, was Ressourcen spart und unnötige Event-Listener vermeidet. Das Separieren des Codes würde sinnvoll, da er nur ausgeführt wird, wenn die spezifische Interaktion mit dem NightEyeDialog stattfindet.
/* --- Tastaturnavigantion für NightEyeToggleButton --- */
document.addEventListener('DOMContentLoaded', function() {
function setupToggleButton() {
const toggleCheckbox = document.querySelector('.NightEyeToggleButton input[type="checkbox"]');
if (toggleCheckbox) {
toggleCheckbox.setAttribute('tabindex', '0');
// Event-Listener für Enter-Taste hinzufügen
toggleCheckbox.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
event.preventDefault(); // Verhindert die Standardaktion
toggleCheckbox.checked = !toggleCheckbox.checked;
toggleCheckbox.dispatchEvent(new Event('change', { bubbles: true }));
}
});
// Fokus auf das Kontrollkästchen setzen
toggleCheckbox.focus();
}
}
function addDialogOpenListener() {
const nightEyeWidget = document.querySelector('.NightEyeWidget');
if (nightEyeWidget) {
nightEyeWidget.addEventListener('click', function() {
setupToggleButton();
});
}
}
addDialogOpenListener();
});
/* - Ende Tastaturnavigantion für NightEyeToggleButton - */
Und vielen Dank an ChatGPT!
Dark-Mode-Plug-ins verbrauchen Ressourcen
Das ist eine Information, die man beachten sollte, um objektiv zu sein. Folgend handelt es sich um Messergebnisse, welche 'Lighthouse' bereitstellt.
Die Dark-Mode-Plug-ins verbrauchen Ressourcen, was hinzunehmen ist. Das Plug-in Night Eye ist sehr performant, auch wenn 'Lighthouse' bemängelt: "Verhindern, dass in modernen Browsern veraltetes JavaScript bereitgestellt wird". Ja, da ist die Datei night-eye-pro/Views/assets/v-public/view/startup-page/bundle.js dabei.
Was ich folgendem TEST noch hinzufügen möchte: Auf der Website ist auch Boxzilla aktiviert, und beim Erstbesuch erscheint immer ein Pop-up. Beispielsweise kostet 'Boxzilla' etwa 2 Leistungspunkte, also in etwa dasselbe wie Night Eye an Ressource braucht.
Zum Zeitpunkt des Tests sahen die Ergebnisse folgendermaßen aus:
Ohne Boxzilla Ohne Night Eye
97 Punkte
Mit Boxzilla Ohne Night Eye
95 Punkte, also 2 Punkte weniger durch Boxzilla.
Mit Boxzilla Mit Night Eye
93 Punkte, also 2 Punkte weniger durch Night Eye.
Allgemein lässt sich zur Leistung sagen, dass Night Eye etwa 2 Punkte kostet, wobei die Messergebnisse wie üblich manchmal schwanken.
Dark-Mode-Plug-ins verbrauchen Ressourcen, wie alle Plug-ins mit Features für das Frontend. Worauf es bei der Auswahl des richtigen Dunkelmodus-Plug-ins ankommt, ist das Zusammenspiel mit der Website und somit die Zufriedenheit der Nutzer*innen 🙂
Das Plug-in hat hier seinen Platz gefunden! – weil es Vorteile bietet, die oft nicht sofort erkennbar sind.
Das Night Eye WP Pro-Plug-in ist auch in einer kostenlosen Version verfügbar, die denselben Funktionsumfang bietet und keine Einschränkungen hat. Die kostenlose Night Eye WP Pro-Version enthält einen Referral-Link in der Fußzeile und zeigt das Plug-in diskret an. Hier können Sie sich für Night Eye WP Pro registrieren.
Es bleibt die Frage, warum nur über 100 Benutzer*innen das Plug-in aus dem offiziellen WP-Verzeichnis nutzen. Möglicherweise liegt das daran, dass viele andere das PRO Free-Modell verwenden, das exklusiv über Night Eye WP PRO erhältlich ist. Auf den Link klicken und sich über die E-Mail-Adresse registrieren.
Der Beitrag wurde mit fachlicher Unterstützung erstellt.
Schaffe mit WordPress und Advanced Editor schöne Websites. Hier ist für dich, euch eine leicht lesbare und freundliche Anleitung.
Die Website verwendet funktionelle Cookies. Sie verwendet keine Cookies von Drittanbietern.
Aber hallo! – zur Begrüßung eine Rundfrage?
🧡 … das so zum Zeit entschleunigen.
Die Erstellung von Website-Inhalten erfordert oft kreative Ideen. Es wäre interessant zu erfahren, wo Ideen für die Gestaltung der Website-Inhalte gefunden werden und wie diese gestaltet werden. Bitte mitteilen, wie typischerweise Inspiration für die Website-Inhalte gefunden wird.
Sie können die Tastaturnavigation nutzen: Tab zum Fokussieren, Leertaste zum Auswählen und Esc zum Schließen der Rundfrage.
Wird geladen ...
Falls alle Optionen ausgewählt werden sollen, empfiehlt es sich, im Ausschlussverfahren festzustellen, auf welche am ehesten verzichtet werden kann, und dann das auszuwählen, was am wichtigsten erscheint.
Hinweis zur Tastaturnavigation: Sobald Sie die Website scrollen, können Sie die Enter-Taste drücken, um den Inhalt direkt zu fokussieren, ohne den Tabindex zu durchlaufen. Das zweite Enter aktiviert das Element.
🎶 Während des Besuchs kann es neben informativen Ergebnissen auch zu Klangeffekten kommen, um bestimmte Elemente hervorzuheben. – Viel Spaß beim Erkunden!
Zur Optimierung unserer Website nutzen wir Tools wie 'Statify' und 'Visit Duration', die anonymisierte Daten wie die Verweildauer erfassen.
'Ist das Plug-in Docket-Cache (neuer Tab) schon zu kennen?
Pop-up
Das zur Umfrage ist von WP-Polls und das Pop-up ist von Boxzilla.
Lesen Sie die Inhalte nicht bequem?
Erhöhen Sie die Schriftgröße über die der Headerzeile oder gleich hier:
NORMAL, LARGE oder X-LARGE
Möchten Sie das Licht an- oder ausschalten?
Bitte sehr: Licht Ein/Aus
… auch Kontrast -/+ anpassen.
Sie können auch die Tastatur verwenden: Fokus mit Tab, Auswahl mit Space und Schließen mit Esc.
Im Inhalt die Tastaturnavigation:
Sobald Sie die Website scrollen, können Sie die Enter-Taste drücken, um den Inhalt direkt zu fokussieren, ohne den Tabindex zu durchlaufen. Das zweite Enter aktiviert das Element.
Tabulator (Tab): Navigiert durch interaktive Elemente.
Shift + Tab: Gehe zurück zum vorherigen Element.
Enter: Erste Betätigung fokussiert, zweite aktiviert.
Pfeiltasten: Scrollen in Texten oder Menüs.
Leertaste: Aktiviert Header-Buttons und scrollt im Content.
