Swipe Gestures für WordPress

Das von Three.CO erstellte Plugin „Swipe Gestures“ dient dazu, die von Apps bekannte Wisch-Gestensteuerung (swipe) zur Navigation zwischen Beiträgen auf WordPress einzuführen. Der Kern der Funktionalitäten wird durch ToccaJS von Guanluca Guarini (Version 0.2.0) bereitgestellt.

Eckdaten

Name: Swipe Gestures
Autor: Tobias Münster (Three.CO)
Version: 1.0 vom 20.02.2016

Features

  • Ein Wischen von Rechts nach Links navigiert zum nächsten Artikel, umgekehrt wird zum vorherigen Artikel navigiert.
  • Zusätzlich wird eine Erkennung des DoppelTouch eingeführt. Der Nutzer wird auf eine beliebige Seite – in der Regel die Startseite – geleitet.
  • Mittels weniger Handgriffe individuell anpassbare Navigationselemente am Seitenrand ermöglichen zudem die Navigation per Touch.
  • Zum Testen aber auch als Feature lässt sich die Gestensteuerung auch für die Maus aktivieren.
  • Mittels veränderbarer Schwellenwerte lassen sich einstellen
    • Mindeststrecke (=Hürde) eines Swipes
    • Maximalstrecke, die vertikal zurückgelegt werden darf (verhindert versehentliches Seitenwechseln beim Scrollen)
  • Einzeln (De)Aktivierbar sind folgende Features:
    • Gestensteuerung
    • Gestensteuerung per Maus
    • DoppelTouch
    • Navigation am Seitenrand
    • Skripteinbindung nur dort, wo ein nächster bzw. vorheriger Artikel existiert
    • vom Skript einzufügende next/prev-Links, wahlweise begrenzt auf Artikel innerhalb der gleichen Kategorie oder nach Aktualität gewählt

Screenshots

CSS Styling

Für das Styling der am Seitenrand befindlichen Navigationsbuttons stehen einige Klassen zur Verfügung. Das Plugin ermöglicht direkt das Einbinden individueller CSS Styles um die vorhandenen Styles zu überschreiben. Es sind lediglich die folgenden 4 Regeln

  • #threeco_swipe_left
  • #threeco_swipe_right
  • #threeco_swipe_left:hover
  • #threeco_swipe_right:hover

Problembehandlung

  • Das Plugin funktioniert nur, wenn die in den meisten Templates oder auch von manchen SEO-Plugins zur Verfügung gestellten metaTags <link rel=next …> bzw. <link rel=prev …> eingebunden werden. Sind diese nicht vorhanden, sucht das Plugin alternativ nach normalen Links mit den beiden Attributen. Sollten die Tags nicht automatisiert eingebunden werden, können Sie diese z.B. auch über die functions.php Ihres Themes einbinden. Bitte beachten Sie, dass Änderungen am Theme nach einem Update verloren gehen. Es empfiehlt sich die Verwendung eines Child-Themes.
  • Ohne JS und JQuery funktioniert das Plugin nicht.