So aktivieren Sie den Nachtmodus in WordPress

Seit einiger Zeit enthalten Betriebssysteme und Anwendungen Versionen ihrer grafischen Oberflächen, bei denen weiße Hintergründe durch schwarze Hintergründe ersetzt werden, um die Lichtemission während der Nachtstunden zu reduzieren und so Ihre Augen weniger zu schädigen. Dies wird als Nachtmodus bezeichnet.

Ob aus Mode oder weil es wirklich funktioniert, der Nachtmodus wird immer beliebter. Es gibt diejenigen, die dafür sorgen, dass Nachtmodi Vorteile für die Umwelt haben, da schwarze Bildschirme weniger Energie verbrauchen als weiße. Aber es gibt auch Kritiker dieser Art von Dark Modes.

Wie dem auch sei, dies könnte eine Funktion sein, die Sie auch auf Ihrer Website haben möchten, und dafür werden wir heute über den Nachtmodus in WordPress sprechen.

WordPress enthält standardmäßig noch keinen Nachtmodus, aber es gibt Optionen, um den Nachtmodus sowohl im WordPress-Dashboard als auch im Frontend hinzuzufügen. Wie üblich sind Plugins die Lösung, um WordPress um diese merkwürdige visuelle Funktionalität zu erweitern.

So aktivieren Sie den Nachtmodus im WordPress-Dashboard

Wir beginnen mit dem Dark Mode-Plugin für WordPress, mit dem Sie den Nachtmodus auf dem WordPress-Dashboard aktivieren können. Es ist einfach zu bedienen und kostenlos.

Als erstes muss das Plugin installiert und aktiviert werden. Wir finden es direkt im WordPress-Plugin-Verzeichnis, direkt im WordPress-Dashboard über das Plugins- Menü, wie Sie im obigen Screenshot sehen können.

Sobald das Dark Mode-Plugin installiert ist, hat jeder Benutzer Ihres WordPress in seinem Profil die Option, es auf seinem Dashboard zu aktivieren:

Das Gute an diesem Plugin ist, dass jeder Benutzer entscheidet, wie er das WordPress-Dashboard sehen möchte, im dunklen Modus oder im normalen Modus. Auf diese Weise ist es kein Problem, wenn jemand das WordPress-Dashboard wie gewohnt mit weißen Hintergründen verwenden möchte.

Im vorherigen Screenshot sehen Sie das Ergebnis der Aktivierung des Dunkelmodus. Und es sieht toll aus! Mir gefiel das Ergebnis, dass die schwarze Hintergrundfarbe auch im mittleren Teil der Seite und nicht nur im Seitenmenü vorhanden war.

Leider gibt es ein ausstehendes Problem für das WordPress Dark Mode-Plugin: die Kompatibilität mit dem Gutenberg-Blockeditor bereitzustellen. Im folgenden Screenshot sehen Sie, dass es noch nicht möglich ist, den dunklen Hintergrund auf Gutenberg anzuwenden:

Ich denke, wenn das Plugin erfolgreich genug ist und Benutzer danach fragen, werden seine Entwickler es am Ende so anpassen, dass der Blockeditor auch im Nachtmodus angezeigt wird. In jedem Fall machen Gutenbergs rasendes Entwicklungstempo und seine „häufigen“ Aktualisierungen in seinen Stilen die Anpassung etwas komplex.

So aktivieren Sie den Nachtmodus für Ihre WordPress-Besucher

Das Dark Mode-Plugin fügt dem WordPress-Dashboard nur den Nachtmodus hinzu. Der Rest Ihrer Website, dh das Frontend, das die Besucher sehen, sieht weiterhin unverändert aus, ohne dass es zu Änderungen kommt.

Wenn Sie möchten, dass Ihre Besucher die Möglichkeit haben, den Nachtmodus auf Ihrer Website zu aktivieren, indem Sie dunkle Hintergründe anstelle von hellen Hintergründen verwenden, müssen Sie das Plugin WP Night Mode installieren.

