WordPress ile ilişkilendireceğiniz bir kelime varsa, bu “özelleştirilebilirlik” olacaktır. Tüm temel özelliklerin, eklentilerin ve temaların amacı budur – web sitenizin görünümünü ve davranışını şekillendirmek ve onu sizin istek ve ihtiyaçlarınıza uygun hale getirmek. Bu yüzden web sitesi renklerini özelleştirmek, fiyat listeleri gibi farklı öğeler eklemek ve genel olarak web sitesinin görünmesini sağlamak için ihtiyacınız olan şeyleri kullanmak ve bunun için aklınızdaki rolü oynamak gibi harika şeyler yapabilirsiniz.
Elbette, insanların göz ardı etme eğiliminde olduğu bazı özelleştirilebilir öğeler vardır. Tarayıcınızda bir sayfayı kaydırdıkça hareket eden ve uzun sayfalarda daha hızlı gezinmenizi sağlayan kaydırma çubuğu bunlardan biridir. Web sitenizi ziyaret eden kişilerin en azından web sitenizin renk düzeniyle eşleşen bir kaydırma çubuğuyla karşı karşıya kalmasını istiyorsanız, bunu gerçekleştirebilirsiniz.
Bu yazıda size şunları göstereceğiz:
-
WordPress’te Özel Kaydırma Çubuğu Ekleme Seçenekleriniz Nelerdir?
-
Eklenti Kullanarak WordPress’te Özel Kaydırma Çubuğu Nasıl Eklenir?
-
CSS Kullanarak Kaydırma Çubuğunu Özelleştirme
WordPress’te Özel Kaydırma Çubuğu Ekleme Seçenekleriniz Nelerdir?
WordPress web sitenize özel bir kaydırma çubuğu eklemeyi düşünüyorsanız, sahip olacağınız iki ana seçenek, bir eklenti seçmek veya kaydırma çubuğunu CSS kullanarak özelleştirmek olacaktır. Bu seçeneklerin her ikisinin de seçiminizi etkileyebilecek artıları ve eksileri vardır.
Özel bir kaydırma çubuğu eklemek için eklentiyi kullanırsanız, eklenti kurulu olduğu sürece kalıcı bir değişiklik yaratmış olursunuz. Bir eklenti yüklemek ve sizin için en uygun olanı bulana kadar ayarlarla oynamak kadar basit.
Eklentiyi kullanmanın dezavantajı, web sitenizi yavaşlatabilmesidir. Sadece milisaniyeler olsa bile, bu küçük ve görünüşte önemsiz eklentileri yeterince kullandığınızda bunlar toplanma eğilimindedir.
Bununla birlikte CSS kullanırken hız sorunları yaşamayacaksınız. Herhangi bir şey yüklemeniz gerekmeyecek – Görünüm > Özelleştir > Ek CSS’deki görünüm müşterisi aracılığıyla tüm değişiklikleri yapabileceksiniz. Kodu öğrenmek de çok zor değil. Özelleştirici, değişiklikleri size gerçek zamanlı olarak gösterecek ve bu harika bir bonus.
Bununla birlikte bu yöntemle ilgili sorun, bir tema güncellemesiyle özelleştirmelerinizi kaybetme riskiniz olmasıdır. Bu yüzden bu tür değişiklikleri yaparken genellikle bir alt tema kullanılması önerilir.
Eklenti Kullanarak WordPress’te Özel Kaydırma Çubuğu Nasıl Eklenir?
WordPress web sitenize özel bir kaydırma çubuğu eklemek için kullanabileceğiniz birkaç ücretsiz eklenti vardır. Kaydırma çubuğunuzda dört adede kadar renk ayarlamanıza izin verdiği için Scroll Styler eklentisini kullanacağız. Eklentiler > Yeni Ekle’ye gidin, “kaydırma şekillendirici”yi arayın ve ardından devam edin ve web sitenize yükleyin ve etkinleştirin.
Eklentiyi yükledikten sonra, eklenti seçeneklerine erişmek için Ayarlar > Kaydırma Şekillendirici’ye gidin. En üstteki ikisi, kaydırma çubuğu genişliği ve kaydırma çubuğu iz dolgusudur. İkisinden ilki, kaydırma çubuğunuzun ne kadar geniş olduğunu piksel cinsinden değiştirir. İkincisi, kaydırma çubuğu başparmağının etrafındaki dolguyu değiştirir.
Sonraki dört seçenek, kaydırma çubuğu için farklı renkleri ayarlamanıza izin verecektir. Kaydırma çubuğu izinin arka plan rengi, kaydırma çubuğu izinin rengidir ve değişmez. Bununla birlikte başparmağın rengi yapar. “Arka plan rengi”, etkin olmadığında başparmağın rengidir. İmleçle başparmağın üzerine geldiğinizde, rengini “vurgulu arka plan rengi” olarak değiştirecektir. Sayfayı kaydırmak için başparmağa bastığınızda, rengini “etkin arka plan rengi” olarak değiştirecektir.
Son seçenek, kaydırma çubuğu başparmak sınır yarıçapını ayarlamanıza olanak tanır. Etkili bir şekilde bu, başparmağın köşelerini yuvarlaklaştırmanıza olanak tanır.
Seçenekleri belirledikten sonra ayarları kaydetmeyi unutmayın, değişikliği web sitenizde göreceksiniz.
Eklenti tarafından sunulan seçenekler biraz mütevazı olsa da, web sitenizin renk şemasına uyan bir kaydırma çubuğu oluşturmak için fazlasıyla yeterli olabilir.
CSS Kullanarak Kaydırma Çubuğunu Özelleştirme
İkinci seçeneğiniz, kaydırma çubuğunun görünüşünü değiştirmek için özel CSS kullanmak olacaktır. Daha önce de belirttiğimiz gibi, herhangi bir değişiklik yapmak için Görünüm > Özelleştir > Ek CSS’ye gitmeniz gerekir.
Kaydırma çubuğunu değiştirmek için özel CSS kullanmanın yolu, kaydırma çubuğunun belirli kısımlarını özelleştirmek için sözde öğeler kullanmaktır. Şunları özelleştirebilirsiniz:
-
Kaydırma çubuğu – :: -webkit-kaydırma çubuğu
-
Kaydırma çubuğu düğmeleri – :: -webkit-scrollbar-button
-
Sürükleyebileceğiniz kaydırma tutamacı – :: -webkit-scrollbar-thumb
-
Kaydırma çubuğunun izi – :: -webkit-scrollbar-track
-
Tutma yerinin kapsamadığı parça – :: -webkit-scrollbar-track-piece
Dolayısıyla, özel bir kaydırma çubuğu oluşturmak istediğinizde, bu sözde öğeleri şu şekilde kullanabilirsiniz:
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background: #f6f6f4;
}
::-webkit-scrollbar-thumb {
background: #86af49;
}
::-webkit-scrollbar-thumb:hover {
Background: #E5cdbc
}
Bu durum varsayılan gri kaydırma çubuğunu bu belirli tema için daha iyi eşleşen bir şeye dönüştürecektir.
Özel kaydırma çubuğunuzu gerçekten özel kılmak için gölgeler ekleyebileceğinizi, öğelerin yarıçapını değiştirebileceğinizi ve ek şeyler yapabileceğinizi unutmayın. Kaydırma çubuğunu özelleştirmenin bu yönteminden tam olarak yararlanmak için daha ileri düzeyde CSS bilgisine ihtiyacınız olacak. Ayrıca yeterli zamanınız varsa ve deneme yanılma yoluyla öğrenmeye istekliyseniz, bazı ilginç kombinasyonlar bulmanız kaçınılmazdır.
Çözüm Yolu
Kaydırma çubuğu – web sitenizin görünümünü özelleştirme söz konusu olduğunda genellikle gözden kaçan kullanışlı bir öğedir. Bu durum düzeltmeyi hedeflediğiniz bir yanlışsa, bunu yapmanın iki yolu vardır – ya bir eklenti ile ya da bazı özel CSS ekleyerek. Her ikisinin de artıları ve eksileri vardır, bu nedenle, seçim yapmadan önce hedef kitlenizin en çok hangi tarayıcıları kullandığını kontrol etmek ihtiyatlı olabilir. Bundan sonra, tatmin edici sonuçlar elde edene kadar sadece seçeneklerle veya kodla uğraşmak kalır.