WordPress'te Özel Bir Kaydırma Çubuğu Oluşturmanın Hızlı Yolları

Hangi nedenle olursa olsun web sitenizin öne çıkmasını istediğinizi söylemek güvenlidir. Böyle bir platforma sahip olmak, koyduğunuz şeyin ziyaretçinin zihninde daha uzun süre kalmasını sağlayacaktır ve bu neredeyse tamamen iyi bir şeydir. Web sitenizdeki içeriğin yanı sıra, ürününüze dikkat çekmenin bir başka yolu da görsel yönüdür. Bu hiçbir şekilde yeni bir bilgi değildir. McDonald's'ın kırmızı ve sarı ve Facebook'un mavi olmasının bir nedeni var. Ancak burada, web sitenizin sunduğu deneyimin küçük bir bölümünden bahsedeceğiz. Bu, çok önemli görünmeyen bir parçadır, ancak yine de bir değeri olduğuna inanıyoruz - kaydırma çubuğu. Aşağıdaki birkaç satırda, WordPress'te özel bir kaydırma çubuğu oluşturmanın bazı hızlı yollarını öğreneceksiniz.

WordPress'te özel bir kaydırma çubuğu oluşturmanın basit yolları

Özel bir kaydırma çubuğu oluşturmak, web siteniz için özel bir tema oluşturmanın önemli bir adımıdır. Bu nedenle, web sitenizi her yönden öne çıkarmakla ilgileniyorsanız, size bu kaydırma çubuğunu benzersiz hale getirmenin ilk yöntemini tanıtmamıza izin verin.

Eklenti ile WordPress'te özel bir kaydırma çubuğu ekleyin

WordPress'te yapmak istediğiniz çoğu şeyde olduğu gibi, kaygan bir kaydırma çubuğu oluşturmak için bir Eklenti kullanmak iyi bir yoldur. Bu yöntemin çoğu kullanıcı için şiddetle tavsiye edilmesinin nedeni basitliğidir. Birkaç basit tıklamayla, kendinizi tarzınıza uygun bir kaydırma çubuğuna bakarken bulacaksınız. Yine de bu yöntemle gelen küçük bir kusurdan bahsetmekte fayda var. Yani bu eklenti mobil tarayıcıları desteklemiyor. Ancak, bu bir kayıp gibi görünmüyorsa, okumaya devam edin.

Öncelikle Advanced Scrollbar eklentisini kurmanız ve etkinleştirmeniz gerekecek . Bu eylem yeterince basit:

1. Eklentileri ziyaret edin, ardından WordPress yönetici alanınızdaki Yeni Ekle sayfasına gidin. Arama çubuğuna söz konusu eklentinin adını yazın ve Enter'a basın.
2. Eklentiyi bulduktan sonra, 'Şimdi Kur' düğmesine tıklayın. WordPress daha sonra eklentiyi sizin için indirecek ve kuracaktır. Bundan sonra, 'Şimdi Kur' düğmesinin 'Etkinleştir' düğmesine dönüştüğünü fark edebileceksiniz.
3. Bu 'Etkinleştir' düğmesine tıklayın ve hepiniz gitmeye hazırsınız.

Artık gerekli eklentiyi kurduğunuza ve etkinleştirdiğinize göre, onu yapılandırmanız gerekecek. Bu kelime korkutucu gelse de, süreç çok kolaydır. Ayarlar > Özel Renk Kaydırma Çubuğu Ayarları'na gitmeniz yeterlidir. Bir kez orada, kaydırma çubuğunuzun rengini ve ray arka plan renklerini değiştirebileceksiniz. Ardından, fare tekerleğinin kaydırma hızı olan fare kaydırma adımını seçebilirsiniz. Bu eklentinin harika yanı, kaydırma çubuğunu otomatik olarak gizlemek mi yoksa her zaman görüntülemek mi istediğinizi seçmenize izin vermesidir.

Ayrıca, kaydırma çubuğu rayını düğme olmadan görüntüleyen 'Yalnızca imleç' seçeneğini belirleme seçeneğiniz de vardır. Bunun altında kaydırma hızını ayarlama, ray hizalamasını değiştirme (sol veya sağ) ve dokunma davranışını etkinleştirme seçeneklerini bulabileceksiniz.

