Web Sitenize Yapışkan Başa Dön Düğmesi Nasıl Eklenir?

Yayınlanan: 2023-02-12

Hepimiz oradaydık. Harika bir çevrimiçi rehber buldunuz, sonuna kadar kaydırdınız ve sonra "Vay canına, bu sitenin başka neler sunabileceğini görmek isterim!"

Ama sonra kaydırmak zorundasın.

TÜM.

THE.

YOL.

İLE.

THE.

TEPE.

Ve sonra düşünüyorsun…. "Hmmm, boşver." Ve sayfayı kapatın.

Bir web tasarımcısı olarak bu, birisinin inşa etmekte olduğunuz bir siteye geldiğinde yapmasını isteyeceğiniz en son şeydir. Neyse ki, modern web tasarımı en iyi uygulamaları bize bu yaygın kullanıcı deneyimi sorununa çözüm sağladı: yapışkan başa dön düğmesi.

Yapışkan Başa Dön Düğmesi Nedir?

Yukarı kaydır düğmesi veya başa git görüntüsü olarak da bilinen yapışkan başa dön düğmesi, kullanıcıların görüntüledikleri web sayfasının en üstüne dönmelerine yardımcı olan yararlı bir gezinme öğesidir. Yaygın bir kullanıcı arabirimi modeli, bu düğmeyi ekranın sağ alt köşesine yerleştirerek sabit bir konumla "yapışkan" hale getirerek kullanıcı sayfayı aşağı kaydırırken her zaman erişilebilir olmasını sağlamaktır.

Başa Dön Düğmesi Eklemeden Önce Dikkate Alınması Gerekenler

Herhangi bir popüler tasarım trendi gibi, sitenize uygulamadan önce bir adım geri atmanızı ve kendinize şunu sormanızı tavsiye ederim: Bunu yapacaksam, hangi arka düğme yönergelerini izlemem gerekiyor?

Yukarı kaydır düğmenizi oluşturmadan önce yanıtlamanız gereken birkaç soru:

  • Nereye yerleştirilecek?
  • Ne kadar büyük (veya küçük) olmalı?
  • Markada kalması için hangi tasarım modellerini izlemelisiniz? (Renkler, yazı tipleri, simgeler vb. düşünün)
  • Bir kenar çubuğundaki bilgiler gibi önemli site içeriğini kapsama riski altında mı?
  • Mobil cihazlarda ne olur? Duyarlı olacak mı?
  • Gerçekten ihtiyacınız var mı?*

*Not: Günümüz kullanıcılarının bir sayfada aşağı kaydırmaya (ve geri dönmeye!) şartlandırıldığı, bunun da başa dön düğmesi "ihtiyacını" ortadan kaldıracağı argümanını öne sürebilirsiniz. Tavsiyem: Test edin! Tıklamayla bir Google Analytics etkinliği ekleyin veya sitenizin ziyaretçilerinin sayfayla nasıl etkileşim kurduğunu görmek için Hotjar gibi bir ısı haritası aracı kullanın.

İzlenecek en iyi "en iyi uygulama", kendi sitenizden ve kullanıcılarınızdan alınan verilere dayalıdır!

WordPress Sitenize Yapışkan Başa Dön Düğmesi Nasıl Eklenir

Bu eğitimde, burada kullandığımız başa dön düğmesinin aynısını Layout'ta nasıl ekleyeceğinizi göstereceğim! Tek fark, bizimkini ekranın sağ alt köşesi yerine üst kısmındaki yapışkan bir başlığa yerleştirmiş olmamız. (Ama merak etmeyin, aynı konsept!)

Profesyonel ipucu: Bu eğitim çok gelişmiş olmasa da, canlı siteniz için kesinlikle hiçbir risk olmaması için onu bir hazırlık sitesinde veya yerel ortamda denemenizi tavsiye ederim. Hızlı bir şekilde kurulum yapmanız gerekiyorsa, kullanımı son derece kolay olan ücretsiz bir yerel WordPress uygulaması olan Local'a göz atın.

Veya yapışkan bir başa dön düğmesi eklemeyle ilgili bu video eğitimine göz atın!

CodePen'de Josh Lawler (@joshuamasen) tarafından kalem ES6 Kaydırma düğmesine bakın.

