Web sitenize yapışkan bir başa dön düğmesi nasıl eklenir

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

Ama sonra kaydırmanız gerekiyor.

TÜM.

THE.

YOL.

İLE.

THE.

TEPE.

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

Bir web tasarımcısı olarak, bu, inşa ettiğiniz bir siteye giren birinin yapmasını isteyeceğiniz en son şeydir. Neyse ki, yıl 2019 ve modern web tasarımının en iyi uygulamaları bize bu yaygın UX sorununa çözüm sağladı: yapışkan arka arkaya düğmesi.

Yapışkan bir başa dön düğmesi nedir?

Başa kaydır düğmesi veya en üste 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 geri dönmelerine yardımcı olan yararlı bir gezinme öğesidir. Yaygın bir UI modeli, bu düğmeyi ekranın sağ alt köşesine yerleştirip sabit bir konum aracılığıyla "yapışkan" hale getirmektir, böylece kullanıcı sayfayı aşağı kaydırırken her zaman erişilebilir olur.

Başa dön düğmesi eklemeden önce göz önünde bulundurulması gerekenler

Herhangi bir popüler tasarım trendi gibi, sitenizde uygulamadan önce kendinize şunu sormanız için bir adım geri atmanızı tavsiye ediyorum: Bunu inşa edeceksem, hangi arka-üst düğmesi yönergelerini izlemem gerekiyor?

*Not: Günümüzde kullanıcıların bir sayfada aşağı kaydırmaya (ve yedeklemeye!) şartlandırıldığı iddiasını ileri sürebilirsiniz; bu, başa dön düğmesi "ihtiyacını" ortadan kaldırır. Tavsiyem: Test edin! Tıkladığınızda bir Google Analytics etkinliği ekleyin veya site ziyaretçilerinizin sayfayla nasıl etkileşimde bulunduğ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 bir başa çıkma düğmesi nasıl eklenir

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

Uzman ipucu: Bu eğitim çok gelişmiş olmasa da, bir hazırlık sitesinde veya yerel ortamda denemenizi tavsiye ederim, bu nedenle canlı siteniz için kesinlikle hiçbir risk yoktur. Hızlı bir şekilde kurmanız gerekiyorsa, kullanımı inanılmaz derecede kolay olan ücretsiz bir yerel WordPress uygulaması olan Local'e göz atın.

Başlayalım! Sürecin her adımından bahsedeceğim ve siz de Flywheel'in kendi ön uç mühendisi Josh Masen'dan bu Codepen'i takip edebilirsiniz.

CodePen'de Josh Lawler (@joshuamasen) tarafından yazılan Pen ES6 Yukarı Kaydır düğmesine bakın.

Bu başa dön düğmesi öğreticisi 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
• JavaScript'i "çalışmasını" sağlamak ve düğmenin davranışlarını tanımlamak

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

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

Bu sizin yapışkan, başa dön butonunuz olacak! .top-link adında bir CSS sınıfı eklediğimizi ve "çalışmasını sağlamak" için bazı basit JavaScript'leri kullandığımızı görebilirsiniz. Ayrıca düğme için 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 SVG yöntemini tercih ediyoruz çünkü:

1. Raster bir görüntünün yapacağı gibi, farklı ekran boyutlarında piksellenmez.
2. SVG'ler, tarayıcılar arasında evrensel olarak desteklenir. (Evet, 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">Back to top</span>

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

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

.top-link {
  transition: all .25s ease-in-out;
  position: fixed;
  bottom: 0;
  right: 0;
  display: inline-flex;
  
 cursor: pointer;
 align-items: center;
 justify-content: center;
 margin: 0 3em 3em 0;
 border-radius: 50%;
 padding: .25em;
 width: 80px;
 height: 80px;
 background-color: #F8F8F8;

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

Bu snippet'ten 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 yere “yapışmasını” sağlayan şeydir.

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

  .show {
    visibility: visible;
    opacity: 1;
  }
  
  .hide {
    visibility: hidden;
    opacity: 0;
  }

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

svg {
 fill: #000;
 width: 24px;
 height: 12px;
}

&:hover {
 background-color: #E8E8E8;

 	svg {
	 fill: #000000;
	}
}

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

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

// Text meant only for screen readers.
.screen-reader-text {
	position: absolute;
	clip-path: inset(50%);
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
	clip: rect(1px, 1px, 1px, 1px);

	&:focus {
		display: block;
		top: 5px;
		left: 5px;
		z-index: 100000; // Above WP toolbar
		clip-path: none;
		background-color: #eee;
		padding: 15px 23px 14px;
		width: auto;
		height: auto;
		text-decoration: none;
		line-height: normal;
		color: #444;
		font-size: 1em;
		clip: auto !important;
	}
}

Şimdi JavaScript'e! 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.

// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');

Ardından, kullanıcı ilk pencerenin yüksekliğini aştığında yukarı kaydır düğmesini gösteren bir işlev oluşturacağız.

const scrollFunc = () => {
  // Get the current scroll value
  let y = window.scrollY;
  
  // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
  if (y > 0) {
    scrollToTopButton.className = "top-link show";
  } else {
    scrollToTopButton.className = "top-link hide";
  }
};

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

window.addEventListener("scroll", scrollFunc);

Neredeyse bitti! Ardından, düğmenin kullanıcıyı sayfanın en üstüne geri götürmesini sağlayan işlevi tanımlamamız gerekiyor. Bunu yapmak için, sayfanın üst kısmında 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!

Ayrıca buraya küçük bir animasyon ekleyeceğiz, böylece atlama çok ani olmaz.

const scrollToTop = () => {
  // Let's set a variable for the number of pixels we are from the top of the document.
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // If that number is greater than 0, we'll scroll back to 0, or the top of the document.
  // We'll also animate that scroll with requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo takes an x and a y coordinate.
    // Increase the '10' value to get a smoother/slower scroll!
    window.scrollTo(0, c - c / 10);
  }
};

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

// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  scrollToTop();
}

Sonraki: Geliştiricilerin sevdiği 19 WordPress eklentisini keşfedin

Geliştiriciler için en çok önerilen eklentilerimizin listesi için bu e-kitabı indirin! Tüm bu eklentilerin kullanımının basit olduğunu, sitenizde çok fazla performans gerektirmediğini ve tamamen güvenilir olduğunu gördük.

Bu kadar! Artık WordPress sitenizde tam olarak işleyen ve özelleştirilebilir yapışkan bir başa çıkma düğmesine sahip olacaksınız. Eğitimin tamamını çalışırken görmek için, Flywheel'in kendi ön uç mühendisi Josh Masen'den bu Codepen'e göz atmayı unutmayın!