Tüm seçenekleri gözden geçirdikten, renklerle oynadıktan ve tarzınıza ve tercihinize en uygun kombinasyonu bulduktan sonra, tüm bu çalışmaları saklamak için 'değişiklikleri kaydet' düğmesini tıklamayı unutmayın. Bunu yaptıktan sonra, bu muhteşem özel kaydırma çubuğu renklerini çalışırken görmek için web sitenizi ziyaret edebilirsiniz.

CSS kullanarak WordPress'te özel kaydırma çubuğu renkleri ekleyin

Altyazıdan da anlaşılacağı gibi, bu yöntem kaydırma çubuğunuzu biçimlendirmek için CSS kullanır. Bu yöntem, jQuery kullandığınız yöntemden daha hızlı olduğunu kanıtlamıştır. Ancak, yalnızca Google Chrome, Safari ve Opera gibi WebKit oluşturma motorlarını kullanan masaüstü tarayıcılarda çalıştığını belirtmek önemlidir. Ne yazık ki, mobil tarayıcılarda veya masaüstü bilgisayarlarda Firefox ve Edge üzerinde herhangi bir etkisi olmayacaktır. Bununla birlikte, tercih etmeye istekli olduğunuz seçenek buysa, bunun için gitmenin yolu burada.

Temalar > Özel sayfaya giderek başlayın. Bu eylem, WordPress tema özelleştirici arayüzünü başlatacaktır. Ekranınızın sol düzleminde bir dizi seçenek ile sitenizin canlı önizlemesini görebileceksiniz . Sol bölmeden Ek CSS sekmesine tıklayarak devam edin. Sekme, size özel CSS'nizi ekleyebileceğiniz basit bir kutu göstermeyi sevecektir. Geçerli bir CSS kuralı ekler eklemez, bunun web sitenizin canlı önizleme bölmesine uygulandığını göreceksiniz. Bu geçerli CSS kuralına gelince, kaydırma çubuğunuzun değişikliklere açık olması için eklemeniz gerekenler şunlardır:

::-webkit-kaydırma çubuğu {

-webkit-görünümü: yok ;

}

::-webkit-kaydırma çubuğu {

genişlik : 10 piksel ;

}

::-webkit-scrollbar-track {

arka plan: #ffb400 ;

borger : 1px katı #ccc ;

}

::-webkit-scrollbar-thumb {

arka plan: #cc00ff ;

borger : 1px katı #eee ;

yükseklik : 100 piksel ;

sınır yarıçapı: 5px ;

}

::-webkit-scrollbar-thumb:hover {

arka plan: mavi ;

Tema özelleştiriciyi kullanarak eklediğiniz herhangi bir özel CSS'nin yalnızca o temayla kullanılabileceğini unutmayın. Bir temayı değiştirirseniz ancak o özel kaydırma çubuğunu korumak istiyorsanız, aynı yöntemi kullanarak bu CSS kuralını kopyalayıp yeni temanıza yapıştırmanız gerekir.

Bu, web sitenizi öne çıkarmak için harika bir yol olsa da, WordPress'te özel bir kaydırma çubuğu oluşturmanın bir dezavantajından bahsetmemiz gerekiyor. Yani, varsayılan olarak CSS, kaydırma çubuğu özelliklerini değiştirmenize izin verecek bir kural kümesiyle birlikte gelmez. Bu seçeneği eklemek için bazı teklifler var, ancak şu anda tarayıcıların çoğu tarafından desteklenmiyorlar. Bu sorunun üstesinden gelmek için tasarımcılar ve geliştiriciler, varsayılan kaydırma çubuğu görünümünü geçersiz kılmak için tarayıcıya özgü sözde öğeler veya JavaScrip kullanır. Bunlar size tarif ettiğimiz tekniklerdir. Yine de sitenizin tüm tarayıcılarda hayal ettiğiniz gibi çalışması için farklı tarayıcılar ve cihazlarla test etmeniz gerektiğini unutmamalısınız. Bunu hallettikten sonra, WordPress'te nasıl özel bir kaydırma çubuğu oluşturacağınızı bildiğinizi söylemek güvenlidir.