WordPress'te Özel Kaydırma Çubuğu Nasıl Eklenir

Bazı web sitelerinde markalarının renkleriyle mükemmel uyum sağlayan o şık, özel kaydırma çubuklarının olduğunu fark ettiniz mi? 🤩

Bu özelliği biz de fark ettik. Kullanıcılarımızın çoğu, bu göz alıcı özel kaydırma çubuklarını kendi WordPress sitelerinde nasıl oluşturacaklarını sordular.

İyi haber mi? WordPress kaydırma çubuğunuzu özelleştirmek düşündüğünüzden çok daha kolay. Marka renklerinize uymak, gezinmeyi iyileştirmek veya web sitenize profesyonel bir dokunuş katmak isteyip istemediğiniz, bunu tam olarak nasıl yapacağınızı göstereceğiz. Kodlama deneyimi gerekmez!

Özel Bir Kaydırma Çubuğu Eklemeye Başlamadan Önce Bilmeniz Gerekenler 💡

Yani, WordPress kaydırma çubuğunuzu özelleştirmekle ilgileniyorsunuz. Ancak dalmadan önce, WordPress web siteniz için doğru kararı verdiğinizden emin olmak için bilmeniz gereken birkaç önemli şey var.

Özel Kaydırma Çubukları İçin Anahtar Hususlar:

• Tarayıcı Uyumluluğu: Chrome, Safari ve Edge (CSS için WebKit tabanlı tarayıcılar) gibi modern tarayıcılar özel kaydırma çubuklarını iyi desteklese de, diğerleri sınırlı özelleştirme veya hiç özelleştirme sunmayabilir. Tutarlı bir deneyim sağlamak için değişikliklerinizi farklı tarayıcılarda her zaman test edin.
• Mobil Cihaz Sınırlamaları: Mobil cihazlarda, geleneksel kaydırma çubukları genellikle sezgisel dokunmatik hareketlerle (kaydırma) değiştirilir. Bu, özel kaydırma çubuklarının genellikle akıllı telefonlarda veya tabletlerde görüntülenmeyeceği anlamına gelir.
• Kullanıcı Deneyimi ve Erişilebilirlik: Kaydırma çubuğunuz içeriğinizden uzaklaştırmamalı, iyileştirmelidir. Aşırı gösterişli veya görülmesi zor tasarımlar, kullanıcı gezinmesini olumsuz etkileyebilir. Marka renklerinizle uyumlu ve sitenizin genel akışını iyileştiren ince ayarlamalar yapmayı hedefleyin.
• Performans Etkisi: Eklenti eklemek veya kapsamlı CSS kullanmak, web sitesi yükleme hızını hafifçe etkileyebilir. İyi performansı sürdürmek için optimize edilmiş çözümler seçin ve kodunuzu temiz tutun.
• Test Etmek Çok Önemlidir: Hangi yöntemi seçerseniz seçin, özel kaydırma çubuğunuzun çeşitli tarayıcılarda, cihazlarda ve ekran boyutlarında etkili bir şekilde çalıştığından emin olmak için kapsamlı bir şekilde test edin.

Doğru yapıldığında, bu WordPress tasarım öğesi sitenize mükemmel kullanılabilirliği korurken ekstra profesyonel bir dokunuş katabilir.

Neler beklemeniz gerektiğini anladığınıza göre, WordPress sitenize özel bir kaydırma çubuğu eklemeye nasıl başlayacağımıza bakalım. Kullanmak istediğiniz yönteme atlamak için aşağıdaki hızlı bağlantıları kullanmanız yeterlidir:

Seçenek 1: Gelişmiş Kaydırma Çubuğu Eklentisi Kullanın (Ücretsiz + Kolay)

WordPress'te kaydırma çubuğunu özelleştirmenin en kolay yolu Advanced Scrollbar'ı kullanmaktır. Bu ücretsiz eklenti, tek satır kod yazmadan 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 kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, WordPress eklentisi nasıl kurulur hakkındaki adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra Ayarlar » Gelişmiş Kaydırma Çubuğu Ayarları'na gidin.

Burada, kaydırma çubuğu tasarımını, renk şeması ve ray arka plan rengi gibi ayarları değiştirebilirsiniz.

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

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

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

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.

Bu, daha renkli bir kaydırma çubuğu oluşturduğunuzda ve içeriğinizin geri kalanından dikkat dağıtabileceğinden endişe duyduğunuzda kullanışlı olabilir.

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

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

Özel kaydırma çubuğunu çalışırken görmek için artık 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.

::-webkit-scrollbar sözde öğelerini (aşağıdaki örnek gibi) kullanarak CSS ile özel bir kaydırma çubuğu oluşturmak, öğenin birçok bölümünü özelleştirmenize olanak tanır.

