WordPress’te Özel Kaydırma Çubuğu Ekleme

WordPress sitenizin görsel çekiciliğini artırmak kullanıcı deneyimini önemli ölçüde geliştirebilir ve genellikle gözden kaçan bir unsur kaydırma çubuğudur.

Kaydırma çubuğunuzu özelleştirmek sitenize benzersiz bir dokunuş katarak görsel olarak daha ilgi çekici hale getirebilir ve genel tasarım estetiğinizle uyumlu hale getirebilir.

WPBeginner’da WordPress tasarımı üzerine yüzlerce makale yazdık ve web sitemizdeki etkileşimi artırmak için farklı özelleştirme özellikleri kullandık.

Özel bir kaydırma çubuğu sitenizin görünümünü iyileştirebilir ve ziyaretçiler için gezinmeyi daha akıcı ve sezgisel hale getirebilir.

Bu makalede, WordPress’te nasıl kolayca özel bir kaydırma çubuğu ekleyebileceğinizi göstereceğiz.

WordPress’e Neden Özel Kaydırma Çubuğu Ekleyelim?

2018’de WC3, web sitesi sahiplerinin CSS kullanarak kaydırma çubuğunun nasıl görüneceğini özelleştirmelerine izin veren bir teklif hazırladı.

Günümüzde birçok modern tarayıcı özel kaydırma çubuklarını desteklemektedir.

Bunu göz önünde bulundurarak, kaydırma çubuğunu sitenizin renk şemasına veya markasına daha uygun olacak şekilde değiştirmek isteyebilirsiniz. Birçok web sitesi, ziyaretçinin dikkatini çekmek için özel bir kaydırma çubuğu kullanarak sayfa görüntülemelerini artırabilir ve hemen çıkma oranlarını azaltabilir.

Ancak, her tarayıcının özel kaydırma çubuklarını farklı şekilde ele aldığını unutmayın. Birçok tarayıcı özelleştirmeyi yalnızca kısmen desteklerken, bazıları özel stilinizi hiç göstermez.

Bu, kaydırma çubuğunun mümkün olduğunca çok tarayıcıda nasıl göründüğünü görmek için sitenizi farklı tarayıcılar ve cihazlarla test etmenizin önemli olduğu anlamına gelir.

Bunu söyledikten sonra, WordPress’te özel bir kaydırma çubuğunun nasıl ekleneceğine bir göz atalım. Kullanmak istediğiniz yönteme atlamak için aşağıdaki hızlı bağlantıları kullanmanız yeterlidir:

Yöntem 1: WordPress’e Bir Eklenti ile Özel Kaydırma Çubuğu Ekleme (Kolay)

Kaydırma çubuğunu özelleştirmenin en kolay yolu Gelişmiş Kaydırma Çubuğu’nu kullanmaktır. Bu ücretsiz eklenti, tek bir satır kod yazmak zorunda kalmadan kaydırma çubuğunun genişliğini, rengini, kaydırma hızını ve daha fazlasını değiştirmenize olanak tanır.

Yapmanız gereken ilk şey Advanced Scrollbar eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki adım adım kılavuzumuza bakın.

Etkinleştirmenin ardından Ayarlar ” Gelişmiş Kaydırma Çubuğu Ayarları bölümüne gidin.

Burada, kaydırma çubuğunun renk düzenini ve ray arka plan rengini değiştirebilirsiniz.

Aşağıdaki resimde mavi bir kaydırma çubuğu oluşturduk.

‘Fare Kaydırma Adımı’ alanına yeni bir sayı yazarak da fare kaydırma adımını değiştirebilirsiniz.

Daha düşük bir sayı sitenizin daha yavaş kaymasını, daha yüksek bir sayı ise daha hızlı kaymasını sağlayacaktır.

Kaydırma çubuğunu otomatik olarak gizlemek isteyip istemediğinizi de seçebilirsiniz, böylece yalnızca ziyaretçi kaydırırken görünür.

