Tilbake til øverste knappene fungere som en ekstremt brukervennlig tilnærming til web-utvikling, spesielt hvis du bygger et nettsted med mye innhold. Dette er ikke annerledes i WordPress, den mest populære content management system som brukes av millioner av mennesker og virksomheter. Noen premium temaer tilgjengelig i WordPress komme med en tilbake til øverste knappen, som vises når du blar ned på en side. Saken er, men ikke alle temaer kommer med denne funksjonen, spesielt de som er gratis. Den gode nyheten er at vi kan lage vår egen tilbake til toppen knapp lett, ved hjelp av enkle HTML, CSS og jQuery, en populær Javascript-bibliotek. Ved å legge denne knappen, kan du forbedre nettstedets brukervennlighet og grensesnitt, noe som i sin tur kan forbedre søkemotoroptimalisering. Hvis du vil se et eksempel, bare bla nedover på denne siden.

Lag HTML

Det første trinnet for å lage en slik knapp i JQuery er først å opprette HTML. Koden for å gjøre dette på er rett og slett:
^

Ved hjelp av HTML 'a' koder, er vi knytte dette skiltet til ingenting siden vi skal spesifisere at det går til toppen av siden senere når vi skaper vår Javascript-kode . Vi er også å gi det en klasse for "scrollToTop", slik at vi kan målrette det i vår CSS for å style det pent. Teksten som vises i knappen er rett og slett en pil opp (^), som fungerer som et symbol, slik at brukeren vet at å klikke på knappen vil automatisk rulle tilbake til toppen av siden. Nå som vi har HTML-koden, er vårt neste skritt å gå til WordPress dashbordet. På venstre meny, gå til Utseende -> Editor, som vil ta deg til redigeringsskjermen for temaets PHP og CSS. Avbildet her (klikk for full størrelse) Når du er på denne skjermen, vil du se maler sidebar til høyre. Scroll ned og du vil se alt av sidemaler. Vi ønsker å implementere vår knappen på sidemaler som har mye av overfylte innhold og vil dra nytte av den tilbake til øverste knappen. For denne opplæringen, skal vi bruke vår hovedside mal. Tema kunne ha denne tittelen annerledes, så sørg for å sjekke og se hvilken mal som skal brukes for de fleste av sidene. Klikk på hovedsiden mal og lim koden for vår badge rett etter wp funksjon kalt the_content (). Dette er hva det skal ligne: (. Det uthevede området er der koden er plassert dette er hvordan det ser ut for Magazine Lite Theme)

Styling Vår Button

Nå som vi har html gjort, er det på tide å flytte på CSS. Når du først klikker på Utseende -> Editor, vil du umiddelbart bli rettet til stilark-fil (style.css). For å skape en brukervennlig tilbake til øverste knappen i WordPress, må vi sørge for at vi legger stiler, slik at det harmonerer med utformingen av nettstedet vårt. Her er en CSS-kode:
.scrollToTop {

width: 35px;

høyde: 35px;

text-align: center;

bakgrunn: RGBA (53,53,53,0.4) viktig;

border-radius: 100px;

font-weight: bold;

font-size: 30px;

text-decoration: none;

stilling: fast;

top: 575px;

høyre: 40px;

display: none;

z-index: 5 viktige;
} .scrollToTop: hover {

bakgrunn: RGBA (53,53,53,0.2) viktig;

text-decoration: none;
}

Vi er rettet mot "scrollToTop" klasse definert for vår -knappen, og vi gir det noen spesifikke stiler. Bredden og høyden gir det en perfekt firkantet form, men border-radius eiendom på 100px gjør plassen en perfekt sirkel form. Vi ønsker også bakgrunnen for å være en mørk grå farge, men gjennomsiktig slik at det harmonerer fint med siden. Vi bruker RGBA eiendommen for å gjøre dette, "rgb" å være de røde, grønne, blå verdier i vår mørk grå farge (i dette tilfellet: 53,53,53) og "et" vesen hvor gjennomsiktig vi vil at det skal være ( 1 er ingen åpenhet og 0 er full åpenhet). I vårt tilfelle bruker vi 0,4, noe som er merkbart gjennomsiktig. Vi deretter å gi det en fast stilling mot bunnen av siden, slik at den ikke kommer i konflikt med hovedinnhold. I utgangspunktet er knappens skjermen er satt til ingen, og bruker jQuery, vil vi gjøre det slik at skjermen blir sant når brukeren ruller nedover siden. Når brukeren svever over våre knappen, da vil den åpenhet blitt litt mer å gi den en lysere bakgrunn. Gå videre og lim denne koden i style.css fil.

Legge Button Funksjonalitet i jQuery

Nå skiltet ser attraktivt, men hvis du sjekker siden på nettstedet ditt, vil du se det er ikke der. Dette er fordi vi definert en innledende eiendom "display: none;" det vil si at knappen ikke vises i det hele tatt. Vi vil endre på dette nå bruker jQuery. Først må vi åpne vår bunntekstmal på høyre sidebar innenfor våre Utseende -> Editor vinduet. Her er der bunnteksten på nettstedet er generert på hver side. Her vil vi trenger å definere at vi bruker gjeldende versjon av jQuery biblioteket ved å lime inn følgende kode før den avsluttende kroppen () tag:

