Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

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!

Adding a custom scrollbar in WordPress

Ö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.

The Advanced Scrollbar WordPress plugin

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.

An example of a custom scrollbar

‘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.

Changing the scrollbar speed in WordPress

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.

Hiding the WordPress scrollbar

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.

The WordPress customizer

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

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

How to customize the scrollbar using the WordPress Customizer

İş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.

An example of a custom scrollbar in WordPress

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.

Edit the plugin settings for adding the scroll to top effect

İş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.

Scroll to top button preview

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

13 yorumLeave a Reply

  1. Marcos

    Thank you! The CSS is plug&play.

    • WPBeginner Support

      Glad to hear our guide was helpful!

      Admin

  2. Luqman Essam

    THank You! It helped me!

    • WPBeginner Support

      Glad our guide was helpful! :)

      Admin

  3. 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?

  4. 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.

  5. WPBeginner Staff

    There might be someway to override it through a custom css. Please contact plugin’s support.

  6. 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!

  7. Vernon Trent

    please correct your link to the plugin.
    there is a missing S in the url “pluginS”

  8. Guest

    Hi the link in the post seems broken may affect your site rank.
    Please place correct link for “Dewdrop Custom Scrollbar” plugin.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.