Daha renkli bir kaydırma çubuğu oluşturduysanız ve bunun içeriğinizin geri kalanından dikkatinizi dağıtabileceğinden endişeleniyorsanız bu yararlı olabilir.

Varsayılan olarak, kaydırma çubuğu tarayıcı penceresinin sağ tarafında görünür. Ancak, tercih ederseniz ‘Ray Hizalama’ ayarlarını kullanarak sol tarafa taşıyabilirsiniz.

Kaydırma çubuğunun yapılandırmasından memnun olduğunuzda, ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet’e tıklamayı unutmayın.

Artık özel kaydırma çubuğunu çalışırken görmek için WordPress web sitenizi ziyaret edebilirsiniz.

Yöntem 2: WordPress’te CSS Kullanarak Özel Kaydırma Çubuğu Renkleri Ekleme

Kaydırma çubuğunuzda daha gelişmiş değişiklikler yapmak istiyorsanız, başka bir seçenek de CSS kullanmaktır.

Bu yöntem, kaydırma çubuğunun her bölümünü özelleştirmenize olanak tanır, ancak yalnızca WebKit kullanan masaüstü tarayıcılarda çalışır. Bu, yaptığınız değişikliklerin mobil tarayıcılar da dahil olmak üzere tüm tarayıcılarda görünmeyeceği anlamına gelir.

CSS kullanarak kaydırma çubuğunuzu özelleştirmek için Görünüm ” Özelleştir bölümüne gidin.

WordPress özelleştiricisinde ‘Ek CSS’ye tıklayın.

Artık kodunuzu görünen küçük düzenleyiciye ekleyebilirsiniz.

İşte kaydırma çubuğunun görünümünü değiştiren bir kod örneği:

::-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;
}

İstediğiniz kodu ekleyebilirsiniz. CSS hakkında daha fazla bilgi için lütfen WordPress temanıza nasıl özel CSS ekleyeceğinize ilişkin eksiksiz kılavuzumuza bakın.

Kodunuzdan memnun olduğunuzda, ‘Yayınla’ düğmesine tıklayın. Artık değişikliklerinizi çalışırken görmek için WordPress blogunuzu bir WebKit tarayıcısında ziyaret edebilirsiniz.

Bonus: WordPress’te Üste Kaydırma Efekti Ekleyin

Özel bir kaydırma çubuğu oluşturmanın yanı sıra, WordPress sitenize üste kaydırma efekti de eklemek isteyebilirsiniz. Uzun blog yazılarınız varsa ve kullanıcılara en başa dönmeleri için hızlı bir yol sunmak istiyorsanız bu çok yararlı olabilir.

Bu özelliği eklemek için WPFront Scroll Top eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Ayrıntılı talimatlar için WordPress eklentisi yükleme eğitimimize bakın.

Etkinleştirmenin ardından, WordPress kontrol panelinden Ayarlar ” Üst e Kaydır sayfasını ziyaret edin ve üste kaydırma efektini etkinleştirmek için ‘Etkin’ kutusunu işaretleyin.

Bundan sonra, kaydırma ofsetini, düğme boyutunu, opaklığı, solma süresini, kaydırma süresini ve daha fazlasını buradan düzenleyebilirsiniz.

İşiniz bittiğinde, ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet’ düğmesine tıklamayı unutmayın.

Artık web sitenize başarılı bir şekilde üste kaydırma efekti eklediniz. Daha ayrıntılı talimatlar için WordPress’te üste kaydırma efektinin nasıl ekleneceğine ilişkin eğitimimize bakın.

Umarız bu makale WordPress’te özel bir kaydırma çubuğunun nasıl ekleneceğini öğrenmenize yardımcı olmuştur. Ayrıca WordPress’te açılış sayfası oluşturma kılavuzumuzu veya en iyi sürükle ve bırak sayfa oluşturucular için uzman seçimlerimizi görmek isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.