Blog

WordPress'e Başa Dön Butonu Nasıl Eklenir?

Son Güncelleme Tarihi: 
WordPress'e Başa Dön Butonu Nasıl Eklenir?

WordPress’e yukarı çık butonu eklemeyi bilmiyor musunuz? Ne yazık ki çoğu WordPress teması bu butonu varsayılan olarak içermiyor. Ancak butonu web sitenize eklemek için kullanabileceğiniz birkaç yöntem var.

Üstelik bu, harcayacağınız emeğe fazlasıyla değer. Web sitenizde kullanıcıların gezinme menüsünden veya harekete geçirici mesajdan çok uzaklaşacak kadar aşağı kaydırdığı uzun sayfalar varsa bu buton, kullanıcıların zahmetsizce sayfanın ana odağına geri dönmesine yardımcı olur. 

WordPress’e yukarı çık butonu eklemenin en yaygın yolları arasında eklenti kullanmak, özel kod eklemek veya kodlama gerektirmeyen bir widget yerleştirmek yer alır. Eklentiler ve yerleştirilmiş widget’lar herhangi bir kodlama uzmanlığı gerektirmez; bu nedenle HTML, CSS veya JavaScript’e aşina değilseniz tercih edilen yöntemlerdir. Özel kod, buton üzerinde tam kontrol sağlar ancak yeni başlayanlar için pek iyi bir çözüm değildir.

Bu rehberde, bu yöntemleri kullanarak WordPress’e yukarı çık butonunun nasıl ekleneceğini ve her birinin avantajlarını ve dezavantajlarını inceliyoruz. 

WordPress eklentisiyle yukarı çık butonu ekleyin

WordPress, web sitenizin işlevselliğini artırmak için çeşitli eklentiler sunar. Eklenti dizininde farklı geliştiricilere ait WordPress yukarı çık eklentileri bulabilirsiniz. Bu, butonu eklemenin en yaygın yoludur. 

WordPress yukarı çık eklentisinde sunulan seçenekler

Bu eklentilerin çoğu, butonun konumunu ve tasarımını seçmenize olanak tanıyan özelleştirme seçenekleri sunar. Web siteniz için doğru yukarı çık butonu eklentisini ararken sizin için en önemli ayarların hangileri olduğuna karar verin. Göz önünde bulundurmanız gereken bazı ayarlar şunlardır:

  • Buton konumu: Butonun sayfanızda nerede görüneceğini belirler. Eklentiler, butonu sağa, sola veya ortaya yerleştirme seçenekleri sunabilir. Bazıları ise daha ayrıntılı kontrol imkânı sağlar.
  • Simge veya etiket: Eklentiler tek bir simge sunabilir ya da aralarından seçim yapabileceğiniz bir seçenekler menüsü sağlayabilir. Bazıları simge rengini özelleştirmenize de olanak tanır.
  • Mobil veya masaüstünde görünürlük: Butonlar bilgisayarda ve mobil cihazlarda farklı görünebilir. Nasıl görüneceklerini anlamak için eklentinin görünürlük seçeneklerini kontrol edin.
  • Yumuşak kaydırma: Bazı butonlar, doğrudan sayfanın en üstüne atlamak yerine kaydırma seçenekleri sunar. Kullanıcıların sayfada gezinme üzerinde daha fazla kontrole sahip olmasını istiyorsanız bu özellik oldukça faydalıdır.
  • Kaydırma ofseti veya eşiği: Bu ayar, sayfanın üst kısmındaki öğeler ile kaydırma konumu arasında ne kadar boşluk bırakılacağını belirler. İdeal olarak, yukarı çık butonuna tıklamak menülerdeki veya başlıklardaki içeriği gizlememelidir.

Bazı eklentiler diğerlerine göre daha fazla özelleştirme imkânı sunar. Çok sayıda stil seçeneğine sahip bir yukarı çık butonuna ihtiyacınız olmayabilir; ancak seçtiğiniz buton web sitenizde sırıtmamalıdır. Butonun sayfadaki diğer öğelerle uyum içinde olmasını istersiniz.

WordPress’e yukarı çık butonu nasıl eklenir?

