Eklentisiz WordPress Karanlık Modu – Mümkün mü?

Yayınlanan: 2022-10-18

İçindekiler

Eklentisiz WordPress Karanlık Modu Hakkında

Muhtemelen ekranın önünde çok fazla zaman geçirerek gözlerinizi aşırı derecede yormuşsunuzdur. Bu yüzden bilgisayarları kullanırken onları sakinleştirmeniz önemlidir. Gözlerinizi dinlendirmenin en etkili yollarından biri, ekran görüntü ayarını karanlık moda değiştirmektir.

Web sitesi sahipleri, görsel deneyimlerini geliştirmek için web sitelerine karanlık bir mod eklemeli ve ekleyebilir. Siteniz için WordPress kullanıyorsanız, karanlık modu eklemek kolay olabilir. Bunu hem manuel olarak hem de bir eklenti yükleyerek yapabilirsiniz.

Eklentinin, WordPress web siteniz için karanlık bir sürüm oluşturmak için en iyi çözüm olduğu konusunda hemfikiriz. Ancak, eklenti olmadan WordPress karanlık modunu etkinleştirmenin imkansız olduğunu düşünenler için de yanıtlarımız var! Evet, mümkün.

Burada, eklentili ve eklentisiz bir karanlık mod eklemekten bahsedeceğiz. Ayrıca hangisinin nerede üstün olduğunu tartışın. Makalenin ilerleyen bölümlerinde, QS Dark Mode adlı favori eklentilerimizden birini de tanıyacaksınız.

Bu yüzden bizi izlemeye devam edin!

WordPress'te Karanlık Modu kullanmanın faydaları

WordPress'te neden Karanlık Modu kullanmalısınız? Bunun arkasında bazı iyi nedenler var. Geceleri yorgun gözlerle PC'nizde gezinirken kişisel olarak ihtiyacını anlıyorsunuz.

Bir web sitesi sahibi olarak, bu modu web sitenize ekleyerek kullanıcılara birçok fayda sağlayabilirsiniz. Ayrıca işinize değer katmalıdır.

Faydalarının daha fazlası var; bunlardan bazılarını aşağıda bulalım.

  • Bilgisayar ekranından gelen beyaz ışığı önemli ölçüde en aza indirir
  • Göz yorgunluğunu azaltır
  • Enerji tasarrufu sağlar ve pil ömrünü uzatır
  • Kullanıcı deneyimini geliştirerek Sayfada Geçirilen Süreyi Artırır
  • Estetik bir aura sağlar

Evet, Dark Mode'un WordPress siteniz için harika bir seçenek olmasının nedenleri bunlar.

Eklentisiz WordPress Karanlık Modu – Mümkün mü?

Şimdi eğlenceli kısım geliyor. Burada, herhangi bir eklenti yüklemeden WordPress sitenizin ışıklarını nasıl kapatabileceğinizi göreceğiz.

Bunu yapmanın iki yolu vardır -

  1. HTML, CSS ve JQuery kullanarak karanlık mod ekleme
  2. Karanlık mod etkinken hazır temaları kullanma

Her iki yöntemi de aşağıda ayrıntılı olarak inceleyelim.

1) HTML, CSS ve JQuery kullanarak karanlık mod ekleyin

Bir tema geliştiricisiyseniz, WordPress sitenize karanlık mod geçişi eklemek için bu manuel yöntemi tercih etmelisiniz. Bu yöntemde HTML, CSS ve JQuery ile ilgili biraz kodlama yapmanız gerekiyor.

Kodlamayı zor bulursanız endişelenmeyin çünkü burada hazır kod parçacıklarını bulabilirsiniz. Böylece karanlık modu etkinleştirmek için bunları kopyalayıp uygun yere yapıştırabilirsiniz.

Açık kaynak kodlu ve ücretsiz oldukları için bu parçacıkları kullanmaktan çekinmeyin.

  • HTML Kod Parçacığı'nı ekleyin

