WordPress Dark Mode ohne Plugin – geht das?

Veröffentlicht: 2022-10-18

Inhaltsverzeichnis

Über WordPress Dark Mode ohne Plugin

Sie haben Ihre Augen wahrscheinlich überlastet, indem Sie viel Zeit vor dem Bildschirm verbracht haben. Daher ist es wichtig, dass Sie sie beruhigen, während Sie Computer benutzen. Eine der effektivsten Möglichkeiten, Ihren Augen eine Pause zu gönnen, besteht darin, die Bildschirmanzeige in den Dunkelmodus zu ändern.

Die Websitebesitzer sollten und können ihren Websites einen dunklen Modus hinzufügen, um ihr visuelles Erlebnis zu verbessern. Wenn Sie WordPress für Ihre Website verwenden, sollte das Hinzufügen des Dunkelmodus ein Kinderspiel sein. Sie können dies sowohl manuell als auch durch die Installation eines Plugins tun.

Wir sind uns einig, dass das Plugin die beste Lösung ist, um eine dunkle Version für Ihre WordPress-Website zu erstellen. Aber wir haben auch Antworten für diejenigen, die denken, dass es unmöglich ist, den dunklen Modus von WordPress ohne ein Plugin zu aktivieren! Ja, es ist möglich.

Hier sprechen wir über das Hinzufügen eines Dunkelmodus mit und ohne Verwendung eines Plugins. Und besprechen Sie auch, welches sich wo auszeichnet. Später in diesem Artikel lernen Sie auch eines unserer Lieblings-Plugins namens QS Dark Mode kennen.

Also bleibt gespannt!

Vorteile der Verwendung des Dunkelmodus in WordPress

Warum sollten Sie den Dark Mode in WordPress verwenden? Dahinter stecken einige gute Gründe. Sie persönlich erkennen die Notwendigkeit, wenn Sie nachts mit müden Augen auf Ihrem PC surfen.

Als Websitebesitzer können Sie den Benutzern viele Vorteile bringen, indem Sie diesen Modus zu Ihrer Website hinzufügen. Und es sollte auch einen Mehrwert für Ihr Unternehmen schaffen.

Es gibt noch mehr Vorteile; Lassen Sie uns einige davon unten herausfinden.

  • Minimiert das vom Computerbildschirm kommende weiße Licht erheblich
  • Reduziert die Belastung der Augen
  • Es spart Energie und verlängert die Batterielebensdauer
  • Erhöht die Zeit auf der Seite durch Verbesserung der Benutzererfahrung
  • Bietet eine ästhetische Ausstrahlung

Also ja, das sind so ziemlich die Gründe, warum der Dunkelmodus eine großartige Option für deine WordPress-Seite ist.

WordPress Dark Mode ohne Plugin – Geht das?

Jetzt kommt der lustige Teil. Hier sehen wir, wie Sie das Licht für Ihre WordPress-Site ausschalten können, ohne ein Plugin zu installieren.

Es gibt zwei Möglichkeiten, wie Sie dies tun können –

  1. Hinzufügen des Dunkelmodus mithilfe von HTML, CSS und JQuery
  2. Verwenden von vorgefertigten Themen mit aktiviertem Dunkelmodus

Sehen wir uns diese beiden Methoden unten im Detail an.

1) Fügen Sie den Dunkelmodus hinzu, indem Sie HTML, CSS und JQuery verwenden

Wenn Sie ein Theme-Entwickler sind, sollten Sie diese manuelle Methode bevorzugen, um einen Dunkelmodus-Umschalter in Ihre WordPress-Site einzufügen. Bei dieser Methode müssen Sie ein wenig Codierung in Bezug auf HTML, CSS und JQuery durchführen.

Machen Sie sich keine Sorgen, wenn Sie das Programmieren als schwierig empfinden, denn hier erhalten Sie sofort verfügbare Code-Snippets. Sie können sie also einfach kopieren und an der entsprechenden Stelle einfügen, um den Dunkelmodus zu aktivieren.

Zögern Sie nicht, diese Snippets zu verwenden, da sie Open Source sind und kostenlos verwendet werden können.

  • Fügen Sie das HTML-Code-Snippet hinzu

