Share
Astăzi, vom trece prin modul de configurare folosind gesturi pentru a naviga prin mesajele WordPress. Este foarte simplu, deci hai să ne aruncăm în apă!
Pe măsură ce avansăm în design-ul de site-uri responsabile și numărul de utilizatori care vizitează site-uri web pe dispozitive mobile este în creștere, este un lucru bun dacă putem face ca site-ul nostru să funcționeze cu tehnologii uimitoare, cum ar fi gesturile. Vom folosi o bibliotecă jQuery pentru a realiza acest lucru, împreună cu câteva bune PHP și WordPress.
Demo-ul este o temă dezbrăcată care a fost creată doar pentru scopurile acestui tutorial.
Deci, deschideți editorul dvs. preferat de text și să începem!
Vom folosi un plugin jQuery excelent pentru a crea navigația gestului numită Hammer.js. Acestea ne oferă toate funcțiile pentru a folosi diferite tipuri de gesturi pe site-urile noastre.
Să începem prin a obține toate fișierele necesare de care trebuie să lucrăm pentru gesturi. Puteți fie să descărcați fișierele local pe aparat, fie să utilizați versiunea lor online.
Trebuie să cuprindem următoarele scripturi:
Vom înscrie aceste scripturi în cadrul "functions.php"Fișier. Metoda preferată este să creez mai întâi o funcție de înregistrare și de introducere a fiecărui script în interiorul acestei funcții. Acest lucru ar arata cam asa:
Accentsconagua
funcția vsgt_enqueue_scripts () // Înregistrați Hammer.js din link-ul extern wp_register_script ('hammer', 'http://eightmedia.github.com/hammer.js/hammer.js'); // Inregistreaza jQuery Hammer din linkul extern // Stabileste jQuery si Hammer ca dependente, astfel incat sa cuprindem doar acest lucru si le primim pe toate wp_register_script ('jquery_hammer', 'http://eightmedia.github.com/hammer.js/jquery'. hammer.js ', array ("jquery", "ciocan")); // Introduceți scripturile noastre wp_enqueue_script ('jquery_hammer'); add_action ('wp_enqueue_scripts', 'vsgt_enqueue_scripts'); Apoi, trebuie să creăm un fișier JavaScript gol, pe care îl vom folosi mai târziu pentru a scrie scriptul de gest. Creați un fișier, înregistrați-l și introduceți-l în aceeași funcție pe care tocmai am folosit-o pentru a vă înscrie și enquege toate celelalte biblioteci și scripturi ale noastre:
// Înregistrați scriptul personalizat JS wp_register_script ('custom_js', get_template_directory_uri ()) ./js/jquery.custom.js ', array (' jquery_hammer '),' 1.0 ', true); wp_enqueue_script ('custom_js'); Dacă nu sunteți încrezător în scripturile enqueue'ing, urmați acest tutorial: Cum să includeți JavaScript și CSS în WordPress Teme și pluginuri
Acum că scenariile noastre sunt în vigoare, trebuie să ne asigurăm că putem naviga înainte și înapoi atunci când citim un singur post blog. Facem acest lucru prin introducerea următorului cod în cadrul Loop-ului nostru WordPress în interiorul "single.php"fișier:
Înfășurăm navigația într-un div pentru o mai bună gestionare și flexibilitate a stilului, și apoi utilizați un interval pentru a împacheta legăturile următoare și anterioare care sunt generate de WordPress. Îl înfășurăm cu clase de span, astfel încât să putem direcționa linkurile direct pe care va trebui să le folosim mai târziu. Puteți citi mai multe despre funcțiile următoare și anterioare în Codul WordPress.
În cele din urmă, trebuie să mergem la deschiderea noastră etichetați și aplicați o clasă pentru aceasta. Voi adăuga o clasă de "gest"la body_class () funcţie: >. Aplicăm o clasă etichetei corporale, deoarece vom folosi mai târziu în fișierul nostru JavaScript unde va acționa ca container pentru a verifica dacă utilizatorul și-a scos degetul pentru navigare.
Acum, că navigația noastră este configurată, aceasta ar trebui să vă permită să navigați înainte și înapoi atunci când citiți un singur post blog. Apoi trebuie să scrieți JavaScript pentru a face navigarea cu gesturi. Să începem prin deschiderea fișierului JavaScript gol, pe care l-am creat mai devreme și creând o funcție. Documentul dvs. ar trebui să arate astfel:
jQuery (document) .ready (funcția ($) function runGesture () // Codul nostru va intra aici);
În continuare vom crea câteva variabile. Introduceți următorul cod în secțiunea noastră runGesture funcţie:
// Setați variabila container gesture var gestureContainer; // Setați variabila noastră pentru a fi "ciocănită";
După aceasta, vom aloca variabilele la sarcinile corespunzătoare. Vom folosi gestureContainer pentru a atribui clasa pe eticheta organismului, și apoi vom inițializa pluginul Hammer.js pe site-ul nostru hammeredGesture variabil. Introduceți în codul nostru următorul cod runGesture funcția și codul nostru ar trebui să arate astfel:
// Atribuiți containerul nostru la ID gestureContainer = $ ('body.gesture'); // Hammer Gestul nostru hammeredGesture = $ (gestureContainer) .hammer (); Acum, când avem fundamentele noastre stabilite, putem trece și leagă evenimentul nostru de gest la containerul nostru care a fost inițializat cu ajutorul pluginului Hammer.js. Facem asta prin rularea lega funcționează pe noi hammeredGesture variabile și să treacă evenimentul de gest; în mod special, vom folosi evenimentul "drag". Apoi deschideți o funcție în care vom scrie toate manevrele pentru evenimentul de gest. Introduceți în codul nostru următorul cod runGesture funcţie:
// Legați Hammerul nostru la evenimentul pe care dorim să-l executăm hammeredGesture.bind ("drag", funcția (evnt) // Aici vom gestiona codul pentru evenimentul drag); Vom prelua acum partea de navigare. În interiorul nostru lega funcția, vom crea o variabilă numită URL-ul. Acest lucru va fi folosit pentru a obține href valoare de la link-urile următoare și anterioare. Vom încerca, de asemenea, dacă tragem spre stânga sau spre dreapta, în funcție de direcția pe care o trageți, vom trece href valoare pentru URL-ul variabil. În cele din urmă vom verifica dacă există o valoare pentru URL-ul, și dacă există, vom redirecționa fereastra la valoarea de URL-ul. Următorul cod trebuie să afișeze acest lucru:
// Configurați o variabilă URL și setați-o la false var url = false; / * Test dacă direcția pe care o ștergem este corectă dacă TRUE obține apoi intervalul cu clasa 'nav-next' și trimiteți linkul href la adresa URL * / if (evnt.direction == 'right') url = jQuery ( '.nav-următor'). attr ('href'); / * La fel ca și cheia corectă, dar modificați valoarea URL-ului pentru a obține linkul anterior * / if (evnt.direction == 'stânga') url = jQuery (' href '); / * Dacă adresa URL are o valoare, atunci schimbați fereastra și trimiteți adresa URL la ea * / if (url) window.location = url; Asta-i tot gestul nostru de gest făcut și completat împreună cu navigația. Trebuie doar să facem o detectare a browserului pentru a ne asigura că scriptul rulează numai atunci când suntem pe un dispozitiv mobil.
WordPress ne permite să detectăm ce pagină vizionează clientul folosind body_class care este excelentă pentru stilul și compatibilitatea browser-ului încrucișat, dar vom extinde acest lucru puțin și vom adăuga detectarea browser-ului. Mulțumită lui Nathan Rice, care a scris deja ceea ce căutăm. Asigurați-vă că aplicați body_class la eticheta corporală așa cum am făcut-o mai sus și apoi deschideți-ne functions.php și introduceți următorul cod:
funcția browser_body_class ($ classes) globul $ is_lynx, $ is_gecko, $ is_IE, $ is_opera, $ is_NS4, $ is_safari, $ is_chrome, $ is_iphone; dacă ($ is_lynx) $ classes [] = 'lynx'; altfel ($ is_gecko) $ classes [] = 'gecko'; altfel ($ is_opera) $ classes [] = 'opera'; altfel ($ is_NS4) $ classes [] = 'ns4'; elseif ($ is_safari) $ clase [] = 'safari'; altfel ($ is_chrome) $ classes [] = 'crom'; elseif ($ is_IE) $ clase [] = 'ie'; altfel clase de $ [] = 'necunoscute'; dacă ($ is_iphone) $ classes [] = 'iphone'; returnează clase de $; add_filter ('body_class', 'browser_body_class'); Grozav! Acum, că avem detectarea browserului, împreună cu tot scriptul gest complet și navigația noastră a terminat complet. Să ne întoarcem și să ne deschidem custom.jquery.js și introduceți următorul cod în afara paginii noastre runGesture funcţie:
// Executați doar gesturile pe un iPhone sau pe un dispozitiv mobil dacă ($ ('. Gesture') hasClass ('iphone')) runGesture (); Codul pe care tocmai l-am introdus face un test final pentru a verifica dacă suntem pe un dispozitiv mobil și dacă apoi executăm scriptul de gest, altfel nu faceți nimic.
Asta e! Simplu drept? Puteți să glisați la stânga și la dreapta pe dispozitivele mobile prin mesaje și site-ul dvs. WordPress va funcționa perfect pe desktop-uri! Distrează-te jucând în jurul valorii de evenimente diferite.
Aș dori să vă spun un IMUNI vă mulțumesc că ați petrecut timpul pentru a citi tutorialul meu, sper că a ajutat. Vă rugăm să nu ezitați să lăsați comentarii și voi încerca să vă ajut și să le răspund. Dacă nu, puteți oricând să mă contactați direct pe site-ul meu: www.VinnySingh.co