İlk olarak, bir karanlık mod geçiş düğmesi oluşturmak için HTML pasajını ekleyin. Tek yapmanız gereken aşağıdaki parçacığı kopyalayıp temanızın üstbilgisine veya altbilgisine yapıştırmak.

<div class=”wpnm düğmesi”>

<div class=”wpnm-button-inner-sol”></div>

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

</div>

  • CSS ile Stil

Şimdi karanlık mod düğmenizi veya değiştiricinizi aşağıdaki CSS parçacığıyla biçimlendirmeniz gerekiyor.

/* Karanlık mod değiştirici */

.wpnm düğmesi {

yazı tipi boyutu: 16px

}

.wpnm-button-inner-sol:boş {

sol kenar boşluğu: -0.625em

}

.wpnm-düğme-iç-sol:önce, .wpnm-düğme-iç-sol:sonra {

kutu boyutlandırma: kenarlık kutusu;

kenar boşluğu: 0;

dolgu: 0;

/*geçiş*/

-webkit-geçiş: 0.4s giriş-çıkış kolaylığı;

-moz geçişi: 0.4s giriş-çıkış kolaylığı;

-o-geçiş: 0.4s giriş-çıkış kolaylığı;

geçiş: 0.4s giriş-çıkış kolaylığı;

anahat: yok

}

.wpnm-düğmesi .wpnm-düğmesi-iç, .wpnm-düğmesi .wpnm-düğmesi-iç-sol {

ekran: satır içi blok;

yazı tipi boyutu: 0.875em;

pozisyon: göreceli;

dolgu: 0em;

satır yüksekliği: 1em;

imleç: işaretçi;

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

yazı tipi ağırlığı: normal

}

.wpnm-button .wpnm-button-iç-sol:önce {

içerik: ";

Ekran bloğu;

pozisyon: mutlak;

z-endeksi: 1;

satır yüksekliği: 2.125em;

metin girintisi: 2.5em;

yükseklik: 1em;

genişlik: 1em;

kenar boşluğu: 0.25em;

/*sınır yarıçapı*/

-webkit-border-radius: %100;

-moz-border-radius: %100;

sınır yarıçapı: %100;

sağ: 1.625em;

alt: 0em;

arka plan: #FFB200;

dönüştür: döndür (-45 derece);

kutu gölgesi: 0 0 0.625em beyaz

}

.wpnm-button .wpnm-button-iç-sol:sonra {

içerik: "";

ekran: satır içi blok;

genişlik: 2.5em;

yükseklik: 1.5em;

-webkit-border-radius: 1em;

-moz-border-radius: 1em;

sınır yarıçapı: 1em;

arka plan: rgba(255, 255, 255, 0.15);

dikey hizalama: orta;

marj: 0 0.625em;

kenarlık: 0.125em düz #FFB200

}

.wpnm-button.active .wpnm-button-iç-sol:önce {

sağ: 1.0625em;

kutu gölgesi: 0.3125em 0.3125em 0 0 #eee;

arka plan: şeffaf

}

.wpnm-button.active .wpnm-button-iç-sol:sonra {

arka plan: rgba(0, 0, 0, 0.15);

sınır: 0.125em düz beyaz

}

.wpnm-button .wpnm-button-iç-sol {

renk: rgba(250, 250, 250, 0,51);

yazı tipi ağırlığı: kalın

}

.wpnm-button.active .wpnm-button-iç-sol {

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

yazı tipi ağırlığı: normal

}

.wpnm-button.active .wpnm-button-iç-sol + .wpnm-button-inner {

renk: rgba(250, 250, 250, 0,51);

yazı tipi ağırlığı: kalın

}

Bu snippet bir eklentiden alınmıştır ve kredi eklentinin yazarı Marko Arula'ya aittir.

  • Gövde Etiketine Karanlık Mod CSS Sınıfı Ekle

