Mode sombre de WordPress sans plugin – est-ce possible ?

Publié: 2022-10-18

Table des matières

À propos du mode sombre de WordPress sans plugin

Vous avez probablement surchargé vos yeux en passant beaucoup de temps devant l'écran. Il est donc important de les apaiser lorsque vous utilisez des ordinateurs. L'un des moyens les plus efficaces de donner une pause à vos yeux consiste à régler le paramètre d'affichage de l'écran sur le mode sombre.

Les propriétaires de sites Web devraient et peuvent ajouter un mode sombre à leurs sites Web pour améliorer leur expérience visuelle. Si vous utilisez WordPress pour votre site, l'ajout du mode sombre devrait être facile. Vous pouvez le faire manuellement ou en installant un plugin.

Nous sommes d'accord que le plugin est la meilleure solution pour créer une version sombre de votre site WordPress. Mais nous avons aussi des réponses pour ceux qui pensent qu'il est impossible d'activer le mode sombre de WordPress sans plugin ! Ouais, c'est possible.

Ici, nous parlerons de l'ajout d'un mode sombre avec et sans l'aide d'un plugin. Et discutez également de celui qui excelle où. Plus loin dans l'article, vous découvrirez également l'un de nos plugins préférés appelé QS Dark Mode.

Alors restez à l'écoute!

Avantages de l'utilisation du mode sombre dans WordPress

Pourquoi devriez-vous utiliser le mode sombre dans WordPress ? Il y a quelques bonnes raisons derrière cela. Vous réalisez personnellement son besoin en naviguant sur votre PC la nuit avec les yeux fatigués.

En tant que propriétaire de site Web, vous pouvez apporter de nombreux avantages aux utilisateurs en ajoutant ce mode à votre site Web. Et cela devrait également ajouter de la valeur à votre entreprise.

Il y a plus à ses avantages; Découvrons-en quelques-uns ci-dessous.

  • Réduit considérablement la lumière blanche provenant de l'écran de l'ordinateur
  • Réduit la fatigue oculaire
  • Il économise de l'énergie et augmente la durée de vie de la batterie
  • Augmente le temps passé sur la page en améliorant l'expérience utilisateur
  • Fournit une aura esthétique

Alors oui, ce sont à peu près les raisons pour lesquelles le mode sombre est une excellente option pour votre site WordPress.

Mode sombre WordPress sans plugin – est-ce possible ?

Vient maintenant la partie amusante. Ici, nous verrons comment vous pouvez éteindre les lumières de votre site WordPress sans installer de plugin.

Vous pouvez le faire de deux manières —

  1. Ajout du mode sombre à l'aide de HTML, CSS et JQuery
  2. Utilisation de thèmes prêts à l'emploi avec le mode sombre activé

Jetons un coup d'œil à ces deux méthodes en détail ci-dessous.

1) Ajoutez le mode sombre en utilisant HTML, CSS et JQuery

Si vous êtes un développeur de thèmes, vous devriez préférer cette méthode manuelle pour inclure une bascule en mode sombre sur votre site WordPress. Dans cette méthode, vous devez passer par un peu de codage lié à HTML, CSS et JQuery.

Ne vous inquiétez pas si vous trouvez le codage difficile car vous pouvez obtenir des extraits de code facilement disponibles ici. Vous pouvez donc simplement les copier et les coller à l'endroit approprié pour activer le mode sombre.

N'hésitez pas à utiliser ces extraits car ils sont open source et gratuits.

  • Ajouter l'extrait de code HTML

Tout d'abord, ajoutez l'extrait de code HTML pour créer un bouton bascule en mode sombre. Tout ce que vous avez à faire est de copier et coller l'extrait suivant dans l'en-tête ou le pied de page de votre thème.

<div class="wpnm-bouton">

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

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

</div>

  • Styliser avec CSS

Vous devez maintenant styliser votre bouton ou votre sélecteur de mode sombre avec l'extrait CSS suivant.

/* Sélecteur de mode sombre */

.wpnm-bouton {

taille de police : 16px

}

.wpnm-bouton-intérieur-gauche :vide {

marge-gauche : -0,625 em

}

.wpnm-button-inner-left : avant, .wpnm-button-inner-left : après {

dimensionnement de la boîte : border-box ;

marge : 0 ;

rembourrage : 0 ;

/*transition*/

-webkit-transition : 0,4 s d'entrée et de sortie ;

-moz-transition : 0,4 s d'entrée et de sortie ;

-o-transition : 0,4 s d'entrée et de sortie ;

transition : 0,4 s d'entrée et de sortie ;

contour : aucun

}