Ancak, bu özel CSS kuralları öncelikle Chrome, Safari ve yeni Microsoft Edge gibi WebKit tabanlı masaüstü tarayıcılarında çalışır.

Bu, özel kaydırma çubuğunuzun diğer tarayıcılarda (Firefox gibi) veya çoğu mobil cihazda görünmeyebileceği veya farklı görünebileceği anlamına gelir.

Kaydırma çubuğunuzu CSS ile özelleştirmek için Görünüm » Özelleştir'e gidin.

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

Kodunuzu görünen küçük düzenleyiciye şimdi ekleyebilirsiniz.

Kaydırma çubuğunun görünümünü değiştiren bir kod örneği aşağıdadır:

::-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 herhangi bir kodu ekleyebilirsiniz. CSS hakkında daha fazla bilgi için lütfen WordPress temanıza özel CSS nasıl eklenir hakkındaki eksiksiz kılavuzumuza bakın.

Kodunuzdan memnun kaldığınızda, 'Yayınla' düğmesine tıklamanız yeterlidir. Değişikliklerinizi görmek için artık WordPress sitenizi bir WebKit tarayıcısında ziyaret edebilirsiniz.

Bonus İpucu: WordPress'te Yukarı Kaydırma Efekti Ekleme

Özel bir kaydırma çubuğu oluşturmanın yanı sıra, WordPress sitenize yukarı kaydırma efekti de eklemek isteyebilirsiniz. Daha uzun blog yazılarınız varsa ve kullanıcılara yukarı dönmek için hızlı bir yol sunmak istiyorsanız bu çok yardımcı olabilir.

Bu özelliği eklemek için WPFront Scroll Top eklentisini kurmalı ve etkinleştirmelisiniz. Ayrıntılı talimatlar için, WordPress eklentisi nasıl kurulur hakkındaki eğitimimize bakın.

Etkinleştirdikten sonra, yukarı kaydırma efektini etkinleştirmek için WordPress kontrol panelinden Ayarlar » Yukarı Kaydır sayfasını ziyaret edin ve 'Etkin' kutusunu işaretleyin.

Bundan sonra, kaydırma ofsetini, düğme boyutunu, opaklığını, 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ıyla bir yukarı kaydırma efekti eklediniz. Daha ayrıntılı talimatlar için, WordPress'te yumuşak bir yukarı kaydırma efekti nasıl eklenir hakkındaki eğitimimize bakın.

WordPress'e Özel Kaydırma Çubuğu Ekleme Hakkında Sıkça Sorulan Sorular

İşte okuyucularımızın WordPress'e özel bir kaydırma çubuğu ekleme hakkında sıkça sorduğu bazı sorular:

WordPress'e nasıl kaydırma çubuğu eklerim?

Özel CSS kullanarak veya WordPress'teki gönderiler, sayfalar veya widget'lar içindeki kayan içerik alanlarını etkinleştiren Advanced Scrollbar gibi bir eklenti kullanarak bir kaydırma çubuğu ekleyebilirsiniz.

WordPress'e bir kaydırıcı (slider) nasıl eklerim?

Bir slayt gösterisi eklentisi olan Soliloquy kullanarak bir slayt gösterisi ekleyebilir, slayt gösterinizi oluşturabilir ve ardından bir blok kullanarak bir sayfaya ekleyebilirsiniz. Daha fazla bilgi için, WordPress'te duyarlı bir slayt gösterisi oluşturma hakkındaki eğitimimize göz atın.

WordPress için en iyi kaydırıcı eklentisi hangisidir?

Soliloquy, yeni başlayanlar için uygun, esnek ve çoğu tema ve sayfa oluşturucu ile iyi çalıştığı için en iyi WordPress slayt gösterisi eklentisidir.

Özel bir banner nasıl oluşturabilirim?

Hazır şablonlarıyla özel bir banner oluşturmak için OptinMonster'ı kullanabilirsiniz. Eklenti ayrıca içeriği tam olarak özelleştirmenize, CTA eklemenize ve beğeninize göre farklı renkler kullanmanıza olanak tanır. Ayrıntılı talimatlar için lütfen WordPress'te nasıl banner yapılır hakkındaki eğitimimize bakın.

Umarız bu makale, WordPress'te özel bir kaydırma çubuğu eklemeyi öğrenmenize yardımcı olmuştur. Ayrıca, en iyi WordPress sürükle ve bırak sayfa oluşturucuları hakkındaki uzman seçimlerimizi ve bir WordPress web sitesinin nasıl düzenleneceği hakkındaki nihai kılavuzumuzu da görmek isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.