Şimdi, bu belirli sınıfı gövde etiketine eklemeniz gerekiyor, çünkü bu, daha sonra düzeni özelleştirmenize izin verecektir.

Hadi bunu yapalım.

jQuery(işlev($) {

/*Karanlık mod simgesine tıklayın. Karanlık mod sınıfları ve sarmalayıcılar ekleyin.

Oturumlar aracılığıyla kullanıcı tercihini saklayın*/

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

// Ay veya güneşi göster

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

//Karanlık mod seçiliyse

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

// Gövdeye karanlık mod sınıfı ekleyin

$('body').addClass('karanlık mod');

//Kullanıcı tercihini Depolamaya kaydet

localStorage.setItem('darkMode', true);

} başka {

$('body').removeClass('karanlık mod');

localStorage.removeItem('darkMode');

}

})

//Depolamayı kontrol et. Kullanıcı tercihini göster

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

$('body').addClass('karanlık mod');

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

}

})

Artık "karanlık mod" CSS Sınıfının bir gövde sınıfı olarak eklenip eklenmediğini inceleyebilir ve test edebilirsiniz. Ardından, düzgün çalışıp çalışmadığını görmek için koyu bir arka plan ekleyin.

body.dark-mode * {

arka plan: #333;

}

Tarayıcı veya istemci tarafında yaptığımız ve sunucunun hiçbir şey bilmediği için, light mod yüklendikten sonra karanlık modun yüklendiğini göreceksiniz. Burada gövde, karanlık mod olmadan işlenir ve JS, sınıfı eklemeden önce DOM'nin yüklenmesini bekler.

Dolayısıyla kullanıcılar için mükemmel bir çözüm değil; deneyimi iyileştirmenin daha iyi bir yolu olmalı. Ne olduğunu öğrenelim.

  • Oturumlar Yoluyla Kullanıcı Tercihlerini Saklamak için Tanımlama Bilgilerini Kullanın

Öyleyse, servis yapmadan önce yüklenmesini sağlamak için gövde sınıfını sunucuya nasıl ekleyebileceğinizi görelim. Bunu yapmanın en iyi yolu, kullanıcı tercihlerini saklamak için çerezleri kullanmaktır. Bu şekilde, kullanıcının karanlık mod tercihi için bir çerez oluşturmanız ve buna göre karanlık mod gövde sınıfını eklemeniz gerekir.

Html oluşturulurken karanlık mod gövde sınıfını etkinleştirir. Yani JS kodunu aşağıdaki şekilde yeniden yazmanız gerekiyor.

jQuery(işlev($) {

//Çerez nesnesini oluştur

var cookieStorage = {

setCookie: function setCookie(anahtar, değer, zaman, yol) {

var sona eriyor = new Date();

Expires.setTime(expires.getTime() + zaman);

var pathValue = ”;

if (typeof path !== 'tanımsız') {

pathValue = 'yol=' + yol + ';';

}

belge.cookie = anahtar + '=' + değer + ';' + pathValue + 'expires=' + expires.toUTCString();

},

getCookie: function getCookie(anahtar) {

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

keyValue döndür? keyValue[2] : boş;

},

removeCookie: işlev removeCookie(anahtar) {

belge.cookie = anahtar + '=; Maks-Yaş=0; yol=/';

}

};

//Karanlık mod simgesine tıklayın. Karanlık mod sınıfları ve sarmalayıcılar ekleyin. Oturumlar aracılığıyla kullanıcı tercihini saklayın

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

// Ay veya güneşi göster

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

//Karanlık mod seçiliyse

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

// Gövdeye karanlık mod sınıfı ekleyin

$('body').addClass('karanlık mod');

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

} başka {

$('body').removeClass('karanlık mod');

setTimeout(işlev() {

cookieStorage.removeCookie('yonkovNightMode');

}, 100);

}

})

//Depolamayı kontrol et. Kullanıcı tercihini göster

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