Fügen Sie zuerst das HTML-Snippet hinzu, um eine Umschaltfläche für den dunklen Modus zu erstellen. Alles, was Sie tun müssen, ist das folgende Snippet zu kopieren und in die Kopf- oder Fußzeile Ihres Designs einzufügen.

<div class="wpnm-button">

<div class="wpnm-button-inner-left"></div>

<div class="wpnm-button-inner"></div>

</div>

  • Mit CSS gestalten

Jetzt müssen Sie Ihre Dunkelmodus-Schaltfläche oder Ihren Switcher mit dem folgenden CSS-Snippet gestalten.

/* Dunkelmodus-Umschalter */

.wpnm-Schaltfläche {

Schriftgröße: 16px

}

.wpnm-button-innen-links:leer {

Rand links: -0,625 em

}

.wpnm-button-inner-links:vorher, .wpnm-button-inner-links:nachher {

Box-Größe: Border-Box;

Rand: 0;

Polsterung: 0;

/*Überleitung*/

-Webkit-Übergang: 0,4s Ease-in-out;

-moz-Übergang: 0,4s Ease-in-out;

-o-Übergang: 0,4 s Ease-in-out;

Übergang: 0,4 s Ease-in-out;

Gliederung: keine

}

.wpnm-Schaltfläche .wpnm-Schaltfläche-innen, .wpnm-Schaltfläche .wpnm-Schaltfläche-innen-links {

Anzeige: Inline-Block;

Schriftgröße: 0,875em;

Position: relativ;

Polsterung: 0em;

Zeilenhöhe: 1em;

Cursor: Zeiger;

Farbe: rgba(149, 149, 149, 0,51);

Schriftstärke: normal

}

.wpnm-button .wpnm-button-innen-links:before {

Inhalt: ";

Bildschirmsperre;

Position: absolut;

Z-Index: 1;

Zeilenhöhe: 2.125em;

Texteinzug: 2.5em;

Höhe: 1 cm;

Breite: 1 cm;

Marge: 0,25 em;

/*Grenzradius*/

-Webkit-Randradius: 100 %;

-moz-Grenzradius: 100 %;

Grenzradius: 100 %;

rechts: 1.625 m;

unten: 0em;

Hintergrund: #FFB200;

transformieren: drehen (-45 Grad);

Kastenschatten: 0 0 0.625em weiß

}

.wpnm-button .wpnm-button-innen-links:nach {

Inhalt: "";

Anzeige: Inline-Block;

Breite: 2,5 cm;

Höhe: 1,5 cm;

-Webkit-Randradius: 1em;

-moz-Grenzradius: 1em;

Grenzradius: 1em;

Hintergrund: rgba(255, 255, 255, 0,15);

vertikale Ausrichtung: Mitte;

Rand: 0 0,625em;

Grenze: 0,125 em solide #FFB200

}

.wpnm-button.active .wpnm-button-innen-links:before {

rechts: 1,0625 m;

Box-Schatten: 0.3125em 0.3125em 0 0 #eee;

Hintergrund: transparent

}

.wpnm-button.active .wpnm-button-innen-links:nach {

Hintergrund: rgba(0, 0, 0, 0,15);

Rand: 0,125 em durchgehend weiß

}

.wpnm-button .wpnm-button-innen-links {

Farbe: RGB (250, 250, 250, 0,51);

Schriftdicke: fett

}

.wpnm-button.active .wpnm-button-innen-links {

Farbe: rgba(149, 149, 149, 0,51);

Schriftstärke: normal

}

.wpnm-button.active .wpnm-button-inner-links + .wpnm-button-inner {

Farbe: RGB (250, 250, 250, 0,51);

Schriftdicke: fett

}

Dieses Snippet stammt von einem Plugin, und der Verdienst geht an den Autor des Plugins, Marko Arula.

  • Fügen Sie dem Body-Tag die CSS-Klasse Dark Mode hinzu

Jetzt müssen Sie diese bestimmte Klasse zum Body-Tag hinzufügen, da Sie so das Layout später anpassen können.

Lass uns das tun.