Med dette definert nå, er vi klare til å skrive kode som vil gjøre vårt WordPress tilbake til øverste knappen vises når brukeren beveger seg ned. I din bunntekstmal rett under der du limt inn koden ovenfor, åpner opp et nytt manus tag som dette:

Nå innenfor disse kodene, lim inn følgende kode:
$ (document) .ready (funksjon () {

//Sjekk om vinduet er for tiden på toppen. Hvis ikke, så viser vår knappen

$ (vindu) .scroll (function () {

if ($ (denne) .scrollTop ()> 100) {

$ ('scrollToTop.') fadeIn ();.

} else {

$ (' .scrollToTop ') fadeout ();.

}

});

//Rull tilbake til toppen hvis brukeren klikker på knappen

$ ( '.scrollToTop') klikk (function () {

$ ('html, body') animere ({scrollTop: 0}, 800);..

return false; Anmeldelser

});
});

Ved hjelp av jQuery scrollTop () -funksjonen, er vi sjekker for å se om brukeren har rullet ned ennå. Hvis de har, vil vår knappen falme inn
sitt vindu, og hvis de blar opp igjen til toppen, vil det visne ut Hotell og forsvinne. Hvis de klikker på den, bruker vi animere () -funksjonen til å bla brukeren tilbake til toppen av siden i løpet av 800 millisekunder, definert i vår kode. Dette gir brukeren en hyggelig livlighet uten å ta for lang tid.

Testing Vår Button

Nå hvis du oppdaterer siden på nettstedet ditt, din knappen skal vises når du ruller ned, ligner på hvordan det ser ut i demoen jeg gitt i begynnelsen av opplæringen. Og der du går, et fullt functionalback til øverste knappen i WordPress tilpasset gjort av deg. Dette er en fin måte å gjøre ikke-premium tema ser kjempebra med et brukervennlig grensesnitt. Nå trenger du ikke å bekymre deg for at brukerne forlater nettstedet ditt fordi du har for mye innhold på sidene dine.

BONUS: Responsive WordPress Theme

Når du viser på nettstedet ditt på en stasjonær, kan du se at knappen ser fine. Problemet er imidlertid at brukere på en smarttelefon eller phablet enhet ikke vil være i stand til å se det. Det er ikke det at koden ikke fungerer, snarere er det knapp utenfor skjermen syn. Siden mange Internett-brukere surfer på mobile enheter, er det svært viktig å sørge for at området er brukervennlig på alle skjermstørrelser. Dette er kjent som responsiv design, og det bør være stiften av enhver webside utvikling. For å gjøre det vises i visningen av mobile enheter, bruker vi CSS mediespørringer, som vi kan bruke til å legge til stiler til visse skjermstørrelser. De viktigste skjermstørrelser vi ønsker å målrette er for de fleste smarttelefoner og phablets i stående retning, men vi trenger en egen spørring for iPhone 5 og under skjermene siden de er litt mindre. Åpne opp stilark innenfor redaktør og lim inn følgende kode helt nederst i filen: Twitter /***** Tilbake til toppen Button Media spørringer ***** /media skjermen og (min- width: 330px) og (max-width: 470px) {/* De fleste smarttelefoner og phablets i stående * /

.scrollToTop {

stilling: fast;

top: 480px;

høyre: 40px;

}
}media skjermen og (max-width: 320px) {/* Mindre skjermer i portrett * /

.scrollToTop {

stilling: fast;

top: 450px;

høyre: 40px;

}
}

Alt vi gjør her er å endre den øverste plasseringen av vår knapp på ulike skjermstørrelser. På de fleste smarttelefoner og nettbrett, vil det vises 480px fra toppen heller enn 575px, som vi definert i våre viktigste stiler. Dette vil gjøre det synlig på skjermer mellom 330 og 470px bred. Enheter som iPhone 3-5S og Samsung Galaxy S-S2 har mindre skjermer enn sine mer avanserte kolleger på 320px, og hvis vi bare brukt den samme spørringen, vises den ikke helt der vi vil ha det til. Dette er grunnen til at vi har gjort en egen spørring, hvor skiltet er kun plassert 450px fra toppen, 30px lenger opp enn de litt større skjermer. Nå knappen din er forståelsesfull og vil dukke opp på rett sted på alle skjermstørrelser. Som du kanskje har lagt merke til, har vi ikke gjøre mediespørringer for tabletter. Dette er fordi høyden på de fleste tabletter er lik de fleste stasjonære skjermer, slik at knappen vises på samme sted som nevnt i våre viktigste stiler (575px).

The End

Hvis du har spørsmål eller kommentarer, kan du gjerne legge igjen en kommentar nedenfor og vi vil komme tilbake til deg ASAP. Lykkelig koding!