$('body').addClass('karanlık mod');

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

}

})

  • Gövde sınıfı filtresi aracılığıyla karanlık mod sınıfı ekleyin

Bu yüzden “yonkovNightMode” adında bir çerez kurduk, kullanıcı karanlık mod seçeneğini seçtiğinde aktif hale gelecek. Ancak bu çerezi önce PHP ile almanız ve ardından bunu vücut sınıfına eklemeniz gerekir.

Aşağıdaki parçacığı kopyalayıp alt temanızdaki functions.php dosyasına yapıştırın.

<?php

/**

* Karanlık tema modunu etkinleştir

* https://wordpress.org/plugins/wp-night-mode/ adresinden çatallanmıştır.

*/

function yonkov_dark_mode($sınıflar) {

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

//çerez saklanırsa..

if ($yonkov_night_mode !== ”) {

// 'karanlık mod' gövde sınıfı ekle

return array_merge($classes, array('karanlık mod'));

}

$sınıflarını döndür;

}

add_filter('body_class', 'yonkov_dark_mode');

Sen bittin

Yani aslında bir karanlık mod düzeninin tamamen işlevsel bir prototipini yarattınız. Snippet'ler açık kaynaklı WordPress eklentilerinden alınmıştır. Böylece, daha iyi bir kullanıcı deneyimi için karanlık mod seçeneğini eklemek için WordPress web sitelerinizin herhangi birinde kullanabilirsiniz.

2. Karanlık Mod Seçeneğine Sahip Hazır WordPress Temalarını Kullanın

Zaten yüklü bir karanlık mod geçiş düğmesi olan hazır bir WordPress teması seçmeye ne dersiniz? Bu sayede WordPress sitenizde eklenti kullanmadan karanlık modu kullanabilirsiniz. Temaların çoğunun Gece Modu Eklentisi veya özel CSS kodları ile özelleştirilmesi gerektiğinden, özelleştirmeden kaçınmanıza da yardımcı olur.

Peki, ışık moduyla birlikte karanlık modu destekleyen bazı WordPress temaları nelerdir? Burada size karanlık mod düzenine sahip bazı popüler WordPress temalarını getirdik. Hadi bulalım.

  • Twenty Twenty One: Bu, karanlık mod düzeniyle gelen varsayılan WordPress temasıdır. Varsayılan olarak devre dışıdır ve bunu Tema Seçeneklerinden etkinleştirmeniz gerekir.
  • Estera: WooCommerce siteleri için popüler bir WordPress temasıdır. Kullanıcıların aydınlık ve karanlık mod arasında geçiş yapmasına izin veren bir karanlık mod geçiş düğmesi ile birlikte gelir.
  • HIghStarter: Bu hafif WordPress Teması, portföy siteleri için popülerdir. Ayrı olarak kurulmuş bir eklenti olmadan karanlık mod anahtarına sahiptir. Bu da kullanıcının aydınlık ve karanlık mod arasında geçiş yapmasını sağlar.
  • Mate: Doğrudan site başlığından açık veya koyu mod arasında seçim yapmanızı sağlayan güzel tasarlanmış bir WordPress temasıdır.

Manuel Veya Eklenti Karanlık Mod Aktivasyonu İçin Hangi Yöntem Kullanılır?

WP web sitenizde karanlık modu manuel olarak nasıl etkinleştirebileceğinizi zaten tartıştık. Ve birçoğunuzun, özellikle kodlama kısmında, karanlık modun zahmetli olmasını sağlayacağını biliyoruz.

Bu yüzden ikinci seçenek olarak almanızı öneririz. Çünkü manuel veya eklenti yöntemleri arasında seçim yapmak söz konusu olduğunda, siteye hızlı ve kolay bir şekilde karanlık mod geçiş düğmesi ekleyebileceği için eklenti seçeneğine gitmeyi tercih ediyoruz.