.wpnm-bouton .wpnm-bouton-inner, .wpnm-bouton .wpnm-bouton-inner-gauche {

affichage : bloc en ligne ;

taille de police : 0,875 em ;

position : relative ;

rembourrage : 0 em ;

hauteur de ligne : 1 em ;

curseur : pointeur ;

couleur : RVB (149, 149, 149, 0,51) ;

poids de la police : normal

}

.wpnm-bouton .wpnm-bouton-intérieur-gauche : avant {

contenu: ";

bloc de visualisation;

position : absolue ;

indice z : 1 ;

hauteur de ligne : 2,125 em ;

retrait de texte : 2,5 em ;

hauteur : 1em ;

largeur : 1em ;

marge : 0,25 em ;

/*border-radius*/

-webkit-border-radius : 100 % ;

-moz-bordure-rayon : 100 % ;

rayon de bordure : 100 % ;

droite : 1,625 em ;

bas : 0em ;

arrière-plan : #FFB200 ;

transformer : faire pivoter (-45 degrés) ;

boîte-ombre: 0 0 0.625em blanc

}

.wpnm-bouton .wpnm-bouton-intérieur-gauche : après {

contenu: "";

affichage : bloc en ligne ;

largeur : 2,5 em ;

hauteur : 1,5 em ;

-webkit-bordure-rayon : 1 em ;

-moz-bordure-rayon : 1 em ;

rayon de bordure : 1 em ;

arrière-plan : rgba (255, 255, 255, 0,15) ;

alignement vertical : milieu ;

marge : 0 0,625 em ;

bordure : 0.125em solide #FFB200

}

.wpnm-button.active .wpnm-button-inner-left:before {

droite : 1,0625 em ;

boîte-ombre : 0,3125em 0,3125em 0 0 #eee ;

fond : transparent

}

.wpnm-button.active .wpnm-button-inner-left:après {

arrière-plan : rgba(0, 0, 0, 0,15) ;

bordure : 0,125 em blanc solide

}

.wpnm-bouton .wpnm-bouton-intérieur-gauche {

couleur : RVB(250, 250, 250, 0,51) ;

poids de la police : gras

}

.wpnm-button.active .wpnm-button-inner-left {

couleur : RVB (149, 149, 149, 0,51) ;

poids de la police : normal

}

.wpnm-bouton.active .wpnm-bouton-intérieur-gauche + .wpnm-bouton-intérieur {

couleur : RVB(250, 250, 250, 0,51) ;

poids de la police : gras

}

Cet extrait provient d'un plugin, et le crédit revient à l'auteur du plugin, Marko Arula.

  • Ajouter une classe CSS en mode sombre à la balise Body

Vous devez maintenant ajouter cette classe particulière à la balise body car cela vous permettra de personnaliser la mise en page ultérieurement.

Faisons cela.

jQuery(fonction($) {

/*Cliquez sur l'icône du mode sombre. Ajoutez des classes et des wrappers en mode sombre.

Stocker les préférences de l'utilisateur à travers les sessions*/

$('.wpnm-bouton').click(fonction() {

//Afficher la lune ou le soleil

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

//Si le mode sombre est sélectionné

si ($('.wpnm-bouton').hasClass('active')) {

//Ajouter une classe de mode sombre au corps

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

// Enregistrer les préférences de l'utilisateur dans le stockage

localStorage.setItem('darkMode', vrai);

} autre {

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

localStorage.removeItem('darkMode');

}

})

//Vérifier le stockage. Afficher les préférences de l'utilisateur

si (localStorage.getItem("darkMode")) {

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

$('.wpnm-bouton').addClass('actif');

}

})

Vous pouvez maintenant inspecter et tester si la classe CSS "mode sombre" est ajoutée en tant que classe de corps. Ensuite, ajoutez un fond sombre pour voir si cela fonctionne bien.

body.dark-mode * {

arrière-plan : #333 ;

}

Puisque nous le faisons dans le navigateur ou côté client et que le serveur ne sait rien, vous verrez que le mode sombre est chargé après le chargement du mode clair. Ici, le corps est rendu sans mode sombre en action, et JS attend que le DOM se charge avant d'ajouter la classe.

