Share
I dag vil vi gå gjennom hvordan du konfigurerer bruk av bevegelser for å navigere gjennom WordPress-innleggene dine. Det er veldig enkelt, så la oss dykke inn!
Når vi beveger oss fremover i lydhurt nettsteddesign og antall brukere som besøker nettsteder på mobilenheter, øker, er det bra om vi kan gjøre nettstedet vårt til å fungere med fantastiske teknologier som for eksempel bevegelser. Vi bruker et jQuery-bibliotek for å oppnå dette sammen med noen gode ol 'PHP og WordPress.
Demoen er et fjernet tema som er opprettet for bare formålet med denne opplæringen.
Så åpne din favoritt tekstredigerer og la oss begynne!
Vi bruker et utmerket jQuery-plugin for å lage vår gestusnavigasjon kalt Hammer.js. De gir oss alle funksjonene til å bruke forskjellige typer bevegelser i våre nettsider.
La oss begynne med å få alle nødvendige filer vi trenger for bevegelser til arbeid. Du kan enten laste ned filene lokalt til maskinen din, eller bruke den elektroniske versjonen.
Vi må legge til følgende skript:
Vi vil enqueue disse skriptene innenfor vår "functions.php"Fil. Min foretrukne metode er å først opprette en funksjon for å registrere og enqueue hvert script inne i denne funksjonen. Dette ville se slik ut:
Accentsconagua
funksjon vsgt_enqueue_scripts () // Registrer Hammer.js fra ekstern lenke wp_register_script ('hammer', 'http://eightmedia.github.com/hammer.js/hammer.js'); // Registrer jQuery Hammer fra ekstern lenke // Sett jQuery og Hammer som avhengigheter, slik at vi kun enqueue dette, og vi får dem alle wp_register_script ('jquery_hammer', 'http://eightmedia.github.com/hammer.js/jquery. hammer.js ', array (' jquery ',' hammer ')); // Oppsummer våre skript wp_enqueue_script ('jquery_hammer'); add_action ('wp_enqueue_scripts', 'vsgt_enqueue_scripts'); Deretter må vi opprette en tom JavaScript-fil som vi senere bruker til å skrive gestusskriptet. Opprett en fil, og registrer og enqueue den i samme funksjon som vi nettopp pleide å registrere og enqueue alle våre andre biblioteker og skript:
// Registrer vår egendefinerte JS Script wp_register_script ('custom_js', get_template_directory_uri (). '/Js/jquery.custom.js', array ('jquery_hammer'), '1.0', true); wp_enqueue_script ('custom_js'); Hvis du ikke er sikker på at du skal bruke skript, følger du denne veiledningen: Slik inkluderer du JavaScript og CSS i WordPress-temaene og pluginene
Nå som våre skript er på plass, må vi sikre at vi kan navigere frem og tilbake når du leser et enkelt blogginnlegg. Vi gjør dette ved å sette inn følgende kode i vår WordPress Loop i vår "single.php"fil:
Vi pakker inn navigasjonen vår i en div for bedre styring og styling fleksibilitet, og bruk deretter et spenning for å vikle rundt vår neste og forrige kobling som genereres av WordPress. Vi pakker den inn med span klasser, slik at vi kan målrette linkene direkte som vi må bruke senere. Du kan lese mer om neste og forrige funksjoner i WordPress Codex.
Til slutt må vi gå til vår åpning tag og bruk en klasse til den. Jeg vil legge til en klasse av "gest" til body_class () funksjon: >. Vi bruker en klasse til kropps-taggen fordi vi senere bruker den i vår JavaScript-fil, hvor den vil fungere som vår beholder for å sjekke om brukeren har swiped fingeren for navigering.
Nå som vår navigasjon er satt opp, bør den tillate deg å navigere frem og tilbake når du leser et enkelt blogginnlegg. Deretter må vi skrive JavaScript for å gjøre navigasjon med bevegelser. La oss begynne med å åpne opp vår tomme JavaScript-fil som vi opprettet tidligere og opprette en funksjon. Dokumentet ditt bør se slik ut:
jQuery (dokument) .ready (funksjon ($) funksjon runGesture () // Vår kode vil gå inn her);
Deretter skal vi lage noen variabler. Sett inn følgende kode i vår runGesture funksjon:
// Sett vår gestusbeholder variabel var gestureContainer; // Sett vår variabel for å være 'hammered' var hammeredGesture;
Etter dette skal vi tildele variablene til de aktuelle oppgaver. Vi skal bruke gestureContainer å tildele klassen på kroppsmerket, og vi vil deretter initialisere Hammer.js-pluginet på vår hammeredGesture variabel. Sett inn følgende kode i vår runGesture funksjonen og vår kode skal se slik ut:
// Tilordne vår container til ID gestureContainer = $ ('body.gesture'); // Hammer vår Gesture hammeredGesture = $ (gestureContainer) .hammer (); Nå som vi har grunnleggende sett, kan vi fortsette og binde vår gestushendelse til vår container som er initialisert med Hammer.js-plugin. Vi gjør dette ved å kjøre binde fungere på vår hammeredGesture variabel og bestått bevegelseshendelsen Spesielt vil vi bruke "dra" -hendelsen. Deretter åpner du en funksjon der vi skal skrive all håndtering for gestbegivenheten. Sett inn følgende kode i vår runGesture funksjon:
// Bind Hammeren til arrangementet vi vil kjøre hammeredGesture.bind ("dra", funksjon (evnt) // Her vil vi håndtere koden for dra hendelsen); Vi skal nå håndtere navigasjonsdelen. Inne i vår binde funksjon, oppretter vi en variabel som heter url. Dette vil bli brukt til å få href verdi fra neste og forrige linker. Vi vil også teste om vi drar til venstre eller høyre, avhengig av hvilken retning vi drar, vil vi passere href verdi til url variabel. Til slutt vil vi sjekke om det er en verdi for url, og hvis det er, vil vi omdirigere vinduet til verdien av url. Følgende kode skal vise dette:
// Sett opp en URL-variabel og sett den til false var url = false; / * Test om retningen vi sveiper, er riktig, hvis SANT, så få spenningen med klassen "nav-next" og send href-lenken til URL * / hvis (evnt.direction == 'right') url = jQuery '.nav-next a'). attr ('href'); / * Samme som den høyre nøkkelen, men endre verdien av nettadressen for å få den forrige lenken * / hvis (evnt.direction == 'left') url = jQuery ('.nav-previous a'). Attr href '); / * Hvis nettadressen har en verdi, endrer du vinduet og sender URL-adressen til den * / hvis (url) window.location = url; Det er alt vårt gestusskript gjort og komplett sammen med navigasjonen. Vi trenger bare å gjøre noe nettleserdeteksjon for å sikre at skriptet bare kjører når vi er på en mobilenhet.
WordPress tillater oss å oppdage hvilken side klienten ser på ved hjelp av body_class som er flott for styling og krysser nettleserkompatibilitet, men vi skal utvide dette litt og legge til nettleserens deteksjon. Takk til Nathan Rice som allerede har skrevet det vi leter etter. Sørg for at du søker på body_class til kroppen din som vi gjorde over og deretter åpne opp vår functions.php og sett inn følgende kode:
funksjon browser_body_class ($ klasser) global $ is_lynx, $ is_gecko, $ is_IE, $ is_opera, $ is_NS4, $ is_safari, $ is_chrome, $ is_iphone; hvis ($ er_lynx) $ klasser [] = 'lynx'; elseif ($ is_gecko) $ classes [] = 'gecko'; elseif ($ is_opera) $ klasser [] = 'opera'; elseif ($ is_NS4) $ klasser [] = 'ns4'; elseif ($ is_safari) $ klasser [] = 'safari'; elseif ($ is_chrome) $ klasser [] = 'krom'; elseif ($ is_IE) $ klasser [] = 'dvs.'; ellers $ klasser [] = 'ukjent'; hvis ($ is_iphone) $ klasser [] = 'iphone'; returner $ klasser; add_filter ('body_class', 'browser_body_class'); Flott! Nå som vi har nettleserdeteksjon på plass, sammen med hele det komplette gestusskriptet og navigasjonen vår fullstendig ferdig. La oss gå tilbake og åpne vår custom.jquery.js og sett inn følgende kode utenfor vår runGesture funksjon:
// Bare kjør gestene på en iPhone eller mobil enhet hvis ($ ('gest'). HasClass ('iphone')) runGesture (); Koden vi nettopp har satt inn, gjør en endelig test for å sjekke om vi er på en mobil enhet, og hvis vi deretter kjører gestusskriptet, ellers gjør ingenting.
Det er det! Enkel rett? Du kan sveipe til venstre og høyre på de mobile enhetene dine gjennom innlegg og ditt WordPress-nettsted kjører perfekt normalt på skrivebord! Ha det gøy å leke med de ulike hendelsene.
Jeg vil gjerne si en stor takk for at du har brukt tid til å lese opplæringen min, håper jeg det hjalp. Vær så snill å legge igjen kommentarer, og jeg vil prøve mitt beste for å hjelpe og svare på dem. Hvis ikke, kan du alltid kontakte meg direkte via nettsiden min: www.VinnySingh.co
