Share
Die unendliche Scroll-Paginierung ist von Facebook und Twitter inspiriert. Dies ist nur ein Seitenwechsel, bei dem der Benutzer zum Seitenende blättern muss, um weitere Artikel zu lesen. Dies ist eine Möglichkeit, die Benutzererfahrung auf einer Website zu verbessern. Wenn Sie dies jedoch falsch machen, kann dies auch zu einer schlechten Erfahrung führen. Wenn Sie diese Art der Paginierung implementieren möchten, stellen Sie sicher, dass Sie keine wichtigen Links am Ende der Seite einfügen. Der Grund dafür ist, dass, wenn ein Benutzer versucht, auf diesen bestimmten Link zu klicken, die Seite automatisch neue Einträge lädt und den Link jedes Mal vom Bildschirm schiebt. Sie können entweder einen festen Fußzeilenbereich festlegen oder Ihre Seitenleiste jederzeit sichtbar machen.
Wenn Sie nach einer schnellen Lösung suchen, gibt es bei Envato Market eine große Sammlung unendlicher Scroll-Skripts und Plugins. Schon ab wenigen Dollars ist dies eine großartige Möglichkeit, um in wenigen Minuten etwas zu implementieren, dessen Aufbau von Grund auf viel länger dauern würde!
Egal, ob Sie eine Lösung für WordPress, Magento, WooCommerce oder Ihr eigenes Setup suchen, es ist etwas für Sie dabei!
Es ist wichtig, dass Sie mit Ihrer Paginierung im Voraus planen, wo Sie sie einfügen möchten und wie Sie sie verarbeiten möchten. Eine übliche Methode zur Paginierung ist das Auflisten der Seitennummern am unteren Rand der Seite. Bei dieser Methode werden jedoch am Ende Ihrer Artikelliste keine weiteren Seitennummern angezeigt, da diese nicht mehr benötigt werden. Diese Paginierung kann für alle Themen verwendet werden, solange Sie nicht viele Informationen in den Fußzeilenbereich einfügen, da dies möglicherweise nicht den gewünschten Effekt ergibt.
Unsere unendliche Scroll-Paginierung verwendet die Funktionen jQuery und ajax, um die Anforderung zu erstellen und weitere Artikel abzurufen, die dem Benutzer angezeigt werden. In diesem Tutorial werde ich als Beispiel das Twenty-Ten-Thema verwenden. Sie können die Arbeitsdemo der unendlichen Schriftrolle hier anzeigen.
Wir werden die Ajax-Funktion von WordPress verwenden, um den Aufruf für diese Paginierung zu tätigen. Zuerst bereiten wir die Grundfunktion für unsere Paginierung vor. Bitte fügen Sie den folgenden Code in Ihr Theme ein Functions.php
Accentsconagua
Funktion wp_infinitepaginate () $ loopFile = $ _POST ['loop_file']; $ paged = $ _POST ['page_no']; $ posts_per_page = get_option ('posts_per_page'); # Lade die Beiträge query_posts (array ('paged' => $ paged)); get_template_part ($ loopFile); Ausfahrt; Diese Funktion wird verwendet, um den Aufruf für unsere Paginierung zu tätigen. Grundsätzlich senden wir über ajax zwei Variablen an diese Funktion, eine ist die Seitennummer und eine andere ist die Dateivorlage, die wir für unsere Paginierung verwenden werden. Um diese Funktion mit WordPress Ajax verwenden zu können, benötigen wir den folgenden Code.
add_action ('wp_ajax_infinite_scroll', 'wp_infinitepaginate'); // für den angemeldeten Benutzer add_action ('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate'); // wenn der Benutzer nicht angemeldet ist Die Standardaktion für WordPress-Ajax wäre wp_ajax_ (unser Aktionsname), Deshalb wird im Codebeispiel der Name infinite_scroll verwendet. Wir müssen zwei Aktionen hinzufügen, eine für angemeldete Benutzer und eine für nicht angemeldete Benutzer.
Als Nächstes müssen wir die Ajax-Funktion erstellen, die die beiden Variablen sendet, die wir für unsere Paginierung benötigen. Sie können WordPress-Hooks verwenden, um diese jQuery-Ajax-Funktion einzufügen oder direkt in Ihr Design einzufügen header.php
Dies ist der grundlegende Ajax-Aufruf, den wir durchführen werden, und wir verwenden "infinite_scroll" als unseren Aktionsnamen. WordPress ruft automatisch unsere Funktion auf wp_infinitepaginate (); weil wir es in unserem Thema definieren Functions.php vorher.
Um die unendliche Scroll-Paginierung zu aktivieren, müssen wir feststellen, wann der Benutzer das Ende der Seite erreicht. Dies kann leicht über jQuery mit dem folgenden Code erreicht werden.
Jetzt können wir wissen, wann der Benutzer das Ende der Seite erreicht. Als nächstes müssen wir die anrufen loadArtikel Funktion innerhalb der Scrollfunktion. Ich füge einen Zähler hinzu, der als Seitennummer unseres Anrufs verwendet werden soll.
Jedes Mal, wenn der Benutzer zum Seitenende blättert, erhöht sich der Zähler, und wir können die Seitennummer an unsere übergeben wp_infinitepage () Funktion innerhalb unserer Themen Functions.php. Mit den Funktionen scroll und loadArticle können wir jetzt den ajax-Funktionsaufruf in unserem WordPress-Design ausführen. Das Ergebnis wird jedoch möglicherweise nicht angezeigt, wenn die Schleifendatei nicht in unserem Designordner definiert wurde.
Das Wichtigste ist, dass wir das div einrichten müssen, das den neuen Inhalt enthält, der mit unserer Ajax-Funktion angefordert wurde. Im zwanzig Zehn Thema gibt es bereits ein div, mit dem wir das div verwenden können id = "content" Daher werden wir die Div-ID in unsere Ajax-Funktion aufnehmen. Wenn Sie andere Designs verwenden, die ihre Schleife nicht in ein div einfassen, können Sie die Schleifenfunktion einfach wie den folgenden Beispielcode einschließen, um dasselbe Ergebnis zu erzielen.
Inhalt der Schleife
Als nächstes benötigen wir eine Schleifendatei. Das Twenty Ten-Design enthält bereits eine Loop-Datei. Dies ist der Hauptgrund, warum ich Twenty Ten für dieses Beispiel ausgewählt habe, da es für jeden, der später darauf verweisen möchte, einfacher ist. Wenn Sie keine haben loop.php, Erstellen Sie einfach eine neue Loop-Datei und kopieren Sie die Loop-Funktion in Ihre index.php in die neue Datei und lade sie in den Ordner Ihres Themes hoch. Für alle, die das Twenty Ten-Thema verwenden, möchten Sie die in der Datei enthaltene Paginierung auskommentieren, da wir sie nicht mehr benötigen werden. Weitere Informationen hierzu finden Sie in der Quelldatei des Lernprogramms..
Dies ist optional, um unserer unendlichen Scroll-Paginierung eine schöne Note zu verleihen. Wir werden ein Ajax-Loader-Image hinzufügen, wenn wir unten auf der Seite klicken. Sie können den folgenden Code zu Ihrem hinzufügen footer.php
Wird geladen…
und fügen Sie Ihrem Stylesheet dann das folgende CSS hinzu.
ein # inifiniteLoader position: fixed; z-Index: 2; unten: 15px; rechts: 10px; Anzeige: keine;
Als Nächstes fügen wir unserer jQuery-Funktion einige Codezeilen hinzu, um dieses ajax loader-Element ein- und auszublenden.
Der Ajax Loader wird angezeigt, sobald der Benutzer den unteren Rand der Seite erreicht, und wird ausgeblendet, sobald die Ajax-Anforderung abgeschlossen ist.
Bis jetzt haben wir bereits eine endlose Schriftrolle, aber eins fehlt. Die Funktion wird jedes Mal ausgelöst, wenn ein Benutzer die untere Seite besucht, obwohl keine weiteren Beiträge angezeigt werden. Das wollen wir nicht haben. Wir werden ein Steuerelement in unsere Scroll-Funktion einfügen. Wenn keine weiteren Seiten mehr angezeigt werden, wird es angehalten.
Wir fügen der Funktion eine neue var-Summe hinzu, die die auf unserer Website verfügbaren Gesamtseiten zurückgibt. Dies wird verwendet, um sicherzustellen, dass keine zusätzlichen Anrufe an die Seite getätigt werden, wenn die maximale Seite erreicht ist. Eine weitere Sache, die wir hinzufügen möchten, ist eine Einschränkung, bei der diese Funktion geladen wird. Wir möchten dies nur auf unserer Homepage, im Archiv oder vielleicht in der Suche, aber nicht in unserem einzelnen Beitrag und auf unserer Seite. Also wickeln wir ein einfaches PHP ein ansonsten Funktion in unserem jQuery-Code.
if (! is_single () ||! is_page ()): // unsere jQuery-Funktion hier endif;
Das ist so ziemlich alles, was Sie für die Paginierung benötigen. In den Quelldateien finden Sie beispielsweise den in diesem Tutorial verwendeten Code. Die Dateien basieren auf dem Thema Zwanzig Zehn.
Inzwischen können Sie diese Funktion in jedem Ihrer Themen verwenden. Wenn Sie weitere Vorschläge oder Fragen zu diesem Tutorial haben, können Sie einen Kommentar hinterlassen oder mich über Twitter kontaktieren. Ich würde gerne alle Ideen mit Ihnen teilen.
; ?>/images/ajax-loader.gif )