Mükemmel bir eklentiden bahsetmişken, burada önereceğimiz en sevdiğimiz eklenti var: QS Karanlık Mod Eklentisi. Sitenize muhteşem bir karanlık düzeni getiren ve 'karanlığa giden' trendi ile başa çıkmanıza izin veren bir eklentidir.

Neden bir karanlık mod eklentisi - özellikle QS Karanlık Mod Eklentisi - yüklemeniz gerektiğini ve manuel yöntemle gitmemeniz gerektiğini kontrol edelim.

QS Karanlık Mod Eklentisi: Mükemmel Karanlık Mod Çözümü

QS Dark Mode Plugin'in web siteniz için mükemmel bir karanlık mod çözümü olmasının birkaç nedeni vardır. Bunlardan bazıları şunlardır:

  • Bedava
  • Özel CSS desteği
  • Farklı animasyonlar ve CTA metinleri dahil olmak üzere farklı karanlık anahtar stilleri
  • Zamana dayalı karanlık mod sunar
  • Düğme konumunu optimize etme seçeneği
  • Çok çeşitli koyu renk şemaları
  • Karanlık mod tabanlı görüntü ve yazı tipi boyutu desteği
  • WooCommerce Desteklenir

Eklentinin kurulumu ile ilgili olarak, WordPress sitenize başka bir eklenti kurmak gibidir. Ancak hâlâ bir düzeltme yaşıyorsanız, burada size bazı talimatlarla yardımcı olabiliriz. Kontrol edelim.

  • QS Modu eklentisini indirin ve dosyaları genellikle /wp-content/plugins/plugin-name dizini olan ilgili dizine yükleyin.
  • Eklentiyi doğrudan WordPress eklentileri ekranından yüklemek için. WP panosundan Eklentiler > Yeni Ekle'ye tıklayın, ardından arama çubuğunda eklentiyi arayın ve yükle'ye tıklayın.
  • 'Eklentiler' ekranından QS Dark Mode eklentisini etkinleştirin
  • Etkinleştirildiğinde, karanlık modunuz etkinleştirilmelidir.
  • Ekranınızdaki geçiş düğmesine tıklayarak karanlık moda geçebilirsiniz.
  • Işık modunu etkinleştirmek için geçiş düğmesine tekrar tıklayın
  • Özelleştirmek için eklentinin WP Admin Dark Mode Kenar Çubuğundaki tüm ayarları kontrol edebilirsiniz.

Karanlık Mod Etkin Olduğunda Renk Düzenini Kullanabilir miyim?

Karanlık mod, ekrandan gelen beyaz renk veya mavi ışık miktarını azaltır. Bu, her zaman siyah gitmeniz gerektiği anlamına gelmez. QS Dark Mode Plugin ile yapabileceğiniz gibi, karanlık mod etkinleştirildiğinde bile renk şemaları arasında seçim yapabilirsiniz.

Ancak renkler, içeriğin açık ön plan ve koyu renk renkleriyle yüksek kontrastta görüntüleneceği şekilde seçilir.

Çözüm

WordPress web sitesine eklenti olmadan karanlık mod eklemek mümkün mü? Ancak kendiniz bir tema geliştiricisi veya kodlayıcı değilseniz, bunu yapmak için bu manuel yöntemi tercih etmeyeceksiniz.

Bunun yerine, karanlık mod eklentisi eklemek daha akıllıca ve daha kolay olurdu. Favori eklentimiz olan QS Dark Mode Plugin'den bahsetmiştik, sitenizi daha şık ve göz yoran bir hale getirmek için değerlendirebilirsiniz.

Unutmayın, kararmak sadece gözlerinizin sağlığı ile ilgili değil, aynı zamanda web sitenizin estetik çekiciliği ile de ilgilidir. Bunu yaparak, genel görsel deneyime bir aura ekleyebilir ve aynı zamanda kullanıcı katılımını iyileştirebilirsiniz.

Astra Pro ve Elementor Pro – Başa Baş Karşılaştırma