Cum să creați un buton de derulare înapoi în sus în WordPress
Publicat: 2022-07-11Când vine vorba de păstrarea și extinderea cititorilor site-ului dvs. WordPress, menținerea unei experiențe bune de utilizator (UX) este crucială. Ca atare, dacă conținutul dvs. este lung, vă recomandăm să adăugați un buton „defilare înapoi în sus” ca un economisitor de timp util.
Din fericire, adăugarea acestui lucru pe site-ul dvs. WordPress este simplă. Puteți fie să adoptați abordarea manuală și să utilizați cod, fie să alegeți un plugin WordPress dedicat. În cele din urmă, butoanele de derulare înapoi în sus pot fi configurate să funcționeze pe orice dispozitiv pe care este vizualizat site-ul dvs.
În acest articol, vom arunca o privire mai atentă la ce este un link înapoi în sus (și de ce este bun pentru UX). Vă vom ghida apoi prin ambele metode pentru a le adăuga pe site-ul dvs. WordPress. Să ne scufundăm!
Buton înapoi în sus
Nu este un secret pentru nimeni că conținutul de formă lungă crește în popularitate pe web. Acest lucru are sens, deoarece conținutul de formă lungă oferă mai multe oportunități de a transmite informații detaliate, de a prezenta mai multe imagini și de a crește optimizarea pentru motoarele de căutare (SEO). Cu toate acestea, pur și simplu generarea de conținut lung și ignorarea UX vă va dezamăgi probabil cititorii.
Adăugarea unui buton înapoi în sus vă poate ajuta să evitați acest lucru. După cum sugerează și numele, odată ce ați dat clic, acest lucru vă aduce pur și simplu utilizatorul înapoi în partea de sus a paginii pe care se află. Sunt potrivite pentru toate dispozitivele și ecranele și, de obicei, plutesc în colțul din dreapta jos al ecranului.
Dacă utilizați conținut de formă lungă, este foarte recomandată includerea unui buton de defilare înapoi în sus. Această piesă va descrie exact cum să faceți acest lucru.
Adăugarea unui buton de derulare înapoi în sus cu HTML
Această metodă este ideală dacă doriți să modificați în mod direct aspectul și comportamentul butonului de derulare înapoi în sus a paginii dvs. manual (și să vă abțineți de la a vă încărca site-ul cu pluginuri suplimentare de meniu WordPress).
Înainte de a începe, amintiți-vă că vă veți juca cu codul sub capotă. Ca atare, este o idee bună să utilizați o temă copil atunci când adăugați butonul prin HTML (precum și pentru a face backup pentru site-ul dvs.). Hai să aruncăm o privire!
Pasul 1
Primul pas va fi să accesați fișierele site-ului dvs. WordPress prin File Transfer Protocol (FTP) pentru a vă localiza folderul JavaScript. Pentru acest exemplu, vom folosi soluția FTP FileZilla, deoarece este ușor de utilizat, sigură și disponibilă pentru fiecare platformă.
După ce ați adăugat acreditările site-ului dvs., navigați la wp-content > teme > tema dvs. > js (tema dvs. fiind tema pe care ați selectat-o pentru site-ul dvs.):
În acest dosar, va trebui să creăm un fișier script care va dicta modul în care butonul se va comporta pe site-ul dvs.
Pasul 2
Apoi, veți dori să creați un fișier nou numit topbutton.js în folderul js . Pentru a face acest lucru în FileZilla, faceți clic dreapta pe cadranul din dreapta jos și selectați Creare fișier nou . Odată ce fișierul se deschide în editorul de text preferat, inserați următorul cod:
jQuery(document).ready(funcție($){
var offset = 100;
var viteza = 250;
var duration = 500;
$(window).scroll(function(){
if ($(this).scrollTop() < offset) {
$('.topbutton') .fadeOut(durata);
} altfel {
$('.topbutton') .fadeIn(durata);
}
});
$('.topbutton').on('clic', function(){
$('html, body').animate({scrollTop:0}, viteza);
returnează fals;
});
});Puteți ajusta setările de viteză și durată din acest cod pentru a vă satisface nevoile, deoarece acestea reprezintă unități de timp, dar acest lucru nu este necesar în acest moment.
După ce sunteți mulțumit de setările butonului, salvați fișierul și treceți la pasul următor.
Pasul 3
Acum va trebui să vă creați butonul. Puteți fie să creați unul de la zero, fie să descărcați unul de pe un site precum Font Awesome. Apoi, încărcați imaginea în WordPress prin Media Library și copiați adresa URL a acesteia:
Va trebui să inserați această adresă URL în fișierul style.css pentru a o utiliza pe site-ul dvs., ceea ce ne duce la pasul următor.
Pasul #4
Fișierul style.css conține toate elementele de design ale site-ului dvs., cum ar fi fonturile, culorile și multe altele. Pentru a-l accesa, navigați la Aspect > Editor din WordPress și deschideți fila Foaie de stil . Apoi, va trebui să inserați următorul fragment:
.butonul de sus {
înălțime: 50px;
lățime: 50px;
poziție:fixă;
dreapta: 5px;
jos: 5px;
Z-index: 1;
background-image:url ("http://example.com/wp-content/uploads/2015/01/topbutton.png");
background-repeat:no-repeat;
afișaj: niciunul;
}Asigurați-vă că înlocuiți adresa URL a linkului de imagine din acest fragment cu adresa URL pe care ați copiat-o la pasul anterior. Apoi selectați Actualizare fișier , care va seta butonul să apară.
Pasul #5
Acum va trebui să spuneți WordPress că doriți să utilizați fișierul JavaScript pe care l-ați creat. Rămânând în pagina Editor , deschideți fila Funcții teme (functions.php) :
Apoi, inserați următorul script de coadă:
function my_scripts_method() {
wp_enqueue_script(
„script personalizat”,
get_stylesheet_directory_uri() . „/js/topbutton.js”,
array('jquery')
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method');Nu vă faceți griji dacă nu înțelegeți textul – WordPress va, care este cel mai important! Când sunteți gata, apăsați Actualizare fișier .
Pasul #6
În cele din urmă, pentru a adăuga butonul la subsolul paginii dvs. web, navigați la fișierul Theme Footer (footer.php) din ecranul Editor și inserați următorul fragment de cod (ideal înainte de o etichetă div de închidere pentru a asigura o spațiere optimă):
<a href="#" class="topbutton"></a>
Selectați Actualizare fișier și gata! Butonul dvs. de meniu back-to-top ar trebui să se afișeze acum pe paginile site-ului dvs. WordPress.
Adăugarea unui buton de derulare înapoi în sus cu un plugin
Deși metoda manuală va fi simplă pentru dezvoltatorii experimentați, toți ceilalți vor dori probabil să folosească un plugin WordPress dedicat. Să găzduim câteva dintre cele mai bune opțiuni gratuite disponibile în prezent.
Sus
Acest plugin ușor va adăuga un buton plutitor personalizabil paginilor dvs., permițând cititorilor să alunece înapoi în partea de sus a paginii. Cu To Top, puteți ajusta fără efort dimensiunea, culoarea și poziția pictogramei butonului folosind meniurile drop-down. Există chiar și o opțiune pentru optimizarea butonului de meniu pentru dispozitivele mobile.
În plus, puteți seta și când apare butonul pe pagina dvs., reducând dezordinea și sporind UX.
WPF Front Scroll Top
Deși nu este atât de bogat în funcții ca To Top, WPFront Scroll Top este o opțiune versatilă de luat în considerare. Puteți seta practic orice imagine pentru butonul dvs., puteți adăuga elemente Font Awesome și chiar puteți ajusta forma pictogramei.
În plus, în timp ce WPFront Scroll Top este configurat să afișeze pictograme receptive care vor arăta bine pe orice dispozitiv mobil, aveți și opțiunea de a nu afișa butonul pe ecrane mai mici.
Derulați pagina la id
Derularea paginii la id este – la fel ca celelalte soluții din această listă – simplu de utilizat și implementat. Cu toate acestea, este unic prin faptul că puteți adăuga și butoane pentru defilare orizontală și personalizată. Acest lucru va fi ideal pentru site-urile WordPress cu o singură pagină, concepute pentru derulare lină pe ecrane mai mici.
Pluginul vine, de asemenea, cu o gamă largă de opțiuni de personalizare și configurare. Îl puteți folosi pentru a ajusta rapid durata și comportamentul derulării, pentru a modifica animațiile butoanelor, pentru a seta ținte pentru punctele de ancorare și multe altele.
Suport WordPress de încredere și accesibil cu motorul WP
La WP Engine, echipa noastră de experți se angajează să vă ajute să vă mențineți UX de top al site-ului dvs. WordPress. Centrul nostru de resurse dedicat conține o mulțime de articole, rezumate de sfaturi și informații pentru îmbunătățirea performanței și aspectului site-ului dvs. Dacă aveți întrebări sau nelămuriri specifice, personalul nostru de asistență vă poate ajuta 24/7.
Pentru a afla mai multe despre planurile noastre de găzduire de calitate sau pentru a afla cum vă putem îmbunătăți performanța site-ului WordPress, nu ezitați să ne contactați astăzi!