Ce n'est donc pas une solution parfaite pour les utilisateurs ; il devrait y avoir une meilleure façon d'améliorer l'expérience. Découvrons quoi.

  • Utiliser des cookies pour stocker les préférences de l'utilisateur via des sessions

Voyons donc comment vous pouvez ajouter la classe body au serveur pour qu'elle se charge avant de servir. La meilleure façon de le faire est d'utiliser des cookies pour stocker les préférences de l'utilisateur. De cette façon, vous devez créer un cookie pour la préférence de mode sombre de l'utilisateur et ajouter la classe de corps en mode sombre en conséquence.

Cela activera la classe de corps en mode sombre lors du rendu HTML. Vous devez donc réécrire le code JS de la manière suivante.

jQuery(fonction($) {

//Créer l'objet cookie

var cookieStorage = {

setCookie : fonction setCookie(clé, valeur, heure, chemin) {

var expire = nouvelle Date();

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

var valeurchemin = ”;

if (typeof path !== 'undefined') {

cheminValeur = 'chemin=' + chemin + ';';

}

document.cookie = clé + '=' + valeur + ';' + pathValue + 'expires=' + expires.toUTCString();

},

getCookie : fonction getCookie(clé) {

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

retourner keyValue ? valeur_clé[2] : null ;

},

removeCookie : fonction removeCookie(clé) {

document.cookie = clé + '=; Max-Age=0 ; chemin=/';

}

} ;

// Cliquez sur l'icône du mode sombre. Ajoutez des classes et des wrappers en mode sombre. Stocker les préférences de l'utilisateur à travers les sessions

$('.wpnm-bouton').click(fonction() {

//Afficher la lune ou le soleil

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

//Si le mode sombre est sélectionné

si ($('.wpnm-bouton').hasClass('active')) {

//Ajouter une classe de mode sombre au corps

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

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

} autre {

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

setTimeout(fonction() {

cookieStorage.removeCookie('yonkovNightMode');

}, 100);

}

})

//Vérifier le stockage. Afficher les préférences de l'utilisateur

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

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

$('.wpnm-bouton').addClass('actif');

}

})

  • Ajouter une classe de mode sombre via le filtre de classe de corps

Nous avons donc mis en place un cookie nommé "yonkovNightMode", Il sera activé lorsque l'utilisateur choisira l'option du mode sombre. Mais vous devez d'abord obtenir ce cookie avec PHP, puis l'ajouter à la classe body.

Copiez et collez l'extrait de code suivant dans le fichier functions.php de votre thème enfant.

<?php

/**

* Activer le mode thème sombre

* Bifurqué de https://wordpress.org/plugins/wp-night-mode/

*/

function yonkov_dark_mode($classes) {

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

//si le cookie est stocké..

si ($yonkov_night_mode !== ”) {

// Ajout de la classe de corps 'mode sombre'

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

}

retourne $classes ;

}

add_filter('body_class', 'yonkov_dark_mode');

Vous avez terminé

Vous avez donc créé un prototype entièrement fonctionnel d'une mise en page en mode sombre. Les extraits ont été extraits des plugins WordPress open source. Vous pouvez donc l'utiliser sur n'importe lequel de vos sites Web WordPress pour ajouter l'option de mode sombre pour une meilleure expérience utilisateur.

2. Utilisez des thèmes WordPress prêts à l'emploi avec l'option Mode sombre

Que diriez-vous de choisir un thème WordPress prêt à l'emploi qui a déjà un bouton bascule en mode sombre installé. De cette façon, vous pouvez utiliser le mode sombre dans votre site WordPress sans utiliser de plugin. Cela vous aidera également à éviter la personnalisation, car la plupart des thèmes doivent être personnalisés avec le plug-in Night Mode ou des codes CSS personnalisés.

Alors, quels sont les thèmes WordPress qui prennent en charge le mode sombre avec le mode clair ? Ici, nous vous avons apporté quelques thèmes WordPress populaires avec une mise en page en mode sombre. Découvrons-le.

  • Twenty Twenty One : Il s'agit du thème WordPress par défaut fourni avec une mise en page en mode sombre. Par défaut, il est désactivé et vous devez l'activer à partir des options du thème.
  • Estera : C'est un thème WordPress populaire pour les sites WooCommerce. Il est livré avec un bouton à bascule en mode sombre permettant aux utilisateurs de basculer entre le mode clair et le mode sombre.
  • HIghStarter : Ce thème WordPress léger est populaire pour les sites de portefeuille. Il dispose d'un commutateur de mode sombre sans plugin installé séparément. Et cela permet à l'utilisateur de basculer entre le mode clair et le mode sombre.
  • Mate : C'est un thème WordPress magnifiquement conçu qui permet de choisir entre le mode clair ou sombre directement depuis l'en-tête du site.