jQuery(Funktion($) {

/*Klicken Sie auf das Dunkelmodus-Symbol. Fügen Sie Dark-Mode-Klassen und -Wrapper hinzu.

Benutzerpräferenzen über Sitzungen speichern*/

$('.wpnm-button').click(function() {

//Zeige entweder Mond oder Sonne

$('.wpnm-button').toggleClass('active');

//Wenn der Dunkelmodus ausgewählt ist

if ($('.wpnm-button').hasClass('active')) {

// Dunkelmodus-Klasse zum Körper hinzufügen

$('body').addClass('dark-mode');

//Benutzereinstellungen im Speicher speichern

localStorage.setItem('darkMode', true);

} anders {

$('body').removeClass('dark-mode');

localStorage.removeItem('darkMode');

}

})

// Speicher prüfen. Benutzereinstellung anzeigen

if (localStorage.getItem(“darkMode”)) {

$('body').addClass('dark-mode');

$('.wpnm-button').addClass('active');

}

})

Sie können jetzt prüfen und testen, ob die „Dark-Mode“-CSS-Klasse als Body-Klasse hinzugefügt wird. Fügen Sie als Nächstes einen dunklen Hintergrund hinzu, um zu sehen, ob es gut funktioniert.

body.dark-mode * {

Hintergrund: #333;

}

Da wir dies im Browser oder auf der Clientseite tun und der Server nichts weiß, werden Sie sehen, dass der dunkle Modus geladen wird, nachdem der helle Modus geladen wurde. Hier wird der Hauptteil ohne Dunkelmodus in Aktion gerendert, und JS wartet darauf, dass das DOM geladen wird, bevor die Klasse hinzugefügt wird.

Es ist also keine perfekte Lösung für die Benutzer; Es sollte einen besseren Weg geben, um die Erfahrung zu verbessern. Lassen Sie uns herausfinden, was.

  • Verwenden Sie Cookies, um Benutzereinstellungen über Sitzungen zu speichern

Sehen wir uns also an, wie Sie die Body-Klasse zum Server hinzufügen können, damit sie vor dem Servieren geladen wird. Der beste Weg, dies zu tun, ist die Verwendung von Cookies, um die Benutzereinstellungen zu speichern. Auf diese Weise müssen Sie ein Cookie für die Dark-Mode-Präferenz des Benutzers erstellen und die Dark-Mode-Body-Klasse entsprechend hinzufügen.

Es aktiviert die Body-Klasse des dunklen Modus, wenn das HTML gerendert wird. Sie müssen also den JS-Code wie folgt umschreiben.

jQuery(Funktion($) {

//Das Cookie-Objekt erstellen

var cookieStorage = {

setCookie: Funktion setCookie(Schlüssel, Wert, Zeit, Pfad) {

var läuft ab = neues Datum ();

expires.setTime (expires.getTime() + Zeit);

var pathValue = ”;

if (Pfadtyp !== 'undefiniert') {

pathValue = 'path=' + path + ';';

}

document.cookie = Schlüssel + '=' + Wert + ';' + pathValue + 'expires=' + expires.toUTCString();

},

getCookie: Funktion getCookie(Schlüssel) {

var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');

Schlüsselwert zurückgeben? keyValue[2] : null;

},

removeCookie: function removeCookie(key) {

document.cookie = Schlüssel + '=; Max-Alter=0; Pfad=/';

}

};

//Klicken Sie auf das Symbol für den dunklen Modus. Fügen Sie Dark-Mode-Klassen und -Wrapper hinzu. Benutzerpräferenzen über Sitzungen speichern

$('.wpnm-button').click(function() {

//Zeige entweder Mond oder Sonne

$('.wpnm-button').toggleClass('active');

//Wenn der Dunkelmodus ausgewählt ist

if ($('.wpnm-button').hasClass('active')) {

// Dunkelmodus-Klasse zum Körper hinzufügen

$('body').addClass('dark-mode');

cookieStorage.setCookie('yonkovNightMode', 'true', 2628000000, '/');

} anders {

$('body').removeClass('dark-mode');

setTimeout(Funktion() {

cookieStorage.removeCookie('yonkovNightMode');

}, 100);

}

})

// Speicher prüfen. Benutzereinstellung anzeigen

if (cookieStorage.getCookie('yonkovNightMode')) {

$('body').addClass('dark-mode');

$('.wpnm-button').addClass('active');

}

})

  • Fügen Sie die Dark-Mode-Klasse über den Body-Klassenfilter hinzu

