Share
Vandaag gaan we door met het instellen van gebaren om door je WordPress-berichten te navigeren. Het is heel simpel, dus laten we erin duiken!
Nu we vooruitgang boeken in het responsieve website-ontwerp en het aantal gebruikers van websites op mobiele apparaten toeneemt, is het een goede zaak dat we onze website kunnen laten werken met verbluffende technologieën zoals gebaren. We zullen een jQuery-bibliotheek gebruiken om dit te bereiken samen met een aantal goede oude 'PHP en WordPress.
De demo is een uitgekleed thema dat is gemaakt voor alleen de doeleinden van deze tutorial.
Dus open je favoriete teksteditor en laten we beginnen!
We zullen een uitstekende jQuery-plug-in gebruiken om onze gebarennavigatie genaamd Hammer.js te maken. Ze bieden ons alle functies om verschillende soorten gebaren op onze websites te gebruiken.
Laten we beginnen met het verkrijgen van alle benodigde bestanden die nodig zijn om gebaren te laten werken. U kunt de bestanden lokaal naar uw computer downloaden of hun online versie gebruiken.
We moeten de volgende scripts in wachtrij plaatsen:
We zullen deze scripts in onze wachtrij plaatsen "functions.php" het dossier. Mijn voorkeursmethode is om eerst een functie te maken om elk script binnen deze functie te registreren en in te checken. Dit zou er ongeveer zo uitzien:
Accentsconagua
function vsgt_enqueue_scripts () // Registreer Hammer.js van externe link wp_register_script ('hammer', 'http://eightmedia.github.com/hammer.js/hammer.js'); // Registreer jQuery Hammer van externe link // Stel jQuery en Hammer in als afhankelijkheden zodat we dit alleen in de wachtrij zetten en we krijgen ze allemaal wp_register_script ('jquery_hammer', 'http://eightmedia.github.com/hammer.js/jquery. hammer.js ', array (' jQuery ',' hammer ')); // Voltooi onze scripts wp_enqueue_script ('jquery_hammer'); add_action ('wp_enqueue_scripts', 'vsgt_enqueue_scripts'); Vervolgens moeten we een leeg JavaScript-bestand maken dat we later zullen gebruiken om het gebaar-script te schrijven. Maak een bestand en registreer en wacht in dezelfde functie die we zojuist hebben gebruikt om te registreren en alle andere bibliotheken en scripts in te huren:
// Registreer ons Aangepaste 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'); Als u niet zeker bent van het bijhouden van scripts, volgt u deze tutorial: JavaScript en CSS opnemen in uw WordPress-thema's en -plug-ins
Nu onze scripts aanwezig zijn, moeten we ervoor zorgen dat we heen en weer kunnen navigeren bij het lezen van één blogbericht. We doen dit door de volgende code in onze WordPress Loop in te voegen in onze "single.php" het dossier:
We verpakken onze navigatie in een div voor een betere flexibiliteit voor beheer en styling, en gebruik vervolgens een reeks om onze volgende en vorige links die door WordPress zijn gegenereerd, te omsluiten. We verpakken het met span-klassen, zodat we de links direct kunnen targeten die we later zullen gebruiken. U kunt meer lezen over de volgende en vorige functies in de WordPress Codex.
Eindelijk moeten we naar onze opening gaan tag en pas er een klasse op toe. Ik zal een klasse toevoegen van "gebaar" naar de body_class () functie: >. We passen een klasse toe op de body-tag, omdat we deze later zullen gebruiken in ons JavaScript-bestand, waar het zal fungeren als onze container om te controleren of de gebruiker met zijn vinger naar navigatie heeft gevist.
Nu onze navigatie is ingesteld, zou het u in staat moeten stellen om heen en weer te navigeren bij het lezen van een enkele blogpost. Vervolgens moeten we ons JavaScript schrijven om navigatie met gebaren te maken. Laten we beginnen met het openen van ons lege JavaScript-bestand dat we eerder hebben gemaakt en een functie maken. Uw document zou er ongeveer zo uit moeten zien:
jQuery (document) .ready (function ($) function runGesture () // Onze code zal hier ingaan);
Vervolgens gaan we enkele variabelen maken. Voeg de volgende code toe binnen onze runGesture functie:
// Stel onze gesture-containervariabele var gestureContainer in; // Stel onze variabele in op 'gehamerd' var hammeredGesture;
Hierna gaan we de variabelen toewijzen aan hun juiste taken. We zullen gebruiken gestureContainer om de klasse toe te wijzen aan de body-tag, en dan initialiseren we de Hammer.js-plugin op onze hammeredGesture variabel. Voeg de volgende code in onze runGesture functie en onze code zou er als volgt uit moeten zien:
// Wijs onze container toe aan de ID gestureContainer = $ ('body.gesture'); // Hammer ons gebaar gehamerdGesture = $ (gestureContainer) .hammer (); Nu we onze basisprincipes hebben ingesteld, kunnen we verder gaan en onze Gebeurtenismoment binden aan onze container die is geïnitialiseerd met de Hammer.js-plug-in. We doen dit door het binden functie op onze hammeredGesture verander en pas de gebaargebeurtenis toe; specifiek zullen we de "drag" -gebeurtenis gebruiken. Open vervolgens een functie waarin we alle afhandeling voor de gebarengebeurtenis zullen schrijven. Voeg de volgende code in onze runGesture functie:
// Bind onze Hammer aan de gebeurtenis die we willen uitvoeren hammeredGesture.bind ("slepen", functie (evnt) // Hier zullen we de code behandelen voor de sleepgebeurtenis); We zullen nu het navigatiegedeelte afhandelen. In onze binden functie, maken we een variabele genaamd url. Dit wordt gebruikt om de href waarde van de volgende en vorige links. We zullen ook testen of we naar links of rechts slepen, afhankelijk van de richting die we slepen, zullen we de href waarde voor de url variabel. Uiteindelijk zullen we controleren of er een waarde is voor de url, en als dat het geval is, zullen we het venster omleiden naar de waarde van url. De volgende code zou dit moeten weergeven:
// Stel een URL-variabele in en stel deze in op false var url = false; / * Test of de richting waarin we vegen gelijk heeft als TRUE dan de reeks krijgt met klasse 'nav-next' en de href-link doorgeeft aan de URL * / if (evnt.direction == 'right') url = jQuery ( '.nav-next a'). attr ('href'); / * Hetzelfde als de juiste sleutel, maar verander de waarde van de URL om de vorige link te krijgen * / if (evnt.direction == 'left') url = jQuery ('. Nav-vorige a'). Attr (' href "); / * Als de URL een waarde heeft, wijzigt u de opdracht om het venster op te halen en de URL-locatie door te geven * / if (url) window.location = url; Dat is al ons gebaar-script gedaan en voltooid, samen met de navigatie. We hoeven alleen wat browsedetectie uit te voeren om ervoor te zorgen dat het script alleen wordt uitgevoerd als we ons op een mobiel apparaat bevinden.
Met WordPress kunnen we detecteren welke pagina de client bekijkt met behulp van de body_class wat geweldig is voor styling en cross-browser compatibiliteit, maar we gaan dit een beetje uitbreiden en browser-detectie eraan toevoegen. Dank aan Nathan Rice die al heeft geschreven wat we zoeken. Zorg ervoor dat u de body_class naar je body-tag zoals we hierboven deden en open dan onze functions.php en voeg de volgende code in:
function browser_body_class ($ classes) global $ is_lynx, $ is_gecko, $ is_IE, $ is_opera, $ is_NS4, $ is_safari, $ is_chrome, $ is_iphone; if ($ is_lynx) $ classes [] = 'lynx'; elseif ($ is_gecko) $ klassen [] = 'gekko'; elseif ($ is_opera) $ classes [] = 'opera'; elseif ($ is_NS4) $ klassen [] = 'ns4'; elseif ($ is_safari) $ klassen [] = 'safari'; elseif ($ is_chrome) $ classes [] = 'chrome'; elseif ($ is_IE) $ klassen [] = 'ie'; else $ classes [] = 'unknown'; if ($ is_iphone) $ klassen [] = 'iphone'; return $ klassen; add_filter ('body_class', 'browser_body_class'); Super goed! Nu we de browserdetectie op zijn plaats hebben, samen met het volledige gebaar-script en onze navigatie helemaal af. Laten we teruggaan en onze openen custom.jquery.js en plaats de volgende code buiten onze runGesture functie:
// Voer de gebaren alleen uit op een iPhone of mobiel apparaat als ($ ('. Gesture'). HasClass ('iphone')) runGesture (); De code die we zojuist hebben ingevoegd, voert nog een laatste test uit om te controleren of we op een mobiel apparaat staan en of we dan het gebaar-script uitvoeren, anders niets doen.
Dat is het! Eenvoudig toch? U kunt naar links en rechts vegen op uw mobiele apparaten via berichten en uw WordPress-site zal perfect normaal werken op desktops! Veel plezier met het spelen met de verschillende evenementen.
Ik wil graag een ENORM bedanken dat je de tijd hebt genomen om mijn tutorial te lezen, ik hoop dat dit heeft geholpen. Aarzel niet om commentaar achter te laten en ik zal mijn best doen om hen te helpen en te beantwoorden. Zo niet, dan kunt u altijd rechtstreeks contact met mij opnemen via mijn website: www.VinnySingh.co
