Share
Idag kommer vi att gå igenom hur du konfigurerar med gester för att navigera genom dina WordPress-inlägg. Det är väldigt enkelt, så låt oss dyka in!
När vi går framåt i responsiv webbdesign och antalet användare som besöker webbplatser på mobila enheter ökar, är det bra om vi kan göra vår hemsida med fantastiska tekniker som gester. Vi kommer att använda ett jQuery-bibliotek för att uppnå detta tillsammans med några bra ol 'PHP och WordPress.
Demon är ett avskalat tema som har skapats för bara syftet med denna handledning.
Så öppna din favorit textredigerare och låt oss börja!
Vi kommer att använda ett utmärkt jQuery-plugin för att skapa vår gestnavigering som heter Hammer.js. De ger oss alla funktioner att använda olika typer av gester inom våra webbplatser.
Låt oss börja med att få alla nödvändiga filer vi behöver för gester att arbeta. Du kan antingen ladda ner filerna lokalt till din maskin eller använda deras online-version.
Vi behöver förneka följande skript:
Vi kommer att inskränka dessa skript inom vår "functions.php"Fil. Min föredragna metod är att först skapa en funktion för att registrera och skriva in varje skript inuti denna funktion. Det här skulle se ut så här:
Accentsconagua
funktion vsgt_enqueue_scripts () // Registrera Hammer.js från extern länk wp_register_script ('hammer', 'http://eightmedia.github.com/hammer.js/hammer.js'); // Registrera jQuery Hammer från extern länk // Ange jQuery och Hammer som beroenden så att vi bara enqueue detta och vi får dem alla wp_register_script ('jquery_hammer', 'http://eightmedia.github.com/hammer.js/jquery. hammer.js ", array (" jquery "," hammer ")); // Skriv in våra skript wp_enqueue_script ('jquery_hammer'); add_action ('wp_enqueue_scripts', 'vsgt_enqueue_scripts'); Därefter måste vi skapa en tom JavaScript-fil som vi senare använder för att skriva gestusskriptet. Skapa en fil och registrera och skriva in den i samma funktion som vi bara använde för att registrera och skriva in alla våra andra bibliotek och skript:
// Registrera vårt anpassade 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'); Om du inte är säker på att skriva in skript följer du denna handledning: Så här inkluderar du JavaScript och CSS i dina WordPress-teman och plugins
Nu när våra skript är på plats måste vi se till att vi kan navigera fram och tillbaka när vi läser ett enda blogginlägg. Vi gör detta genom att infoga följande kod inom vår WordPress Loop i vår "single.php"fil:
Vi sätter in vår navigering inom en div för bättre hantering och styling flexibilitet, och använd sedan en spänning för att paketera kring våra nästa och tidigare länkar som genereras av WordPress. Vi sätter ihop det med span klasser, så att vi kan rikta in de länkar som vi behöver använda senare. Du kan läsa mer om nästa och föregående funktioner i WordPress Codex.
Slutligen måste vi gå till vår öppning tagga och tillämpa en klass på den. Jag kommer att lägga till en klass av "gest" till body_class () fungera: >. Vi tillämpar en klass i kroppslabeln eftersom vi senare använder den i vår JavaScript-fil, där den kommer att fungera som vår behållare för att kontrollera om användaren har svepat fingret för navigering.
Nu när vår navigering är inställd, bör den låta dig navigera fram och tillbaka när du läser ett enda blogginlägg. Nästa måste vi skriva vår JavaScript för att göra navigering med gester. Låt oss börja med att öppna vår tomma JavaScript-fil som vi skapade tidigare och skapa en funktion. Ditt dokument ska se ut så här:
jQuery (dokument) .ready (funktion ($) function runGesture () // Vår kod kommer att gå in här);
Nästa kommer vi att skapa några variabler. Lägg in följande kod i vår runGesture fungera:
// Ange vår gestbehållare variabel var gestureContainer; // Ange vår variabel för att vara "hamrad" var hammeredGesture;
Efter detta kommer vi att tilldela variablerna till deras lämpliga uppgifter. Vi kommer att använda gestureContainer att tilldela klassen på kroppstaggen, och vi kommer sedan att initialisera Hammer.js-plugin på vår hammeredGesture variabel. Sätt in följande kod i vår runGesture funktionen och vår kod ska se så här ut:
// Tilldela vår behållare till ID gestureContainer = $ ('body.gesture'); // Hammer our Gesture hammeredGesture = $ (gestureContainer) .hammer (); Nu när vi har fastställt våra grundläggande principer, kan vi fortsätta och binda vår gest händelse till vår behållare som har initierats med Hammer.js plugin. Vi gör detta genom att springa binda funktion på vår hammeredGesture variabel och passera gest händelsen; Speciellt kommer vi att använda "dra" -händelsen. Öppna sedan en funktion där vi ska skriva all hantering för gesthändelsen. Sätt in följande kod i vår runGesture fungera:
// Bind vår Hammer till händelsen vi vill köra hammeredGesture.bind ("dra", funktion (evnt) // Här hanterar vi koden för dra händelsen); Vi hanterar nu navigationsdelen. Inuti vårt binda funktion skapar vi en variabel som heter url. Detta kommer att användas för att få href värde från nästa och tidigare länkar. Vi kommer också att testa om vi drar åt vänster eller höger, beroende på vilken riktning vi drar kommer vi att passera href värde till url variabel. Slutligen kommer vi att kontrollera om det finns ett värde för url, och om det finns, kommer vi att omdirigera fönstret till värdet av url. Följande kod ska visa detta:
// Ställ in en URL-variabel och sätt den till false var url = false; / * Testa om den riktning vi sveper är rätt om TRUE får spänningen med klassen "nav-next" och skicka href-länken till URL * / if (evnt.direction == 'right') url = jQuery '.nav-next a'). attr ('href'); / * Samma som den högra nyckeln men ändrar värdet på webbadressen för att hämta den tidigare länken * / om (evnt.direction == 'left') url = jQuery ('.nav-previous a'). Attr href '); / * Om webbadressen har ett värde ändrar du fönstret och skickar URL-adressen till det * / if (url) window.location = url; Det är allt vårt gestusskript gjort och komplett tillsammans med navigeringen. Vi behöver bara göra vissa webbläsardetektering för att säkerställa att skriptet bara körs när vi är på en mobilenhet.
WordPress tillåter oss att upptäcka vilken sida kunden tittar på med hjälp av body_class vilket är utmärkt för styling och korsning av webbläsarkompatibilitet, men vi kommer att expandera lite här och lägga till webbläsardetektering. Tack vare Nathan Rice som redan har skrivit det vi söker. Se till att du tillämpar body_class till din kroppslabel som vi gjorde ovan och öppna sedan vår functions.php och sätt in följande kod:
funktion browser_body_class ($ klasser) global $ is_lynx, $ is_gecko, $ is_IE, $ is_opera, $ is_NS4, $ is_safari, $ is_chrome, $ is_iphone; om ($ is_lynx) $ klasser [] = 'lynx'; elseif ($ is_gecko) $ classes [] = 'gecko'; elseif ($ is_opera) $ klasser [] = 'opera'; elseif ($ is_NS4) $ klasser [] = 'ns4'; elseif ($ is_safari) $ classes [] = 'safari'; elseif ($ is_chrome) $ classes [] = 'chrome'; elseif ($ is_IE) $ klasser [] = 'ie'; annat $ klasser [] = 'okänt'; om ($ is_iphone) $ klasser [] = 'iphone'; returnera $ klasser; add_filter ('body_class', 'browser_body_class'); Bra! Nu när vi har upptäckt webbläsare på plats, tillsammans med hela det fullständiga gestusskriptet och vår navigering helt klar. Låt oss gå tillbaka och öppna vår custom.jquery.js och sätt in följande kod utanför vår runGesture fungera:
// Bara kör gesterna på en iPhone eller mobil enhet om ($ ('gest'). HasClass ('iphone')) runGesture (); Koden som vi bara har lagt in gör ett slutprov för att kontrollera om vi är på en mobil enhet och om vi kör körbehandlingsskriptet, gör annars ingenting.
Det är allt! Enkel rätt? Du kan dra åt vänster och höger på dina mobila enheter via inlägg och din WordPress-webbplats kör perfekt normalt på skrivbord! Ha det roligt att leka med de olika händelserna.
Jag skulle vilja säga ett stort tack för att du spenderade tid att läsa min handledning, jag hoppas det hjälpte. Vänligen gärna lämna kommentarer och jag kommer att försöka mitt bästa för att hjälpa och svara på dem. Om inte, kan du alltid kontakta mig direkt via min hemsida: www.VinnySingh.co