İhtiyaçlarınıza uygun bir eklenti seçtikten sonra şu adımları izleyerek eklentiyi yükleyin:

  1. Web sitenizin yönetici kontrol paneline giriş yapın.
  2. Eklentiler seçeneğine tıklayın.
  3. Eklentiyi WordPress Eklenti Dizini’nde bulun. Adını yazmak için arama kutusunu kullanabilirsiniz.
  4. Eklentiye tıklayın.
  5. Yükle ve etkinleştir seçeneğine tıklayın. (Ücretli bir eklenti yüklüyorsanız Satın al ve etkinleştir seçeneğine tıklayın.)

Programı yükledikten sonra yukarı çık butonunun görünümünü ve kaydırma davranışını yapılandırmak için Ayarlar menüsüne gidin.

Popüler WordPress yukarı çık eklentileri

WordPress’e yukarı çık butonu ekleyen yüzlerce eklenti bulunuyor. Bu seçeneklerden bazıları şunlardır:

  • WPFront Scroll Top: Bu eklenti, aralarından seçim yapabileceğiniz düzinelerce önceden tasarlanmış yukarı çık butonu sunar. Ayrıca butonun boyutunu, konumunu ve kaydırma davranışını belirlemenize olanak tanır.
WordPress
  • Smooth Scroll Page Up/Down Buttons: Sitenizin sayfalarında uzun belgeler varsa bu eklenti işinize yarayabilir. WordPress için yumuşak kaydırmayla yukarı çık özelliği sunarak kullanıcıların tek tek metin belgeleri arasında veya sayfanın başına kaydırmasını sağlar.
WordPress
  • Nicescrollr: Bu eklenti, yukarı çık butonu eklemenize ve buton boyutu ile kaydırma hızı dahil olmak üzere birçok ayarı yönetmenize olanak tanır.
WordPress

Eklentilerin kurulumu kolay olsa da bakımını yapmanız gereken yeni bir bağımlılık eklerler. Güvenlik yamaları içerebileceğinden eklentinin güncellemelerini yakından takip etmek önemlidir.  

Özel kodla WordPress’e yukarı çık butonu ekleyin

WordPress’te özel bir yukarı çık butonu, butonun görünümü ve davranışı üzerinde tam kontrol sağlar. Bir eklentinin sunduğu ayar seçenekleriyle sınırlı kalmazsınız ve butonu gereksinimlerinize tam olarak uyacak şekilde değiştirebilirsiniz. Kendine özgü bir tasarım isteyenler veya eklentilerin neden olabileceği sayfa şişkinliğinden kaçınmayı tercih edenler için sağlam bir alternatiftir.

Ancak kendi butonunuzu oluşturmak uzmanlık gerektirir. WordPress temalarını düzenleme konusunda rahat olmanız ve özel HTML, CSS veya JavaScript deneyimine sahip olmanız gerekir. 

Kendi butonunuzu geliştirmek için kodunuzu özel bir HTML bloğuna, tema özelleştirme alanına veya kod parçacığı iş akışına ekleyin. Sitenize uyguladıktan sonra hatalara yol açmadığından emin olmak için yeni butonu dikkatlice test edin.

Özel butonun avantajları ve dezavantajları

Özel olarak hazırlanmış bir yukarı çık butonu büyük esneklik sunar. Simgeyi ve rengi web sitenizle doğal bir uyum içinde olacak şekilde uyarlayabilir, butonun görünürlüğünü ayarlayabilirsiniz. Örneğin butonu, yalnızca kullanıcı sayfada belirli bir noktaya ulaştığında görünecek şekilde tasarlayabilirsiniz. Ya da WordPress’e, kullanıcı sayfayı kaydırırken ekranda sabit kalan kayan bir yukarı çık butonu ekleyebilirsiniz.

Özel buton oluşturmanın başlıca dezavantajları teknik kurulum ve test süreçleridir. Web sitenizle uyumlu olan ve WordPress temanızın işleyişini bozmayan bir kod yazmak zaman alır. 

Test etmek de özel buton geliştirmenin kilit unsurudur. Butonun performansını bilgisayarlar, tabletler ve akıllı telefonlar dahil olmak üzere birden fazla cihazda test etmeyi planlayın. Butonu iOS, Windows ve Android gibi farklı platformlarda da denemek iyi bir fikirdir.

Kodlama gerektirmeyen daha kolay yöntem: Jotform’un Yukarı Çık Widget’ını kullanın

Eklentilere ve özel butonlara bir alternatif var: Jotform’un Yukarı Çık Widget’ı. Web sitenize birkaç dakika içinde ekleyebileceğiniz, kodlama gerektirmeyen bir çözümdür.

