WordPress'te Gece Modu Nasıl Etkinleştirilir

Bir süredir işletim sistemleri ve uygulamalar, gece saatlerinde ışık emisyonunu azaltmak ve böylece gözlerinize daha az zarar vermek için beyaz arka planların yerini siyah arka planların aldığı grafik arayüzlerinin sürümlerini içeriyor. Bu, gece modu olarak bilinir.

İster modaya göre isterse gerçekten işe yaradığı için gece modu giderek daha popüler hale geliyor. Siyah ekranlar beyaz ekranlardan daha az enerji kullandığından gece modlarının çevre için faydaları olmasını sağlayanlar var. Ancak bu tür karanlık modları eleştirenler de var.

Bu, web sitenizde de olmasını istediğiniz bir işlev olabilir ve bunun için bugün WordPress'teki gece modundan bahsedeceğiz.

WordPress, varsayılan olarak henüz bir gece modu içermez, ancak hem WordPress Kontrol Panelinde hem de ön uçta gece modu ekleme seçenekleri vardır. Her zamanki gibi, eklentiler, bu ilginç görsel işlevsellik ile WordPress'i genişletmenin çözümüdür.

WordPress Kontrol Panelinde Gece Modu Nasıl Etkinleştirilir

WordPress Dashboard'da gece modunu etkinleştirmenizi sağlayan WordPress için Dark Mode eklentisi ile başlıyoruz. Kullanımı kolay ve ücretsizdir.

İlk şey, eklentiyi kurmak ve etkinleştirmektir. Yukarıdaki ekran görüntüsünde görebileceğiniz gibi, onu doğrudan WordPress Eklenti Dizininde, doğrudan WordPress panosunda Eklentiler menüsü aracılığıyla bulabiliriz.

Dark Mode eklentisi yüklendikten sonra, WordPress'inizin her bir kullanıcısının profilinde bunu Kontrol Panelinde etkinleştirme seçeneği olacaktır:

Bu eklentinin iyi yanı, WordPress Dashboard'u karanlık modda veya normal modda nasıl görmek istediğini seçen her kullanıcının kendisidir. Bu sayede WordPress Dashboard'u her zamanki gibi beyaz arka plan ile kullanmaya devam etmek isteyen biri varsa, bunu yapmasında bir sakınca yoktur.

Önceki ekran görüntüsünde karanlık modu etkinleştirmenin sonucunu görebilirsiniz. Ve harika görünüyor! Siyah arka plan renginin sadece yan menüde değil, sayfanın orta kısmında da bulunmasının sonucunu gerçekten beğendim.

Ne yazık ki, WordPress Dark Mode eklentisi için bekleyen bir sorun var: Gutenberg blok düzenleyicisiyle uyumluluk sağlamak. Aşağıdaki ekran görüntüsünde, koyu arka planı Gutenberg'e henüz uygulayamadığını görebilirsiniz:

Eklenti yeterince başarılıysa ve kullanıcılar isterse, geliştiricileri, blok düzenleyicinin de gece modunda görünmesi için onu uyarlayacaktır. Her halükarda, Gutenberg'in çılgın gelişme hızı ve tarzlarındaki “sık” güncellemeleri, adaptasyonu biraz karmaşık hale getiriyor.

WordPress Ziyaretçileriniz İçin Gece Modunu Nasıl Etkinleştirebilirsiniz?

Dark Mode eklentisi, WordPress Dashboard'a yalnızca gece modu ekler. Web sitenizin geri kalanı, yani ziyaretçilerin gördüğü ön uç, herhangi bir değişiklik yaşamadan aynı görünmeye devam edecektir.

Ziyaretçilerinizin açık renkli arka planlar yerine koyu arka planlar kullanarak web sitenizde gece modunu etkinleştirme seçeneğine sahip olmasını istiyorsanız, WP Night Mode eklentisini yüklemeniz gerekir.

Dark Mode gibi bu eklenti tamamen ücretsizdir ve ayrıca WordPress Eklenti Dizininde de bulunur.

Kurulduktan sonra, Ayarlar'da veya herhangi bir ek menüde hiçbir şey görmeyeceksiniz. Yapmanız gereken Görünüm menüsüne gitmek ve orada menülerinizi düzenlemek. Ana menünüzde, belirli bir URL olmadan özel bir bağlantı eklemeniz gerekir. Bu yeni menü öğesi, gece modunu etkinleştirmek ve devre dışı bırakmak için anahtarı eklememize yardımcı olacaktır.

Menü yönetim arayüzünde, aşağıdaki ekran görüntüsünde gördüğünüz gibi CSS sınıfları ekleme seçeneğini etkinleştirmek için sağ üst köşede bulacağınız ekran seçeneklerini açmanız gerekir:

Bunu yaptıktan sonra, daha önce eklediğimiz menü öğesini düzenleyeceğiniz zaman, CSS sınıflarını ekleyebileceğiniz ek bir alan göreceksiniz. Buraya CSS sınıfını wp-night-mode . Bu sınıf, WP Night Mode'un gece modu anahtarı olarak hangi öğenin kullanılması gerektiğini belirlemesi gereken sınıftır.

Varsayılan olarak, WP Night Mode, arayüzünüze koyu renkler eklemeyen bir eklentidir. Hem arka plan, hem metin hem de linkler için göstermek istediğiniz koyu renkleri seçen kişi olmalısınız. Bu renkleri tanımlamak için Görünüm menüsüne gitmeli ve orada Özelleştir menüsünü açmalısınız.

WordPress özelleştirici açılacak ve orada Gece Modu seçeneğini bulacaksınız. Bunu seçerseniz, varsayılan olarak gece modunu etkinleştirme ve birkaç stil oluşturma seçeneklerine sahip olduğunuzu göreceksiniz. Her stilde arka plan rengini, metnin rengini ve bağlantıların rengini tanımlarsınız.

Özelleştiricinin iyi yanı, web sitenizin seçilen renklerle nasıl görüneceğinin gerçek bir önizlemesini görebilmenizdir:

Ne yazık ki sonuç mükemmel değil: Bazı öğeler gece modunda garip görünen açık renkli arka planlara sahip. Ama endişelenme, bunu düzeltebiliriz. Bu küçük sorunları gidermek için özelleştiricinin kendisinden ek CSS kuralları ekleyebilirsiniz.

Özelleştiriciye geri dönün ve Ek CSS seçeneğini göreceksiniz. Onu seçerseniz, tam oraya CSS kuralları yazma olanağınız olur. Bu kurallar aşağıdaki türden olabilir:

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

Eklentinin gerçekte yaptığının, web sitenizin body etiketine CSS sınıfını wp-night-mode-on uygulamak olduğunu unutmayın. Bu nedenle, bir HTML öğesinin arka planını düzeltmek ve onu karanlık hale getirmek istiyorsanız, tek yapmanız gereken o öğe için bir seçici bulmak ve body etiketi wp-night-mode-on sınıfına sahip olduğunda düzeltmeyi uygulamaktır.

Aşağıdaki karşılaştırmada, uyguladığımız renklerle normal mod ve gece modu arasında temel bir karşılaştırma görebilirsiniz:

Birkaç eklenti sayesinde WordPress'inize gece modu eklemek çok kolaydır. Bugün, WordPress Dashboard'da ve ön uçta gece modunu etkinleştirmemize yardımcı olan eklentileri inceledik.

Uygulamalarınızdaki gece modlarının düzenli kullanıcısı mısınız? Fikrinizle aşağıya yorum yapmayı unutmayın!

Unsplash'ta Priscilla Du Preez tarafından öne çıkan görsel.