Bazı web sitelerinin marka renkleriyle mükemmel uyum sağlayan şık, özel kaydırma çubuklarına sahip olduğunu fark ettiniz mi? 🤩
Bu özelliği biz de fark ettik. Ve birçok kullanıcımız bize bu göz alıcı özel kaydırma çubuklarını kendi WordPress sitelerinde nasıl oluşturacaklarını sordu.
İyi haber mi? WordPress kaydırma çubuğunuzu özelleştirmek düşündüğünüzden çok daha kolay. İster marka renklerinizle eşleştirmek, ister navigasyonu iyileştirmek veya web sitenize profesyonel bir dokunuş eklemek isteyin, size tam olarak nasıl yapacağınızı göstereceğiz. Kodlama deneyimine gerek yok!

Özel Kaydırma Çubuğu Eklemeden Önce Bilmeniz Gerekenler 💡
WordPress kaydırma çubuğunuzu özelleştirmekle ilgileniyorsunuz. Ancak bu işe girişmeden önce, WordPress web siteniz için doğru kararı verdiğinizden emin olmak için bilmeniz gereken birkaç önemli şey var.
İlk olarak, özel kaydırma çubukları harika görünse de, tüm tarayıcılar bunları aynı şekilde göstermez. Chrome gibi modern tarayıcılar bunları iyi bir şekilde destekler, ancak diğerleri sınırlı özelleştirme gösterebilir veya hiç göstermeyebilir – özellikle mobil cihazlarda.
Önemli olan incelikle başlamaktır. İçeriğinizin dikkatini dağıtabilecek gösterişli tasarımlar oluşturmak yerine her zaman marka renk düzeninize uygun küçük ayarlamalarla başlamanızı öneririz. Unutmayın: kaydırma çubuğunuz kullanıcı deneyimini geliştirmeli, gösteriyi çalmamalıdır.
Doğru yapıldığında, bu WordPress tasarım öğesi sitenize ekstra profesyonel bir dokunuş katabilir. Tüm ziyaretçileriniz için tutarlı bir deneyim sağlamak için değişikliklerinizi farklı tarayıcılarda test ettiğinizden emin olun.
Artık ne beklemeniz gerektiğini anladığınıza göre, WordPress sitenize nasıl özel bir kaydırma çubuğu ekleyeceğinize bakalım. Kullanmak istediğiniz yönteme atlamak için aşağıdaki hızlı bağlantıları kullanmanız yeterlidir:
🔎 İçerik kutuları veya kenar çubukları gibi belirli öğelere özel kaydırma çubukları eklemek mi istiyorsunuz? WordPress’te herhangi bir öğeye özel kaydırma çubuklarının nasıl ekleneceğine ilişkin kılavuzumuza göz atın.
Seçenek 1: Gelişmiş Kaydırma Çubuğu Eklentisini Kullanın (Ücretsiz + Kolay)
WordPress’te 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 yazmanıza gerek 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, renk şeması ve ray arka plan rengi gibi kaydırma çubuğu tasarımını 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 blogunuzu ziyaret edebilirsiniz.
Seçenek 2: CSS Kaydırma Çubuğu Oluşturma (Gelişmiş)
Kaydırma çubuğunuzda daha gelişmiş değişiklikler yapmak istiyorsanız, başka bir seçenek de CSS kullanmaktır.
CSS ile özel bir kaydırma çubuğu oluşturmak, öğenin 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.
Not: Eğer bir blok tema kullanıyorsanız, bu seçenek sizin için kullanılabilir olmayacaktır. Bu durumda, özelleştiriciyi https://example.com/wp-admin/customize.php URL’sini yazarak açabilirsiniz. example.com yerine kendi sitenizin alan adını yazmayı unutmayın.
Daha fazla bilgi için WordPress yöneticisindeki eksik tema özelleştiricisini düzeltme kılavuzumuza göz atın.

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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | ::-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ıklamanız yeterlidir. Artık değişikliklerinizi çalışırken görmek için WordPress sitenizi bir WebKit tarayıcısında ziyaret edebilirsiniz.

Bonus İpucu: WordPress’te Üste Kaydırma Efekti Ekleme
Ö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 en iyi WordPress sürükle ve bırak sayfa oluşturucuları için uzman seçimlerimizi ve bir WordPress web sitesinin nasıl düzenleneceğine ilişkin nihai kılavuzumuzu 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.
Marcos
Thank you! The CSS is plug&play.
WPBeginner Support
Glad to hear our guide was helpful!
Admin
Luqman Essam
THank You! It helped me!
WPBeginner Support
Glad our guide was helpful!
Admin
Victor
Is there any plugin for WP that will display sequential art as in a comic strip where installments can be posted on a weekly basis?
WPBeginner Support
You may want to take a look at our guide on managing a post series: https://www.wpbeginner.com/plugins/how-to-effeciently-manage-post-series-in-wordpress/
Admin
ash
it not working very fine on some websites, depends to the themes that the website uses, it might even hide the scroll bar and make the website loading time more than normal, i suggest using a CSS code it’s easy to use and customizable as well … i give a sample ans you guys just modify it as your own
===
::-webkit-scrollbar {
width: 14px;
background-color: silver;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: silver;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
background-color: #0099cc;
}
Vas
Excellent…The cleanest solution.
It would be nice to post the code for Firefox…if there is such option.
Thanks for sharing.
WPBeginner Staff
There might be someway to override it through a custom css. Please contact plugin’s support.
Karen
What a fun plugin. I just installed it. Is there any way to control the opacity – of the color of the scrollbar when you aren’t hovered over it? Thanks for this post!
WPBeginner Staff
Thank you for notifying us. Fixed it.
Vernon Trent
please correct your link to the plugin.
there is a missing S in the url “pluginS”
Guest
Hi the link in the post seems broken may affect your site rank.
Please place correct link for “Dewdrop Custom Scrollbar” plugin.