WordPress’te Kaydırma Çubuğu Nasıl Özelleştirilir ?

Kendinize özgü bir tasarımla websitenizi yayınlamak istiyorsanız, websitenizin kaydırma çubuğunu yeniden tasarlayarak işe koyulabilirsiniz. Bu yazımda WordPress tabanlı websitelerinde kaydırma çubuğu ve özelliklerini nasıl düzenleyebileceğinizi anlatacağım.

Sitelerimizin tasarımlarını yaparken CSS ile çalışırız. Renkler, element pozisyonları ve hemen herşeyi CSS ile belirleriz. Fakat CSS, bizlere kaydırma çubuğu üzerinde oynama yapmamıza malesef izin vermiyor. Sadece belirli önermeler göndererek bu işlemi yapabiliyoruz fakat çoğu tarayıcı henüz bu özellikleri tam anlamıyla desteklemiyor.

Tasarımcılar ve geliştiriciler ise bu işlemi gerçekleştirebilmek için tarayıcıya özel elementler veya JavaScript sayesinde kaydırma çubuklarında özelleştirmeye gidebiliyor. Bu yazımda her iki yöntem ile bu işlemi nasıl yapabileceğinizi sizlere anlatacağım.

1. WordPress Eklentisi Kullanmak

  • Bu yöntem çok basittir ve acemiler için kesinlikle önerilir. Öncelikle yapmanız gereken Advanced Scrollbar eklentisini yüklemek ve aktifleştirmek.
  • Eğer WordPresste eklenti yüklemeyi bilmiyorsanız Adım Adım WordPress Eklenti Yükleme Rehberi adlı yazımı okuyabilirsiniz.
  • Eklentiyi yüklediyseniz, kaydırma çubuğunuzu özelleştirmek için aşağıdaki adımları izleyebilirsiniz.
  • Eklentinizi yükledikten sonra Ayarlar > Custom Color Scrollbar Settings bölümüne giriş yapın.Buradan kaydırma çubuğunuzun renk ayarlarında değişiklik yapabilirsinz. Ayrıca kaydırma çubuğunuzun hareket hızını da belirleyebilirsiniz.

  • Bu eklentinin bir diğer özelliği ise kaydırma çubuğunu saklama özelliğidir. Siz kendi tercihinize göre seçim yapabilirsiniz.
  • Ayrıca “Cursor Only” seçeneğini işaretleyere kaydırma çubuğunuz görünürken, butonların görünmemesini sağlayabilirsiniz.
  • Bütün ayarlarınızı yaptıktan sonra işlemleri kaydetmeyi unutmayın.

İşlemleriniz bittikten sonra sayfanıza gidip, yaptığınız değişiklikleri görebilirsiniz.

2. CSS Kullanarak Kaydırma Çubuğunu Özelleştirmek

  • Bu yöntem ile CSS kullanarak kaydırma çubuğunuzda özel tasarımlara gidebilirsiniz. Fakat bu yöntem sadece Chrome, Safari ve Operada tam anlamıyla çalışıyor.
  • Firefox veya Edge üzerinde beklediğiniz değişiklikleri sağlayamayabilirsiniz.
  • Aşağıdaki kodu temanızın Özel CSS bölümüne kopyalayıp yapıştırmanız gerekmektedir.
::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar {
  width: 10px;
}
 
::-webkit-scrollbar-track {
  background: #ffb400; 
    border:1px solid #ccc;
}
 
::-webkit-scrollbar-thumb {
  background: #cc00ff; 
    border:1px solid #eee;
    height:100px;
    border-radius:5px;
}
 
::-webkit-scrollbar-thumb:hover {
  background: blue; 
}

Not: Kod üzerinde renk değişikliklerini dilediğiniz gibi yapabilirsiniz.

Aşağıdaki örnekte Google Chrome üzerinde kodunuzun nasıl çalıştığını görebilirsiniz.

Eğer bu yazımı beğendiyseniz, bizi Facebook ve Twitter adreslerimizden de takip edebilir misiniz ?

Yazar
Yasin Atagün

Kimler Neler Demiş?

avatar
  Takip Et  
Bildir