Manuel ou plugin Quelle méthode utiliser pour l'activation du mode sombre ?

Nous avons déjà expliqué comment activer manuellement le mode sombre sur votre site Web WP. Et nous savons que beaucoup d'entre vous trouveront que l'activation du mode sombre est compliquée, en particulier avec la partie codage.

Nous vous recommandons donc de le prendre comme deuxième option. Parce que lorsqu'il s'agit de choisir entre les méthodes manuelles ou de plug-in, nous préférons opter pour l'option de plug-in car elle peut rapidement et facilement ajouter un bouton bascule en mode sombre sur le site.

En parlant d'un plugin parfait, nous avons notre préféré à recommander ici : le plugin QS Dark Mode. C'est un plugin qui apporte un magnifique schéma sombre à votre site et vous permet de faire face à la tendance "devenir sombre".

Voyons pourquoi vous devriez installer un plugin en mode sombre - en particulier le plugin QS Dark Mode et ne pas utiliser la méthode manuelle.

Plugin QS Dark Mode : la solution parfaite pour le mode sombre

Il existe de nombreuses raisons pour lesquelles le plug-in QS Dark Mode peut être une solution de mode sombre parfaite pour votre site Web. Certains d'entre eux incluent:

  • C'est gratuit
  • Prise en charge CSS personnalisée
  • Différents styles de commutateurs sombres, y compris différentes animations et textes CTA
  • Offre un mode sombre basé sur le temps
  • Option pour optimiser l'emplacement des boutons
  • Large gamme de combinaisons de couleurs sombres
  • Prise en charge des images et de la taille de police en mode sombre
  • WooCommerce pris en charge

En ce qui concerne l'installation du plugin, c'est comme si vous installiez n'importe quel autre plugin sur votre site WordPress. Mais si vous êtes toujours dans une situation difficile, nous pouvons vous aider avec quelques instructions ici. Allons vérifier.

  • Téléchargez le plugin QS Mode et téléchargez les fichiers dans le répertoire concerné, qui est généralement le répertoire /wp-content/plugins/plugin-name
  • Pour installer le plugin directement depuis l'écran des plugins WordPress. Cliquez sur Plugins > Ajouter nouveau dans le tableau de bord WP, ​​recherchez ensuite le plugin dans la barre de recherche, puis cliquez sur installer.
  • Activez le plugin QS Dark Mode depuis l'écran 'Plugins'
  • Une fois activé, votre mode sombre devrait être activé.
  • Vous pouvez passer en mode sombre en cliquant sur la bascule sur votre écran
  • Cliquez à nouveau sur la bascule pour activer le mode lumière
  • Pour personnaliser, vous pouvez vérifier tous les paramètres dans la barre latérale WP Admin Dark Mode du plugin

Puis-je utiliser le jeu de couleurs lorsque le mode sombre est activé ?

Le mode sombre cherche à réduire la quantité de couleur blanche ou de lumière bleue provenant de l'écran. Cela ne signifie pas que vous devez devenir noir tout le temps. Vous pouvez toujours choisir entre des schémas de couleurs même lorsque le mode sombre est activé, comme ce que vous pouvez faire avec le plugin QS Dark Mode.

Mais les couleurs sont choisies de manière à ce que le contenu soit affiché en contraste élevé avec les couleurs claires de premier plan et les couleurs sombres de fond.

Conclusion

Il est donc possible d' ajouter le mode sombre au site Web WordPress sans plugin. Mais à moins que vous ne soyez vous-même un développeur de thème ou un codeur, vous ne préférerez pas opter pour cette méthode manuelle pour le faire.

Au lieu de cela, il serait plus sage et plus facile d'ajouter un plugin en mode sombre. Nous avons mentionné notre plugin préféré, le plugin QS Dark Mode, que vous pouvez envisager pour rendre votre site plus présentable et apaisant pour les yeux.

N'oubliez pas qu'il ne s'agit pas seulement de la santé de vos yeux, mais aussi de l'attrait esthétique de votre site Web. Ce faisant, vous pouvez ajouter une aura à l'expérience visuelle globale tout en améliorant l'engagement des utilisateurs.

Astra Pro vs Elementor Pro - Comparaison tête à tête