Bu yapışkan başa dön düğmesi eğitimi için üç dil kullanacağız:

  • Düğmeyi oluşturmak için işaretleme için HTML
  • Düğmeye stil vermek ve markanızla eşleşmesini sağlamak için CSS
  • "Çalışmasını" sağlamak ve düğmenin davranışlarını tanımlamak için JavaScript

HTML'de aşağıdaki satırları bulacaksınız:

 <a class="top-link hide" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Başa dön</span>
</a>

Bu senin yapışkan başa dön düğmen olacak! .top-link adlı bir CSS sınıfı eklediğimizi ve "çalışmasını sağlamak" için bazı basit JavaScript kullandığımızı görebilirsiniz. Düğme için ayrıca bir satır içi SVG kullanıyoruz.

Düğmeyi oluşturmak için bir SVG'nin yanı sıra bir görüntü dosyası veya yazı tipi simgesi de kullanabilirsiniz. Ancak biz SVG yöntemini tercih ediyoruz, çünkü:

  1. Raster görüntüde olduğu gibi farklı ekran boyutlarında pikselleşmez.
  2. SVG'ler, tarayıcılar arasında evrensel olarak desteklenir. (Yaşasın, kullanıcı deneyimi!)
  3. CSS ile stil vermek kolaydır, böylece onunla ilgili her şeyi gerçekten kolayca değiştirebilirsiniz.
  4. Yalnızca bir satır kod alır, bu da onu hafif ve site performansı için daha iyi hale getirir.

HTML'de bulacağınız son gerçekten önemli parça şu satırdır:

 <span class="screen-reader-text">Başa dön</span>

Bu, ekran okuyucularla çalışan kullanıcılar için çok önemlidir ve WordPress sitenizin erişilebilirliğini artıracaktır. (Bunu bir resim için bir alt etiket gibi düşünün, ancak yukarı kaydırma düğmeniz için!)

