Share
Heute gehen wir durch, wie Sie Gesten verwenden, um durch Ihre WordPress-Beiträge zu navigieren. Es ist wirklich einfach, also tauchen wir ein!
Da wir beim Responsive Website-Design voranschreiten und die Anzahl der Benutzer, die Websites auf mobilen Geräten besuchen, zunimmt, ist es eine gute Sache, wenn wir unsere Website mit erstaunlichen Technologien wie Gesten zum Laufen bringen können. Wir werden eine jQuery-Bibliothek verwenden, um dies zusammen mit ein paar guten alten PHP und WordPress zu erreichen.
Die Demo ist ein abgespecktes Thema, das nur für die Zwecke dieses Tutorials erstellt wurde.
Öffne also deinen bevorzugten Texteditor und lass uns anfangen!
Wir werden ein hervorragendes jQuery-Plugin verwenden, um unsere Gesten-Navigation namens Hammer.js zu erstellen. Sie bieten uns alle Funktionen, um verschiedene Arten von Gesten auf unseren Websites zu verwenden.
Beginnen wir damit, alle benötigten Dateien zu erhalten, damit Gesten funktionieren. Sie können die Dateien entweder lokal auf Ihren Computer herunterladen oder deren Online-Version verwenden.
Wir müssen die folgenden Skripte einreihen:
Wir werden diese Skripte in unseremFunctions.php" Datei. Meine bevorzugte Methode ist, zuerst eine Funktion zu erstellen, um jedes Skript innerhalb dieser Funktion zu registrieren und in die Warteschlange zu stellen. Das würde ungefähr so aussehen:
Accentsconagua
function vsgt_enqueue_scripts () // Hammer.js von externem Link registrieren wp_register_script ('hammer', 'http://eightmedia.github.com/hammer.js/hammer.js'); // jQuery Hammer von einem externen Link registrieren // JQuery und Hammer als Abhängigkeiten festlegen, sodass wir nur diese in die Warteschlange stellen und sie alle erhalten wp_register_script ('jquery_hammer', 'http://eightmedia.github.com/hammer.js/jquery. hammer.js ', array (' jquery ',' hammer ')); // Enqueue unsere Skripte wp_enqueue_script ('jquery_hammer'); add_action ('wp_enqueue_scripts', 'vsgt_enqueue_scripts'); Als Nächstes müssen Sie eine leere JavaScript-Datei erstellen, die wir später zum Schreiben des Gesten-Skripts verwenden werden. Erstellen Sie eine Datei, registrieren Sie sich und speichern Sie sie in derselben Funktion, mit der wir gerade alle unsere anderen Bibliotheken und Skripts registriert und in die Warteschlange aufgenommen haben:
// Registrieren Sie unser benutzerdefiniertes JS-Skript wp_register_script ('custom_js', get_template_directory_uri (). '/Js/jquery.custom.js'), array ('jquery_hammer'), '1.0', true); wp_enqueue_script ('custom_js'); Wenn Sie sich nicht mit Enqueue-Skripten auskennen, folgen Sie diesem Tutorial: So fügen Sie JavaScript und CSS in Ihre WordPress-Themes und Plugins ein
Jetzt, da unsere Skripts vorhanden sind, müssen wir sicherstellen, dass wir beim Lesen eines einzelnen Blogposts hin und her navigieren können. Wir tun dies, indem Sie den folgenden Code in unsere WordPress-Schleife einfügen.single.php" Datei:
Wir wickeln unsere Navigation in ein div für bessere Management- und Stylingflexibilität, und verwenden Sie dann eine Spanne, um unsere nächsten und vorherigen Links zu umschließen, die von WordPress generiert werden. Wir packen es mit Span-Klassen, so dass wir die Links direkt ansprechen können, die wir später verwenden müssen. Weitere Informationen zu den nächsten und vorherigen Funktionen finden Sie im WordPress-Codex.
Schließlich müssen wir zu unserer Eröffnung gehen tag und wende eine Klasse an. Ich werde eine Klasse hinzufügen von "Geste" zum body_class () Funktion: >. Wir wenden eine Klasse auf das body-Tag an, da wir sie später in unserer JavaScript-Datei verwenden werden, wo sie als Container dient, um zu überprüfen, ob der Benutzer den Finger zur Navigation gezogen hat.
Nun, da unsere Navigation eingerichtet ist, sollten Sie beim Lesen eines einzelnen Blogbeitrags hin und her navigieren können. Als Nächstes müssen wir unser JavaScript schreiben, um mit Gesten navigieren zu können. Beginnen wir mit dem Öffnen unserer leeren JavaScript-Datei, die wir zuvor erstellt haben, und erstellen Sie eine Funktion. Ihr Dokument sollte ungefähr so aussehen:
jQuery (document) .ready (function ($) function runGesture () // Hier wird unser Code eingehen);
Als nächstes werden wir einige Variablen erstellen. Fügen Sie den folgenden Code in unser ein runGesture Funktion:
// Setze unsere Gestencontainervariable var gestureContainer; // Setze unsere Variable auf 'gehämmert' var hammeredGesture;
Anschließend weisen wir die Variablen ihren jeweiligen Aufgaben zu. Wir werden verwenden gestureContainer Um die Klasse auf dem Body-Tag zuzuweisen, initialisieren wir das Hammer.js-Plugin in unserem HammeredGesture Variable. Fügen Sie den folgenden Code in unser ein runGesture Funktion und unser Code sollte so aussehen:
// Weisen Sie unseren Container der ID zu. GestureContainer = $ ('body.gesture'); // Hammer unserer Geste hammeredGesture = $ (gestureContainer) .hammer (); Nachdem wir nun die Grundlagen festgelegt haben, können wir unser Gestenereignis an unseren Container binden, der mit dem Hammer.js-Plugin initialisiert wurde. Wir machen das, indem wir das ausführen binden Funktion auf unsere HammeredGesture variabel und übergeben Sie das Gestenereignis; speziell verwenden wir das "Ziehen" -Ereignis. Öffnen Sie dann eine Funktion, in der wir das gesamte Handling für das Gestenereignis schreiben. Fügen Sie den folgenden Code in unser ein runGesture Funktion:
// Binden Sie unseren Hammer an das Ereignis, das wir ausführen möchten. HammeredGesture.bind ("drag", function (evnt) // Hier behandeln wir den Code für das Drag-Ereignis)); Wir werden jetzt den Navigationsteil behandeln. In unserem binden Funktion erstellen wir eine Variable namens url. Dies wird verwendet, um das zu erhalten href Wert von den nächsten und vorherigen Links. Wir werden auch testen, ob wir nach links oder rechts ziehen, abhängig von der Richtung, in die wir ziehen, passieren wir die href Wert für die url Variable. Zum Schluss prüfen wir, ob es einen Wert für das gibt url, Wenn dies der Fall ist, werden wir das Fenster auf den Wert von umleiten url. Der folgende Code sollte dies anzeigen:
// Eine URL-Variable einrichten und auf false setzen var url = false; / * Testen Sie, ob die Richtung, in der wir streichen, richtig ist, wenn TRUE, dann holen Sie sich die Spanne mit der Klasse 'nav-next' und übergeben Sie den href-Link an die URL. * / If (evnt.direction == 'right') url = jQuery ( '.nav-next a'). attr ('href'); / * Entspricht dem rechten Schlüssel, ändert jedoch den Wert der URL, um den vorherigen Link zu erhalten * / if (evnt.direction == 'left') url = jQuery ('. Nav-previous a'). Attr (' href '); / * Wenn die URL einen Wert hat, ändern Sie das Get the Window und übergeben Sie den URL-Speicherort * / if (url) window.location = url; Das ist alles unser Gesten-Skript und die Navigation. Wir müssen lediglich eine Browsererkennung durchführen, um sicherzustellen, dass das Skript nur dann ausgeführt wird, wenn wir uns auf einem mobilen Gerät befinden.
WordPress ermöglicht es uns zu erkennen, welche Seite der Client anzeigt body_class Das eignet sich hervorragend für das Styling und Cross-Browser-Kompatibilität. Wir werden dies jedoch ein wenig erweitern und die Browser-Erkennung hinzufügen. Danke an Nathan Rice, der bereits geschrieben hat, wonach wir suchen. Stellen Sie sicher, dass Sie die Anwendung anwenden body_class zu Ihrem Körper-Tag wie oben und öffnen Sie unsere Functions.php und füge folgenden Code ein:
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) $ classes [] = 'gecko'; elseif ($ is_opera) $ classes [] = 'opera'; elseif ($ is_NS4) $ classes [] = 'ns4'; elseif ($ is_safari) $ classes [] = 'safari'; elseif ($ is_chrome) $ classes [] = 'chrome'; elseif ($ is_IE) $ classes [] = 'dh'; else $ classes [] = 'unbekannt'; if ($ is_iphone) $ classes [] = 'iphone'; $ Klassen zurückgeben; add_filter ('body_class', 'browser_body_class'); Großartig! Nun, da wir die Browsererkennung installiert haben, sind das gesamte Gesten-Skript und die Navigation vollständig abgeschlossen. Lass uns zurückgehen und unsere öffnen custom.jquery.js und fügen Sie den folgenden Code außerhalb unseres ein runGesture Funktion:
// Führen Sie die Gesten nur auf einem iPhone oder mobilen Gerät aus, wenn ($ ('. Gesture'). HasClass ('iphone')) runGesture (); Der soeben eingefügte Code führt einen letzten Test durch, um zu prüfen, ob wir uns auf einem mobilen Gerät befinden und ob wir dann das Gesten-Skript ausführen, ansonsten nichts.
Das ist es! Einfach richtig? Sie können auf Ihren mobilen Geräten nach links und rechts durch Posts streichen, und Ihre WordPress-Site wird auf Desktops normal ausgeführt! Viel Spaß beim Spielen mit den verschiedenen Veranstaltungen.
Ich möchte Ihnen ein riesiges Dankeschön sagen, dass Sie sich die Zeit genommen haben, mein Tutorial zu lesen. Ich hoffe, es hat geholfen. Fühlen Sie sich frei, Kommentare zu hinterlassen und ich werde mein Bestes geben, um Ihnen zu helfen und sie zu beantworten. Wenn nicht, können Sie mich direkt über meine Website kontaktieren: www.VinnySingh.co