Also haben wir ein Cookie mit dem Namen „yonkovNightMode“ eingerichtet. Es wird aktiviert, wenn der Benutzer die Dunkelmodus-Option auswählt. Aber Sie müssen dieses Cookie zuerst mit PHP abrufen und es dann zur Body-Klasse hinzufügen.

Kopieren Sie das folgende Snippet und fügen Sie es in die Datei functions.php in Ihrem Child-Theme ein.

<?php

/**

* Aktivieren Sie den dunklen Themenmodus

* Fork von https://wordpress.org/plugins/wp-night-mode/

*/

Funktion yonkov_dark_mode($classes) {

$yonkov_night_mode = isset($_COOKIE['yonkovNightMode']) ? $_COOKIE['yonkovNightMode'] : ”;

//wenn das Cookie gespeichert wird..

if ($yonkov_night_mode !== ”) {

// Body-Klasse 'Dark-Mode' hinzufügen

return array_merge($classes, array('dark-mode'));

}

$klassen zurückgeben;

}

add_filter('body_class', 'yonkov_dark_mode');

Sie sind fertig

Sie haben also tatsächlich einen voll funktionsfähigen Prototyp eines Dark-Mode-Layouts erstellt. Die Snippets wurden den Open-Source-WordPress-Plugins entnommen. Sie können es also zu jeder Ihrer WordPress-Websites verwenden, um die Dunkelmodus-Option für eine bessere Benutzererfahrung hinzuzufügen.

2. Verwenden Sie vorgefertigte WordPress-Designs mit der Dunkelmodus-Option

Wie wäre es mit der Auswahl eines vorgefertigten WordPress-Themes, das bereits eine Toggle-Schaltfläche für den Dunkelmodus installiert hat. Auf diese Weise können Sie den Dunkelmodus auf Ihrer WordPress-Seite verwenden, ohne ein Plugin zu verwenden. Es hilft Ihnen auch, Anpassungen zu vermeiden, da die meisten Themen mit dem Night Mode Plugin oder benutzerdefinierten CSS-Codes angepasst werden müssen.

Also, was sind einige WordPress-Themes, die den dunklen Modus zusammen mit dem hellen Modus unterstützen? Hier haben wir Ihnen einige beliebte WordPress-Themes mit einem Dark-Mode-Layout gebracht. Lass es uns herausfinden.

  • Twenty Twenty One: Dies ist das Standard-WordPress-Theme, das mit einem Dark-Mode-Layout geliefert wird. Standardmäßig ist es deaktiviert und Sie müssen es in den Themenoptionen aktivieren.
  • Estera: Es ist ein beliebtes WordPress-Theme für WooCommerce-Seiten. Es verfügt über eine Umschalttaste für den Dunkelmodus, mit der Benutzer zwischen Hell- und Dunkelmodus wechseln können.
  • HighStarter: Dieses leichte WordPress-Theme ist beliebt für Portfolio-Sites. Es verfügt über einen Dark-Mode -Schalter ohne separat installiertes Plugin . Und das ermöglicht dem Benutzer, zwischen hellem und dunklem Modus umzuschalten.
  • Mate: Es ist ein wunderschön gestaltetes WordPress-Theme, das die Auswahl zwischen hellem oder dunklem Modus direkt aus der Kopfzeile der Website ermöglicht.

Handbuch oder Plugin Welche Methode zur Aktivierung des Dunkelmodus verwenden?

Wir haben bereits besprochen, wie Sie den Dunkelmodus auf Ihrer WP-Website manuell aktivieren können. Und wir wissen, dass viele von Ihnen die Aktivierung des Dunkelmodus als lästig empfinden werden, insbesondere mit dem Codierungsteil.

Wir empfehlen Ihnen daher, es als zweite Option zu wählen. Denn wenn es darum geht, zwischen manuellen oder Plugin-Methoden zu wählen, bevorzugen wir die Plugin-Option, da sie der Website schnell und bequem einen Umschaltknopf für den Dunkelmodus hinzufügen kann.