Özelleştirilebilir mavi “Yukarı çık” butonunun önizlemesini içeren Jotform Yukarı Çık Widget'ı sayfası

Eklentilerin aksine Yukarı Çık Widget’ımız sayfa şişkinliğine yol açmaz ve düzenli güncelleme gerektirmez. Hiçbir şekilde kodlama gerektirmez ve WordPress temanızın işlevselliğini etkilemez. 

Jotform Yukarı Çık Widget’ı aynı zamanda tamamen özelleştirilebilir. Simge stilini, renkleri, boyutu ve köşe yarıçapını ayarlayabilirsiniz. Butonun konumunu ve kaydırma sırasındaki görünürlüğünü değiştirme seçenekleri de mevcuttur. Üstelik mobil ekranlar dahil tüm cihazlarda sorunsuz çalışır.

Jotform Yukarı Çık Widget’ı nasıl yüklenir?

Widget’ı web sitenize entegre etmek oldukça kolaydır. Yukarı Çık Widget’ı sayfamıza giderek başlayın ve ardından şu adımları izleyin:

  1. Araç çubuğundaki “Untitled” (Adsız) alanını düzenleyerek widget’ınıza bir ad verin.
  2. Tercih ettiğiniz konum ve kaydırma ayarlarını girin, ardından Devam seçeneğine tıklayın.
  • Buton Konumu: Sol veya Sağ seçeneğini belirleyin.
  • Etiketi Göster: Etkinleştirmek veya devre dışı bırakmak için anahtarı kullanın. Butonda görünmesini istediğiniz metni girin.
  • Kaydırdıktan sonra göster: Butonun görünmesi için kullanıcının kaç piksel kaydırması gerektiğini kaydırma çubuğuyla belirleyin.
  • Kaydırma animasyonu: Yumuşak veya Anında seçeneğini belirleyin.
Buton konumu, etiket, animasyon ve kaydırma ayarlarını gösteren Jotform Yukarı Çık Widget'ı düzenleyicisi
  1. Buton için stil tercihlerinizi girin ve Devam seçeneğine tıklayın.
  • Buton boyutu: Butonun genişliğini ve yüksekliğini kaydırma çubuğuyla ayarlayın.
  • Simge boyutu: Ok simgesinin boyutunu kaydırma çubuğuyla ayarlayın.
  • Simge: Buton için bir ok simgesi stili seçin (Yukarı ok, Yukarı köşeli ok veya Kalın yukarı ok).
  • Köşe yarıçapı: Kare Köşeler, Yuvarlatılmış Köşeler veya Dairesel Köşeler seçeneğini belirleyin.
  • Buton Renkleri: Arka plan ve metin rengi için tercih ettiğiniz hex renk kodunu girin.
  • Gölge efekti: Butonun altındaki yumuşak gölgeyi devre dışı bırakmak veya etkinleştirmek için anahtarı kullanın.
Buton boyutu, simge stili, köşe yarıçapı, renk ve gölge efekti seçeneklerini gösteren Jotform Yukarı Çık Widget'ı stil düzenleyicisi
  1. Görüntüleme kurallarını belirleyin ve Web sitenizde ücretsiz deneyin seçeneğine tıklayın.
  • Alttan uzaklık: Butonun alt kenara ne kadar uzak olacağını kaydırma çubuğuyla belirleyin.
  • Yandan uzaklık: Butonun yan kenara ne kadar uzak olacağını kaydırma çubuğuyla ayarlayın.
  • Masaüstünde göster: Etkinleştirin veya devre dışı bırakın.
  • Mobilde göster: Etkinleştirin veya devre dışı bırakın.
Uzaklık, masaüstü ve mobil görünürlük ayarlarını gösteren Jotform Yukarı Çık Widget'ı görüntüleme kuralları ekranı
  1. Yerleştirme kodunu kopyalayın ve WordPress HTML düzenleyicinize yapıştırın.
Yerleştirme kodunu ve Kodu Kopyala butonunu gösteren Jotform Yukarı Çık Widget'ı yerleştirme penceresi

Butonu özelleştirirken nasıl görüneceğini görmek için sağ alt köşedeki bilgisayar veya akıllı telefon simgesine tıklayabilirsiniz.

WordPress web sitenizde Jotform araçlarını kullanmanın avantajları

