WordPress sitesine karanlık mod nasıl eklenir
Bu yazıda, WordPress’e karanlık modun nasıl ekleneceğini tartışacağız. Son zamanlarda, birçok büyük web sitesi kullanıcı arayüzlerine YouTube, Reddit, Stack Overflow, Facebook ve daha fazlası gibi karanlık mod ekledi. Ekim 2019’da meydana gelen devasa artış, Instagram’a ve diğer birkaç ana uygulamaya karanlık moda eklenmesi ile çakıştı. İstisna hariç tutulur, karanlık modanın son yıllarda giderek daha popüler olduğunu görebilirsiniz. Birçok büyük şirket karanlık moda çağına döndüğünden, bunu da düşünmelisiniz. Sadece bir trend olmakla kalmaz, aynı zamanda kullanıcılarınız için de kullanışlıdır ve elde tutma seviyesini artırabilir. Bu, göz yorgunluğunu azaltır, ziyaretçilerin web sitenizi keşfetmek için kullanılan cihazın pil ömrünü arttırır ve harika görünüyor.
WordPress sitenize karanlık mod eklemeyi düşünürseniz, bu görevi oldukça basitleştiren birkaç eklenti vardır. Bu blog yazısında, Dark WordPress modası sağlamak için kullandığımız eklentiyi tanıtacağız ve bu işlevi web sitenize eklemek için gereken adımları gözden geçireceğiz. WordPress sitemize karanlık mod eklemek için kullanacağımız gece moda eklentileri (karanlık) eklentiler gece modu olarak adlandırılır. Bu, WordPress depolarında kolayca bulunabilen ve web sitenize hızlı bir şekilde kurulabilen ücretsiz bir eklentidir.
Garip bir şekilde, eklenti sadece 2000 kurulumuna sahiptir, ancak iyi çalışır ve söylediklerini yapar. Belki de bu yüzden beşte 4.5 yıldız sıralaması var. Bir ajans olarak, bu eklentiyi, Dark Mode kolayca eklemenin bir yolu olarak iyi takip edilen bloglar içeren müşteri web sitelerimizin çoğunda kullanıyoruz. Eklentiyi yükledikten sonra ekranı açın mı? adapte olmak . WordPress için ayar arayüzü yüklendikten sonra “Gece Modu” sekmesini tıklayın. Şimdi WordPress için karanlık modunuzu ayarlamaya başlama zamanı. Karanlık Modunuzu Seçin ve Ayarla Rengi, eklentiyi yükledikten sonra, renk şemanızı seçmektir. Bunu çeşitli şekillerde yapabilirsiniz: Coolors.co kullanın. Bu aracı kendi renk şemanızı üretmek için kullanabilirsiniz veya diğer kullanıcıların yaratımlarını keşfedebilirsiniz.
Düz yukarı ters. Web siteniz tarafından kullanılan standart renk şemasını alabilir ve üzerindeki her rengi tersine çevirebilirsiniz. Bu işe yarayabilir, ancak genellikle renk iyi görünmek çok zordur.
Diğer kopya. Bu aslında bizim tavsiyemiz olacak. Karanlık modu olan ana platforma gidin ve kullandıkları genel renkleri kopyalayın.
Bir renk şeması yapmanıza yardımcı olmak için, kendi web sitenizde kullanabileceğiniz üç ayrı renk yaptık. Bu renkler Facebook, Reddit ve Firefox’tan kopyalandı.
Firefox Karanlık Modu
Düz yukarı ters. Web siteniz tarafından kullanılan standart renk şemasını alabilir ve üzerindeki her rengi tersine çevirebilirsiniz. Bu işe yarayabilir, ancak genellikle renk iyi görünmek çok zordur.
Diğer kopya. Bu aslında bizim tavsiyemiz olacak. Karanlık modu olan ana platforma gidin ve kullandıkları genel renkleri kopyalayın.
Bir renk şeması yapmanıza yardımcı olmak için, kendi web sitenizde kullanabileceğiniz üç ayrı renk yaptık. Bu renkler Facebook, Reddit ve Firefox’tan kopyalandı.
Firefox Karanlık Modu
Dark Moda Facebook Uygulaması
Reddit Karanlık Modu
Artık karanlık moda renkleri seçeneğinizden sonra, gece moda eklentisini kullanarak web sitenize uygulama zamanı. WordPress ayar arayüzündeki gece modu sekmesinde seçeneği çalıştırmaya başlayın. Anahtar stilini seçin, anahtarın boyutunu ayarlayın, ardından bağlantı imlecinin gövdeyi, metni, bağlantıları ve rengini değiştirin. Bu, küresel olarak web sitenize uygulanacaktır. Kullanıcı gece modunu etkinleştirdiğinde, bu renkler mevcut renk şemasının yerini alır. Ayrıca varsayılan olarak bir gece moduna sahip olmayı da seçebilirsiniz, bu da yeni renk şemanızı zaten oradan daha iyi seviyorsanız iyi bir seçimdir.
5 ayrı gece moda anahtarını seçebilir ve anahtarı web sitenizdeki herhangi bir yere kısa bir kod aracılığıyla yerleştirebilirsiniz.
5 ayrı gece moda anahtarını seçebilir ve anahtarı web sitenizdeki herhangi bir yere kısa bir kod aracılığıyla yerleştirebilirsiniz.
(Belirli konumlarda hangi anahtar stilini kullanmak istediğinizi belirlemek için stil özniteliklerini kullanın).
Karanlık modu daha fazla ayarlamak, eklentinin ek ayarlamalar olmadan WordPress web sitenize tam olarak çalışan tam bir moda sürümü eklemesini beklemek mantıklı değildir. Özellikle WordPress sayfalarının ve özel temaların üreticisiyle, ayarlama arayüzünde bu eklenti tarafından size verilen bazı seçenekler tüm web sitelerinize karanlık stili tam olarak uygulamayacaktır.
Bu eklentiyi gerçekten maksimuma kullanmak için devam etmeli ve bazı özel CSS eklemelisiniz. Endişelenmeyin, CSS’ye alışık olmasanız bile, bu çok kolay bir iştir. Web sitesindeki her öğe için nasıl bir gece moda stili ekleyeceğiniz adım adım size rehberlik edeceğim. Bu eklenti, gece/karanlık moda stilinin WordPress öğesine nasıl uygulanacağınızı söyler: Renkleri diğer birkaç öğede değiştirmek istiyorsanız, ek CSS alanları kullanabilirsiniz. Örnek CSS: Body.wp-Night-Mode-on .Element-Class {Color: #000; } Tek tek öğelerdeki rengi değiştirmek için yapmanız gereken tek şey karanlık moda geçmek ve nerede uygulanmadığını görmek. Ardından, gece modlarının uygulanmadığı, kontrol etmediği ve CSS kimliği veya sınıf adını almadığı öğeleri sağlayın. Bu örnekte, WordPress’teki tek tek öğelere karanlık moda stilini uygulamak için CSS kimliğini kullanacağız. Kimlik “#div_block-48-27” dir. Artık girişi bildiğimize göre, özel bir CSS çalıştıracağız ve gece modu etkinleştirildiğinde öğeye bir stil ekleyeceğiz. Bu CSS’nin yalnızca aktif karanlık modda uygulanması gerektiğini belirlemek için, bu önek uygulayın: body.wp-gece modu-on Bu, karanlık mod etkinleştirilmedikçe CSS kuvvetinin uygulanmayacağı anlamına gelir. Önekten sonra, öğelerinizin tanımlanmasını ekleyin. Bu örnekte kimliğimiz #div_block-48-27’dir. Bunun bir kimlik CSS olması gerekmez, aynı zamanda sınıf şeklinde olabilir.
Body.wp-night-mode-oon #div_block-48-27 {
} Şimdi CSS’nin tanımlanmasından sonra, karanlık mod etkinleştirildiğinde uygulanacak kuvveti ekleyebiliriz. Genellikle, değiştirmeniz gereken tek stil metnin arka plan rengi ve rengidir. Body.wp-night-mode-oon #div_block-48-27 {arka plan: #000;
Karanlık modu daha fazla ayarlamak, eklentinin ek ayarlamalar olmadan WordPress web sitenize tam olarak çalışan tam bir moda sürümü eklemesini beklemek mantıklı değildir. Özellikle WordPress sayfalarının ve özel temaların üreticisiyle, ayarlama arayüzünde bu eklenti tarafından size verilen bazı seçenekler tüm web sitelerinize karanlık stili tam olarak uygulamayacaktır.
Bu eklentiyi gerçekten maksimuma kullanmak için devam etmeli ve bazı özel CSS eklemelisiniz. Endişelenmeyin, CSS’ye alışık olmasanız bile, bu çok kolay bir iştir. Web sitesindeki her öğe için nasıl bir gece moda stili ekleyeceğiniz adım adım size rehberlik edeceğim. Bu eklenti, gece/karanlık moda stilinin WordPress öğesine nasıl uygulanacağınızı söyler: Renkleri diğer birkaç öğede değiştirmek istiyorsanız, ek CSS alanları kullanabilirsiniz. Örnek CSS: Body.wp-Night-Mode-on .Element-Class {Color: #000; } Tek tek öğelerdeki rengi değiştirmek için yapmanız gereken tek şey karanlık moda geçmek ve nerede uygulanmadığını görmek. Ardından, gece modlarının uygulanmadığı, kontrol etmediği ve CSS kimliği veya sınıf adını almadığı öğeleri sağlayın. Bu örnekte, WordPress’teki tek tek öğelere karanlık moda stilini uygulamak için CSS kimliğini kullanacağız. Kimlik “#div_block-48-27” dir. Artık girişi bildiğimize göre, özel bir CSS çalıştıracağız ve gece modu etkinleştirildiğinde öğeye bir stil ekleyeceğiz. Bu CSS’nin yalnızca aktif karanlık modda uygulanması gerektiğini belirlemek için, bu önek uygulayın: body.wp-gece modu-on Bu, karanlık mod etkinleştirilmedikçe CSS kuvvetinin uygulanmayacağı anlamına gelir. Önekten sonra, öğelerinizin tanımlanmasını ekleyin. Bu örnekte kimliğimiz #div_block-48-27’dir. Bunun bir kimlik CSS olması gerekmez, aynı zamanda sınıf şeklinde olabilir.
Body.wp-night-mode-oon #div_block-48-27 {
} Şimdi CSS’nin tanımlanmasından sonra, karanlık mod etkinleştirildiğinde uygulanacak kuvveti ekleyebiliriz. Genellikle, değiştirmeniz gereken tek stil metnin arka plan rengi ve rengidir. Body.wp-night-mode-oon #div_block-48-27 {arka plan: #000;
Renk: #ff;
} Bu kod, öğenin arka plan rengini siyah olarak değiştirir ve öğenin metni beyaz olur. Tüm web sitelerinizi, sayfa sayfasını ve küresel gece moda stilinin sizin için geçerli olmadığı unsurların tanımlanmasını çalıştırın. Ardından, az önce bahsettiğimiz CSS tanımlama tekniğini kullanarak, web siteniz için bir gece moda stili oluşturun.
Bu yöntemin, bir sayfa yapıcısı veya herhangi bir şey kullanıyorsanız, tema ne olursa olsun, tüm WordPress siteleri için çalışacağını unutmayın. Sadece değiştirmek istediğiniz öğelerin tanımlanmasını bulun, ardından karanlık mod CSS yoluyla etkinleştirildiğinde öğelerde yapılacak değişiklikleri belirleyin. WordPress sitenize karanlık mod eklerken üstesinden gelmeniz gereken son engel ve grafik engeliyle uğraşmak görüntülerle uğraşıyor. Bazı durumlarda, görüntünüz olduğu gibi kalabilir. Örneğin, karanlık modu Instagram ile etkinleştirirseniz, görüntü tersine çevrilmez. Bunun yerine aynı kalırlar, ancak etraflarındaki arayüz renk değiştirir.
WordPress siteniz için, özellikle bir blog ise, resimleri olduğu gibi kaydetmenizi öneririz. Genellikle, ortalama renk aşırı beyaz ve siyah arasındaki bir yere düşecektir, bu da arayüz renginden bağımsız olarak görüntünün mükemmel görüneceği anlamına gelir. Aynı zamanda, siyah veya beyaz grafikler (veya uçlardan birine yakın bir yerde) sizin için sorunlara neden olabilir. Örneğin, siyah bir grafiğiniz varsa ve kullanıcınız karanlık modu etkinleştirirse, grafik büyük olasılıkla arka planla entegre edilir. Bu, özellikle WordPress sitenizde logolar veya diğer önemli simgeler için böyle bir grafik varsa çok kötü olabilir. Sadece gerekli bilgileri vermeyerek kullanıcının deneyimine zarar vermekle kalmaz, aynı zamanda profesyonelce ve kaba görünür. Unutmayın, bu sorun sadece logonuz veya görüntünüz neredeyse beyaz veya siyahsa sizin için geçerli olabilir. Çok renkli ise, her türlü arka plan renkiyle iyi çalışabilirler. Ancak, bu kategoriye dahil edilmezlerse, sorunlar olabilir. Neyse ki, bu sorunu çözmenin birçok yolu var. Çoğu durumda, logonuzun rengini web sitesindeki kullanıcı arayüzünün renklendirmesine uyacak şekilde kolayca değiştirmek için CSS filtrelerini kullanabilirsiniz. Birkaç örnek yapalım. Bu oldukça karanlık olan ana logomuz. Karanlık moda dönersek, bu logo metni web sitesinde kaybolacaktır.
Web sitemiz karanlık modda beyaz yapmak olduğunda bu logoyu görünür hale getirmenin en iyi yolu olduğunu düşünüyorum. Bunu çeşitli şekillerde yapabiliriz. Bu resmi div’e sarabiliriz ve karanlık mod etkinleştirildiğinde, görüntüyü silin ve CSS’de bir arka plan görüntüsü kullanarak beyaz PNG sürümüyle değiştirin. Bununla birlikte, karmaşıktır ve çoğu durumda tema başlığınızı oluşturan ve PHP’yi düzenleyen gerçek dosyayı girmeniz gerektiği için mümkün değildir (korkutucu, zor ve kafa karıştırıcı olabilir). Tersine, daha kolay ve daha hızlı başka şeyler yapacağız. Herhangi bir temaya da uygulanabilir, çünkü yalnızca CSS kullanır (ek HTML gerektirmez). Bu logoyu beyaz olarak değiştirmek için CSS filtresini kullanacağız. Bu, 2 adım atmasına rağmen, yapılacak kadar basit bir şey. İlk olarak, parlaklığı tamamen değiştireceğiz, bu da logoyu tamamen siyah yapar. Filtre: Parlaklık (0); Sonra, tüm siyahı beyaza değiştiren resmi çevireceğiz. Filtre: Geri Dön (1);
Yani tam CSS’niz şuna benziyor: body.wp-night-mode-on img#myphoto {
Filtre: Parlaklık (0) tersine çevrilmiş (1);
} Bu kod, öğenin arka plan rengini siyah olarak değiştirir ve öğenin metni beyaz olur. Tüm web sitelerinizi, sayfa sayfasını ve küresel gece moda stilinin sizin için geçerli olmadığı unsurların tanımlanmasını çalıştırın. Ardından, az önce bahsettiğimiz CSS tanımlama tekniğini kullanarak, web siteniz için bir gece moda stili oluşturun.
Bu yöntemin, bir sayfa yapıcısı veya herhangi bir şey kullanıyorsanız, tema ne olursa olsun, tüm WordPress siteleri için çalışacağını unutmayın. Sadece değiştirmek istediğiniz öğelerin tanımlanmasını bulun, ardından karanlık mod CSS yoluyla etkinleştirildiğinde öğelerde yapılacak değişiklikleri belirleyin. WordPress sitenize karanlık mod eklerken üstesinden gelmeniz gereken son engel ve grafik engeliyle uğraşmak görüntülerle uğraşıyor. Bazı durumlarda, görüntünüz olduğu gibi kalabilir. Örneğin, karanlık modu Instagram ile etkinleştirirseniz, görüntü tersine çevrilmez. Bunun yerine aynı kalırlar, ancak etraflarındaki arayüz renk değiştirir.
WordPress siteniz için, özellikle bir blog ise, resimleri olduğu gibi kaydetmenizi öneririz. Genellikle, ortalama renk aşırı beyaz ve siyah arasındaki bir yere düşecektir, bu da arayüz renginden bağımsız olarak görüntünün mükemmel görüneceği anlamına gelir. Aynı zamanda, siyah veya beyaz grafikler (veya uçlardan birine yakın bir yerde) sizin için sorunlara neden olabilir. Örneğin, siyah bir grafiğiniz varsa ve kullanıcınız karanlık modu etkinleştirirse, grafik büyük olasılıkla arka planla entegre edilir. Bu, özellikle WordPress sitenizde logolar veya diğer önemli simgeler için böyle bir grafik varsa çok kötü olabilir. Sadece gerekli bilgileri vermeyerek kullanıcının deneyimine zarar vermekle kalmaz, aynı zamanda profesyonelce ve kaba görünür. Unutmayın, bu sorun sadece logonuz veya görüntünüz neredeyse beyaz veya siyahsa sizin için geçerli olabilir. Çok renkli ise, her türlü arka plan renkiyle iyi çalışabilirler. Ancak, bu kategoriye dahil edilmezlerse, sorunlar olabilir. Neyse ki, bu sorunu çözmenin birçok yolu var. Çoğu durumda, logonuzun rengini web sitesindeki kullanıcı arayüzünün renklendirmesine uyacak şekilde kolayca değiştirmek için CSS filtrelerini kullanabilirsiniz. Birkaç örnek yapalım. Bu oldukça karanlık olan ana logomuz. Karanlık moda dönersek, bu logo metni web sitesinde kaybolacaktır.
Web sitemiz karanlık modda beyaz yapmak olduğunda bu logoyu görünür hale getirmenin en iyi yolu olduğunu düşünüyorum. Bunu çeşitli şekillerde yapabiliriz. Bu resmi div’e sarabiliriz ve karanlık mod etkinleştirildiğinde, görüntüyü silin ve CSS’de bir arka plan görüntüsü kullanarak beyaz PNG sürümüyle değiştirin. Bununla birlikte, karmaşıktır ve çoğu durumda tema başlığınızı oluşturan ve PHP’yi düzenleyen gerçek dosyayı girmeniz gerektiği için mümkün değildir (korkutucu, zor ve kafa karıştırıcı olabilir). Tersine, daha kolay ve daha hızlı başka şeyler yapacağız. Herhangi bir temaya da uygulanabilir, çünkü yalnızca CSS kullanır (ek HTML gerektirmez). Bu logoyu beyaz olarak değiştirmek için CSS filtresini kullanacağız. Bu, 2 adım atmasına rağmen, yapılacak kadar basit bir şey. İlk olarak, parlaklığı tamamen değiştireceğiz, bu da logoyu tamamen siyah yapar. Filtre: Parlaklık (0); Sonra, tüm siyahı beyaza değiştiren resmi çevireceğiz. Filtre: Geri Dön (1);
Yani tam CSS’niz şuna benziyor: body.wp-night-mode-on img#myphoto {
Filtre: Parlaklık (0) tersine çevrilmiş (1);