Apropos perfektes Plugin, wir haben hier unser Lieblingsplugin, das wir empfehlen können: das QS Dark Mode Plugin. Es ist ein Plugin, das Ihrer Website ein wunderschönes dunkles Schema verleiht und Sie mit dem „Going Dark“-Trend fertig werden lässt.

Sehen wir uns an, warum Sie ein Dark-Mode-Plug-in installieren sollten – insbesondere das QS Dark Mode-Plug-in und nicht die manuelle Methode.

QS Dark Mode Plugin: Die perfekte Dark Mode-Lösung

Es gibt einige Gründe, warum das QS Dark Mode Plugin eine perfekte Dark Mode-Lösung für Ihre Website sein kann. Einige davon sind:

  • Es ist kostenlos
  • Benutzerdefinierte CSS-Unterstützung
  • Verschiedene dunkle Schalterstile, einschließlich verschiedener Animationen und CTA-Texte
  • Bietet einen zeitbasierten Dunkelmodus
  • Option zur Optimierung der Schaltflächenposition
  • Große Auswahl an dunklen Farbschemata
  • Unterstützung für Bild- und Schriftgröße basierend auf dem Dunkelmodus
  • WooCommerce unterstützt

In Bezug auf die Installation des Plugins ist es genauso wie bei der Installation jedes anderen Plugins auf Ihrer WordPress-Seite. Aber wenn Sie immer noch in der Klemme sind, können wir Ihnen hier mit einigen Anweisungen helfen. Schauen wir mal vorbei.

  • Laden Sie das QS-Modus-Plugin herunter und laden Sie die Dateien in das betreffende Verzeichnis hoch, das im Allgemeinen das Verzeichnis /wp-content/plugins/plugin-name ist
  • So installieren Sie das Plugin direkt vom WordPress-Plugins-Bildschirm. Klicken Sie im WP-Dashboard auf Plugins > Neu hinzufügen, suchen Sie als Nächstes in der Suchleiste nach dem Plugin und klicken Sie auf Installieren.
  • Aktivieren Sie das QS Dark Mode-Plugin auf dem Bildschirm „Plugins“.
  • Nach der Aktivierung sollte Ihr Dunkelmodus aktiviert sein.
  • Sie können in den Dunkelmodus wechseln, indem Sie auf den Schalter auf Ihrem Bildschirm klicken
  • Klicken Sie erneut auf den Schalter, um den Lichtmodus zu aktivieren
  • Zum Anpassen können Sie alle Einstellungen in der WP Admin Dark Mode Sidebar des Plugins überprüfen

Kann ich das Farbschema verwenden, wenn der Dunkelmodus aktiv ist?

Der Dunkelmodus versucht, die Menge an weißer Farbe oder blauem Licht, die vom Bildschirm kommt, zu reduzieren. Es bedeutet nicht, dass Sie die ganze Zeit schwarz werden müssen. Sie können immer noch zwischen Farbschemata wählen, auch wenn der Dunkelmodus aktiviert ist, wie Sie es mit dem QS Dark Mode Plugin tun können.

Die Farben sind aber so gewählt, dass der Inhalt bei hellem Vordergrund und dunklen Hintergrundfarben kontrastreich dargestellt wird.

Fazit

So ist es möglich, der WordPress-Website ohne Plugin den Dunkelmodus hinzuzufügen . Aber wenn Sie nicht selbst ein Theme-Entwickler oder Programmierer sind, werden Sie es nicht vorziehen, sich für diese manuelle Methode zu entscheiden.

Stattdessen wäre es klüger und einfacher, ein Plugin für den dunklen Modus hinzuzufügen. Wir haben unser Lieblings-Plugin erwähnt, das QS Dark Mode Plugin, das Sie in Betracht ziehen können, um Ihre Website ansprechender und augenberuhigender zu machen.

Denken Sie daran, dass es nicht nur um die Gesundheit Ihrer Augen geht, sondern auch um die Ästhetik Ihrer Website. Auf diese Weise können Sie dem visuellen Gesamterlebnis eine Aura hinzufügen und gleichzeitig die Benutzerinteraktion verbessern.

Astra Pro vs. Elementor Pro – Kopf-an-Kopf-Vergleich