Dieses Plugin ist wie Dark Mode völlig kostenlos und Sie haben es auch im WordPress-Plugin-Verzeichnis verfügbar.

Nach der Installation sehen Sie nichts in den Einstellungen oder in einem zusätzlichen Menü. Was Sie tun müssen, ist zum Menü Aussehen zu gehen und dort Ihre Menüs zu bearbeiten. In Ihrem Hauptmenü müssen Sie einen benutzerdefinierten Link ohne bestimmte URL hinzufügen. Dieser neue Menüpunkt hilft uns, den Schalter zum Aktivieren und Deaktivieren des Nachtmodus hinzuzufügen.

In der Menüverwaltungsoberfläche selbst müssen Sie die Bildschirmoptionen öffnen, die Sie in der oberen rechten Ecke finden, um die Option zum Hinzufügen von CSS-Klassen zu aktivieren, wie Sie im folgenden Screenshot sehen:

Sobald Sie dies getan haben, sehen Sie beim Bearbeiten des Menüpunkts, den wir zuvor hinzugefügt haben, ein zusätzliches Feld, in dem Sie CSS-Klassen hinzufügen können. Hier muss die CSS-Klasse wp-night-mode . Diese Klasse ist diejenige, die WP Night Mode benötigt, um zu identifizieren, welches Element als Nachtmodusschalter verwendet werden soll.

Standardmäßig ist WP Night Mode ein Plugin, das Ihrer Benutzeroberfläche keine dunklen Farben hinzufügt. Sie müssen derjenige sein, der die dunklen Farben auswählt, die Sie für den Hintergrund, den Text und die Links anzeigen möchten. Um diese Farben zu definieren, müssen Sie in das Menü Aussehen gehen und dort das Menü Anpassen öffnen.

Der WordPress-Customizer wird geöffnet und dort finden Sie die Option Nachtmodus . Wenn Sie es auswählen, sehen Sie, dass Sie die Optionen haben, den Nachtmodus standardmäßig zu aktivieren und mehrere Stile zu erstellen. In jedem Stil definieren Sie die Hintergrundfarbe, die Farbe des Textes und die Farbe der Links.

Das Gute am Customizer ist, dass Sie eine echte Vorschau sehen können, wie Ihre Website mit den gewählten Farben aussehen wird:

Leider ist das Ergebnis nicht perfekt: Einige Elemente haben immer noch helle Hintergründe, die im Nachtmodus seltsam aussehen. Aber keine Sorge, wir können das beheben. Vom Customizer selbst aus können Sie zusätzliche CSS-Regeln hinzufügen, um diese kleinen Probleme zu beheben.

Gehen Sie zurück in den Customizer und Sie sehen die Option Zusätzliches CSS . Wenn Sie es auswählen, haben Sie die Möglichkeit, CSS-Regeln direkt dort zu schreiben. Diese Regeln können von folgendem Typ sein:

 body.wp-night-mode-on .class-of-the-element-to-fix { color: # 000; }

Denken Sie daran, dass das Plugin wirklich die CSS-Klasse wp-night-mode-on im body -Tag Ihrer Website anwendet. Wenn Sie also den Hintergrund eines HTML-Elements reparieren und dunkel machen möchten, müssen Sie nur einen Selektor für dieses Element finden und die Korrektur anwenden, wenn das body -Tag die Klasse wp-night-mode-on hat.

Im folgenden Vergleich sehen Sie einen grundlegenden Vergleich zwischen Normalmodus und Nachtmodus mit den von uns verwendeten Farben:

Das Hinzufügen des Nachtmodus zu Ihrem WordPress ist dank einiger Plugins sehr einfach. Heute haben wir Plugins überprüft, die uns helfen, den Nachtmodus auf dem WordPress-Dashboard und im Frontend zu aktivieren.

Verwenden Sie regelmäßig die Nachtmodi in Ihren Anwendungen? Denken Sie daran, unten mit Ihrer Meinung zu kommentieren!

Beitragsbild von Priscilla Du Preez auf Unsplash.