Şimdi .top-link adlı CSS sınıfı hakkında daha fazla konuşalım. Bunu düğmeyi gerçekten şekillendirmek için kullanıyoruz ve burada düğmenin ne kadar büyük olacağı, etrafında ne kadar dolgu olması gerektiği, renk vb. gibi nitelikleri tanımlayacaksınız.

 .top-link {
  geçiş: tüm .25'ler kolay giriş;
  pozisyon: sabit;
  alt: 0;
  sağ: 0;
  ekran: satır içi esnek;
  
 imleç: işaretçi;
 hizalama öğeleri: merkez;
 haklı içerik: merkez;
 kenar boşluğu: 0 3em 3em 0;
 sınır yarıçapı: %50;
 dolgu: .25em;
 genişlik: 80 piksel;
 yükseklik: 80 piksel;
 arka plan rengi: #F8F8F8;

Not: CSS'imizi biraz daha hızlı yazmak için Sass (bir stil sayfası dili) kullanıyoruz. Bu ön işlemci hakkında daha fazla bilgiyi buradan edinebilirsiniz.

Bu pasajdan birkaç önemli parça: transition: all .25s ease-in-out ; düğmenizin ekranda ne kadar "hızlı" görüneceğini veya kaybolacağını kontrol eder ve position: fixed ; düğmeyi istediğiniz konuma "yapışkan" yapan şey budur.

Ardından, .show ve .hide için kurallar göreceksiniz. Tarayıcıya düğmenin sayfada ne zaman görünmesi (veya olmaması) gerektiğini söylemek için bu sınıflar arasında geçiş yapmak için JavaScript kullanacağız.

 .göstermek {
    görünürlük: görünür;
    opaklık: 1;
  }
  
  .saklamak {
    görünürlük: gizli;
    opaklık: 0;
  }

JavaScript'e geçmeden önce, CSS'ye ekleyeceğimiz birkaç satır daha var.

 {
 doldur: #000;
 genişlik: 24 piksel;
 yükseklik: 12 piksel;
}
&: üzerine gelin {
 arka plan rengi: #E8E8E8;
 	{
	 doldur: #000000;
	}
}

Bu sınıflar, okun kendisi için SVG görüntüsünü stilize edecek ve tarayıcıya, bir kullanıcı düğmenin üzerine geldiğinde düğmeyi nasıl görüntüleyeceğini söyleyecektir.

Son olarak, ekran okuyucular için "başa dön" yazan metni gizlemek için biraz CSS ekleyeceğiz.

 // Metin yalnızca ekran okuyucular içindir.
.screen-reader-text {
	pozisyon: mutlak;
	klip yolu: ek (%50);
	kenar boşluğu: -1 piksel;
	kenarlık: 0;
	dolgu: 0;
	genişlik: 1 piksel;
	yükseklik: 1 piksel;
	taşma: gizli;
	sözcük kaydırma: normal !önemli;
	klip: rect(1px, 1px, 1px, 1px);
	&:odak {
		Ekran bloğu;
		üst: 5 piksel;
		sol: 5 piksel;
		z-endeksi: 100000; // WP araç çubuğunun üstünde
		klip yolu: yok;
		arka plan rengi: #eee;
		dolgu: 15 piksel 23 piksel 14 piksel;
		genişlik: otomatik;
		yükseklik: otomatik;
		metin süslemesi: yok;
		satır yüksekliği: normal;
		renk: #444;
		yazı tipi boyutu: 1em;
		klip: otomatik !önemli;
	}
}

Şimdi JavaScript'e geçelim! Bunu jQuery yüklemeden yapacağız, bu da kodunuzun hafif ve hızlı yüklenmesine yardımcı olacaktır.

İlk değişken, tarayıcının düğmeyi bulmasına yardımcı olacaktır.

 // Düğme öğemiz için bir değişken ayarlayın.
const scrollToTopButton = document.getElementById('js-top');

Ardından, kullanıcı ilk pencerenin yüksekliğinin ötesine geçerse yukarı kaydır düğmesini gösteren bir işlev oluşturacağız.

 const scrollFunc = () => {
  // Geçerli kaydırma değerini al
  y = pencere.scrollY olsun;
  
  // Kaydırma değeri pencere yüksekliğinden büyükse, bunu göstermek için yukarı kaydırma düğmesine bir sınıf ekleyelim!
  eğer (y > 0) {
    scrollToTopButton.className = "üst bağlantı gösterisi";
  } başka {
    scrollToTopButton.className = "üst bağlantı gizleme";
  }
};

Ayrıca, kullanıcı kaydırdıkça izleyecek bir olay dinleyicisi ekleyeceğiz (böylece sayfada nerede olduklarını biliyoruz).

 window.addEventListener("kaydır", scrollFunc);

Neredeyse bitti! Ardından, düğmenin kullanıcıyı gerçekten sayfanın başına geri götürmesini sağlayan işlevi tanımlamamız gerekiyor. Bunu yapmak için, sayfanın üst kısmından olduğumuz piksel sayısı için bir değişken oluşturacağız. Bu sayı 0'dan büyükse, işlev onu tekrar 0'a ayarlayarak bizi en üste götürür!

Atlamanın çok ani olmaması için buraya küçük bir animasyon da ekleyeceğiz.

 const scrollToTop = () => {
  // Dokümanın üst kısmından kaç piksel olduğumuza bir değişken belirleyelim.
  const c = document.documentElement.scrollTop || Document.body.scrollTop;
  
  // Bu sayı 0'dan büyükse, 0'a veya belgenin en üstüne geri kaydırılırız.
  // Ayrıca requestAnimationFrame ile bu parşömeni canlandıracağız:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  eğer (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo bir x ve ay koordinatı alır.
    // Daha düzgün/yavaş kaydırma elde etmek için '10' değerini artırın!
    window.scrollTo(0, c - c / 10);
  }
};

Son olarak, birisi yapışkan başa dön düğmemizi tıkladığında sayfaya bu işlevi çalıştırmasını söylememiz yeterlidir.

 // Butona tıklandığında yukarıdaki ScrolltoTop fonksiyonumuzu çalıştırın!
scrollToTopButton.onclick = fonksiyon(e) {
  e.preventDefault();
  scrollToTop();
}

Bu kadar! Artık WordPress sitenizde tam işlevli ve özelleştirilebilir yapışkan bir başa dön düğmesine sahip olacaksınız.