Share
Aujourd'hui, nous allons expliquer comment utiliser des gestes pour naviguer dans vos publications WordPress. C'est très simple, alors plongeons-nous dedans!
Alors que nous avançons dans la conception de sites Web réactifs et que le nombre d'utilisateurs visitant des sites Web sur des appareils mobiles augmente, il est bon que nous puissions faire fonctionner notre site Web avec des technologies étonnantes telles que les gestes. Nous allons utiliser une bibliothèque jQuery pour y parvenir avec quelques bons vieux PHP et WordPress.
La démo est un thème épuré qui a été créé uniquement pour les besoins de ce tutoriel..
Alors ouvrez votre éditeur de texte préféré et commençons!
Nous utiliserons un excellent plugin jQuery pour créer notre navigation par gestes appelée Hammer.js. Ils nous fournissent toutes les fonctions pour utiliser différents types de gestes sur nos sites Web..
Commençons par obtenir tous les fichiers nécessaires au bon fonctionnement des gestes. Vous pouvez télécharger les fichiers localement sur votre ordinateur ou utiliser leur version en ligne..
Nous devons mettre en file d'attente les scripts suivants:
Nous allons mettre ces scripts en file d'attente au sein de notrefunctions.php" fichier. Ma méthode préférée consiste tout d'abord à créer une fonction pour enregistrer et mettre en file d'attente chaque script à l'intérieur de cette fonction. Cela ressemblerait à quelque chose comme ça:
Accentsconagua
function vsgt_enqueue_scripts () // Enregistrer Hammer.js à partir du lien externe wp_register_script ('hammer', 'http://eightmedia.github.com/hammer.js/hammer.js'); // Enregistre jQuery Hammer depuis un lien externe // Définit jQuery et Hammer en tant que dépendances afin que nous ne mettions cela que en file d'attente et que nous les obtenions tous wp_register_script ('jquery_hammer', 'http://eightmedia.github.com/hammer.js/jquery. hammer.js ', array (' jquery ',' hammer ')); // Mettre nos scripts en file d'attente wp_enqueue_script ('jquery_hammer'); add_action ('wp_enqueue_scripts', 'vsgt_enqueue_scripts'); Ensuite, nous devons créer un fichier JavaScript vierge que nous utiliserons plus tard pour écrire le script de geste. Créez un fichier, inscrivez-le et mettez-le en file d'attente dans la même fonction que celle que nous venons d'utiliser pour enregistrer et mettre en file d'attente toutes nos autres bibliothèques et scripts:
// Enregistrez notre script JS personnalisé wp_register_script ('custom_js', get_template_directory_uri (). '/Js/jquery.custom.js', array ('jquery_hammer'), '1.0', true); wp_enqueue_script ('custom_js'); Si vous n'êtes pas sûr d'utiliser les scripts de mise en file d'attente, suivez ce didacticiel: Comment inclure JavaScript et CSS dans vos thèmes et plugins WordPress
Maintenant que nos scripts sont en place, nous devons nous assurer que nous pouvons naviguer dans les deux sens lorsque nous lisons un seul article de blog. Nous faisons cela en insérant le code suivant dans notre boucle WordPress dans notre "single.php" fichier:
Nous enveloppons notre navigation dans un div pour une meilleure gestion et une flexibilité de style, puis utilisez une étendue pour envelopper nos liens suivants et précédents qui sont générés par WordPress. Nous l’emballons avec des classes span afin de pouvoir cibler directement les liens que nous devrons utiliser plus tard. Vous pouvez en savoir plus sur les fonctions suivantes et précédentes dans le Codex WordPress.
Enfin, nous devons aller à notre ouverture tag et appliquer une classe à elle. Je vais ajouter une classe de "geste" au body_class () une fonction: >. Nous appliquons une classe à la balise body car nous l'utiliserons plus tard dans notre fichier JavaScript où elle servira de conteneur pour vérifier si l'utilisateur a fait glisser son doigt pour la navigation..
Maintenant que notre navigation est configurée, vous devriez pouvoir naviguer dans les deux sens lorsque vous lisez un seul article de blog. Ensuite, nous devons écrire notre code JavaScript pour pouvoir naviguer avec des gestes. Commençons par ouvrir notre fichier JavaScript vierge créé précédemment et créer une fonction. Votre document devrait ressembler à ceci:
jQuery (document) .ready (function ($) function runGesture () // notre code ira ici);
Ensuite, nous allons créer des variables. Insérez le code suivant dans notre runGesture une fonction:
// Définit notre variable de conteneur de mouvements var gestureContainer; // Définit notre variable pour qu'elle soit 'martelée' var hammeredGesture;
Ensuite, nous allons affecter les variables aux tâches appropriées. Nous allons utiliser gestureContainer pour assigner la classe sur la balise body, et nous initialiserons ensuite le plugin Hammer.js sur notre marteléGesture variable. Insérez le code suivant dans notre runGesture fonction et notre code devrait ressembler à ceci:
// Assigne notre conteneur à l'ID gestureContainer = $ ('body.gesture'); // Marteau notre geste marteléGesture = $ (conteneurContainer) .hammer (); Maintenant que nous avons défini nos principes fondamentaux, nous pouvons poursuivre et lier notre événement de geste à notre conteneur qui a été initialisé avec le plugin Hammer.js. Nous faisons cela en exécutant le lier fonctionner sur notre marteléGesture variable et passer l'événement de geste; Plus précisément, nous allons utiliser l'événement "drag". Ouvrez ensuite une fonction dans laquelle nous écrirons toute la gestion de l'événement de geste. Insérez le code suivant dans notre runGesture une fonction:
// Lier notre marteau à l'événement que nous voulons exécuter hammeredGesture.bind ("drag", function (evnt) // Nous allons ici gérer le code de l'événement drag); Nous allons maintenant gérer la partie navigation. À l'intérieur de notre lier fonction, nous créons une variable appelée url. Ce sera utilisé pour obtenir le href valeur des liens suivant et précédent. Nous allons également tester si nous traînons à gauche ou à droite, en fonction de la direction dans laquelle nous traînons, nous passerons le href valeur à la url variable. Enfin, nous vérifierons s’il existe une valeur pour le url, et s'il y en a, nous redirigerons la fenêtre vers la valeur de url. Le code suivant devrait afficher ceci:
// Configurez une variable d'URL et définissez-la sur false var url = false; / * Teste si la direction dans laquelle nous glissons est correcte si TRUE est défini sur la classe 'nav-next' et passe le lien href à l’URL * / if (evnt.direction == 'right') url = jQuery ( '.nav-next a'). attr ('href'); / * Identique à la touche droite mais change la valeur de l'URL pour obtenir le lien précédent * / if (evnt.direction == 'left') url = jQuery ('. Nav-previous a'). Attr (' href '); / * Si l'URL a une valeur, changez-la pour obtenir la fenêtre et transmettez-lui l'emplacement de l'URL * / if (url) window.location = url; C'est tout notre script de geste fait et complet avec la navigation. Nous avons juste besoin de faire une détection du navigateur pour nous assurer que le script ne fonctionne que lorsque nous sommes sur un appareil mobile.
WordPress nous permet de détecter la page affichée par le client en utilisant le body_class ce qui est excellent pour le style et la compatibilité entre navigateurs, mais nous allons l’étendre un peu et y ajouter la détection du navigateur. Merci à Nathan Rice qui a déjà écrit ce que nous recherchons. Assurez-vous que vous appliquez le body_class à votre balise du corps comme nous l'avons fait ci-dessus, puis ouvrons notre functions.php et insérez le code suivant:
fonction 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) $ classes [] = 'gecko'; elseif ($ is_opera) $ classes [] = 'opéra'; elseif ($ is_NS4) $ classes [] = 'ns4'; elseif ($ is_safari) $ classes [] = 'safari'; elseif ($ is_chrome) $ classes [] = 'chrome'; elseif ($ is_IE) $ classes [] = 'ie'; else $ classes [] = 'inconnu'; if ($ is_iphone) $ classes [] = 'iphone'; retourne $ classes; add_filter ('body_class', 'browser_body_class'); Génial! Maintenant que la détection du navigateur est en place, ainsi que tout le script de gestes complet et notre navigation complètement terminée. Revenons et ouvrons notre custom.jquery.js et insérez le code suivant en dehors de notre runGesture une fonction:
// N'exécute les gestes que sur un iPhone ou un appareil mobile si ($ ('. Geste'). HasClass ('iphone')) runGesture (); Le code que nous venons d'insérer effectue un dernier test pour vérifier si nous sommes sur un appareil mobile et si nous exécutons ensuite le script de mouvements, sinon ne faites rien..
C'est tout! Simple droit? Vous pouvez glisser à gauche et à droite sur vos appareils mobiles par le biais de messages et votre site WordPress fonctionnera parfaitement normalement sur les ordinateurs de bureau! Amusez-vous à jouer avec les différents événements.
Je voudrais dire un énorme merci pour passer le temps de lire mon tutoriel, j'espère que cela a aidé. N'hésitez pas à laisser des commentaires et je ferai de mon mieux pour vous aider et y répondre. Sinon, vous pouvez toujours me contacter directement via mon site web: www.VinnySingh.co