İster uzman bir web tasarımcısı olun ister WordPress’in nasıl kullanılacağını yeni öğreniyor olun, Jotform web sitenizi destekleyen pek çok kullanışlı araç sunar.

Kuruluşunuzun Google, Facebook ve Tripadvisor gibi üçüncü taraf sitelerdeki yorumlarını göstermek için özelleştirebileceğiniz çeşitli ücretsiz Web Sitesi Widget’ları sunuyoruz. Bu widget’lar, kullanıcı görüşlerini sergilemek isteyen ancak WordPress üzerinden sunulan ücretli eklenti araçlarına bağlanmak konusunda temkinli davranan web sitesi sahipleri için idealdir.

Jotform’un özel WordPress form yerleştirme eklentisinden de yararlanabilirsiniz. Bu eklenti, sitenizi ziyaret eden kullanıcılardan form yanıtları toplamanıza olanak tanır. İletişim bilgileri, ödeme bilgileri ve başvurular gibi yaygın kullanım senaryolarını kapsayan 20.000’den fazla ücretsiz özel WordPress form şablonu sunuyoruz. Yalnızca birkaç adımda formunuzu WordPress’e yerleştirebilirsiniz.

Hepsinden önemlisi, Jotform sınırsız WordPress widget’ı ve en fazla beş formu destekleyen bir ücretsiz plan sunar. Ücretli bir plana geçtiğinizde kullanabileceğiniz form sayısı artar, Jotform markası kaldırılır ve ek depolama alanı elde edersiniz.

WordPress iş akışınızı yavaşlatmadan yukarı çık butonu ekleyin

Yukarı çık butonu, uzun içeriklerde gezinirken kullanıcı deneyimini iyileştirir. Ayrıca e-ticaret sayfalarında ve açılış sayfalarında etkileşimi ve dönüşümleri destekler. Eklentiler veya özel kod kullanarak buton eklemek mümkün olsa da kodlama gerektirmeyen en kolay çözüm Jotform’un widget’ıdır.

Jotform’un Yukarı Çık Widget’ının WordPress sitenize nasıl şık bir yukarı kaydırma butonu eklediğini görmek için hemen bugün deneyin.

WordPress yukarı çık butonları hakkında sıkça sorulan sorular

WordPress’te eklenti kullanmadan yukarı çık butonu oluşturabilirsiniz. Bunun için HTML, CSS veya JavaScript kullanarak özel kod yazmanız gerekir. Bu yöntem teknik uzmanlık ve WordPress temaları hakkında bilgi gerektirir. Butonu yayına almadan önce çalıştığını ve web sitenizin performansını olumsuz etkilemediğini doğrulamak için sonuçları dikkatlice test edin. Alternatif olarak Jotform’un Yukarı Çık Widget’ı, tek satır kod yazmadan tamamen özelleştirilebilir bir buton eklemenizi sağlar. 

WordPress Dizini’nde yukarı çık butonlarını destekleyen çeşitli eklentiler bulunur. Bu araçlar özelleştirme seçenekleri sunar ve kodlama gerektirmez. Ancak sayfa şişkinliğini en aza indirmek ve butonun işlevselliği üzerinde daha fazla kontrol sahibi olmak istiyorsanız kendi geri butonunuzu kodlamak daha iyi bir seçenek olabilir. Daha basit bir alternatif içinse kodlama deneyimi veya sürekli bakım gerektirmeyen Jotform’un Yukarı Çık Widget’ını kullanabilirsiniz.

WordPress Elementor’da yukarı çık butonu oluşturmak için sayfanızı Elementor düzenleyicisinde açın. Sayfanın en üstüne bir CSS kimliği ekleyin, ardından bir Button widget’ı yerleştirin. Butonun Content sekmesinden bu CSS kimliğine bağlantı verin. Butonun görünümünü Style sekmesinden ayarlayabilirsiniz.

Bu makale; WordPress web sitesi sahipleri, içerik yöneticileri, küçük işletme ekipleri, web tasarımcıları ve site performansını veya iş akışını aksatmadan uzun WordPress sayfalarına özelleştirilebilir bir yukarı çık butonu eklemek isteyen herkes için hazırlanmıştır.

Yorum Gönder:

Jotform Avatar
Bu site reCAPTCHA ve Google Gizlilik Politikası tarafından korunmaktadır ve Hizmet Koşulları geçerlidir.

Podo Comment İlk yorum yapan sen ol.