WordPress Tutorial: Wie man eine unendliche Scrolling WP Site erstellt

Artikel geschrieben von:
  • WordPress
  • Aktualisiert: Juli 29, 2014

Sie arbeiten sicherlich hart daran, die Benutzerfreundlichkeit Ihrer Website zu verbessern, damit Ihre Benutzer glücklicher sind und mit höherer Wahrscheinlichkeit wiederkommen, oder? Nun, eine der Verbesserungen, die Sie implementieren könnten, ist die unendliche Scroll-Technik. Es ist im Grunde das gleiche wie das, was wir auf Twitter oder Facebook haben, wo nur grundlegende Inhalte zuerst angezeigt werden und mehr Inhalte hinzugefügt werden, wenn Sie nach unten scrollen. Dies ist sehr gut, um die Leistung Ihrer Website zu verbessern (Ladezeit zu reduzieren) und die Benutzerfreundlichkeit zu verbessern (da keine Aktion erforderlich ist, um mehr Elemente zu laden, wie das Klicken auf eine Schaltfläche).

Hier erfahren Sie, warum und wie Sie es auf Ihrer eigenen Website verwenden können

Beispiele für eine unendliche Scrolling-Site

Es ist immer gut zu überprüfen, was die großen Jungs da draußen machen, und diese Art von Effekt (oftmals unbemerkt) wird von vielen großen Websites und Apps genutzt, wie Facebook (das Live-Feed), Twitter, Pinterest, Feedly.

Feedly

Twitter

Infinite Scroll - Do's and Don'ts

Diese Technik entfernt den regulären Paginierungslink Ihrer Website ("ältere Posts" oder die nummerierten Seiten, die Sie nach Ihren Posts haben). Das große "Profi" dieser Technik ist die Ladezeit, da weniger Elemente zuerst geladen werden, können Sie eine viel schnellere Website haben, und da mehr Elemente ohne Seitenladen hinzugefügt werden, kann der Benutzer für 10- "Seiten" von Beiträgen nach unten scrollen bemerken, bleiben Sie länger auf Ihrer Website.

Es kann in den meisten Sites angewendet werden, aber es ist besser für Blogs oder portfolioähnliche Sites geeignet, wo Sie viele Inhalte und Bilder haben und Sie den Benutzer nicht mit viel Inhalt überfordern wollen.

Diese Anleitung erfordert keine Programmierkenntnisse, und um ehrlich zu sein, werden Sie sicherlich ein wenig darüber lernen, wie Sie Ihr WordPress-Theme ein wenig optimieren können.

Die Vermögenswerte

Wir werden verwenden Paul Irishs JS-Plugin. Lade es herunter und installiere es im js-Ordner deines Themes. Wir werden die Twenty Twelve für Lernvorschläge verwenden, aber fühlen Sie sich frei, sie in jedem Thema zu verwenden (und Fragen zu stellen, wenn es für Sie nicht funktioniert).

Außerdem benötigen Sie ein nettes GIF-Bild für Ihre "Lade" -Nachricht. Sie könnten eine Menge von ihnen da draußen finden, aber die AjaxLoad Die Website hat ein großartiges Werkzeug, das Ihnen bei vielen voreingestellten Stilen hilft und Sie können die Farbe wählen, die besser zu Ihrem Farbschema passt.

Sobald Sie das Skript und Ihr schönes gif-Bild unter Wp-content / themes / twentytelve / js haben, können wir loslegen!

Der PHP-Code

Ok, keine Angst, wir geben Ihnen ein Copy & Paste-Snippet, aber hier ist, was wir tun müssen, um es zum Laufen zu bringen:

  • Erstellen Sie eine Funktion, die das Plugin für unendliches Scrollen intern lädt und registriert - Dadurch wird verhindert, dass WordPress es zweimal lädt und die Funktionalität des Themas bricht
  • Laden Sie das Skript nur, wenn Sie über eine Seite verfügen, die keine einzelne Post ist. Nur Seiten, auf denen mehr als 1-Posts angezeigt werden, müssen mehr Artikel laden.

Die Datei functions.php ist das Herz Ihres Themas. Alle Funktionen sind normalerweise dort oder es heißt dort von anderen Dateien. Daher können wir diesen Code in Ihrer Funktionsdatei hinzufügen, um die Unterstützung für unendliches Scrollen hinzuzufügen (fügen Sie sie am Ende der Datei hinzu):

<? php / ************************ WEB UMSATZ INFINITE SCROLLING ******************* ******** / / * Funktion, die das Skript für das unendliche Scolling registriert und festlegt, das im Design verwendet werden soll. * / function twentytwelve_script_infinite_scrolling () {wp_register_script ('infinite_scrolling', // Name des Skripts get_template_directory_uri (). '/ js / jquery.infinitescroll.min.js', // wobei die Datei array ist ('jquery'), // Dieses Skript erfordert ein Jquery-Skript. null, // keine Skriptversionsnummer. true // Skript wird in der Fußzeile platziert.); if (! is_singular ()) {// Nur wenn wir mehr als 1 post haben // laden wir dieses Skript wp_enqueue_script ('infinite_scrolling'); }} // Registrieren Sie unsere benutzerdefinierten Skripte! add_action ('wp_enqueue_scripts', 'twentytwelve_script_infinite_scrolling'); / * Funktion, mit der das unendliche Scrollen auf der Seite angezeigt wird. * / function set_infinite_scrolling () {if (! is_singular ()) {// wieder, nur wenn wir mehr als 1 post // haben, fügen Sie js script unten hinzu?> <script type = "text / javascript"> / * Dies ist das inifinite scrolling setting, Sie können dies nach Belieben ändern. * / var inf_scrolling = {/ * img: ist der Ladebildpfad. Fügen Sie dort ein schönes Gif-Symbol hinzu. msgText: Die Lademeldung als abgeschlossene Meldung: Die fertige Lademeldung * / Loading: { img: "<? echo get_template_directory_uri ();?> / images / ajax-loading.gif", msgText: "Nächste Beiträge werden geladen ...", beendetMsg: "Beiträge geladen !!",}, / * Der nächste Eintrag ist nextSelector einstellen. NextSelector ist die CSS-Klasse der Seitennavigation. In unserem Fall ist # nav-unter .nav-previous a * / "nextSelector": "# nav-unter .nav-previous a", // navSelector ist eine CSS-ID der Seitennavigation "navSelector": "# nav-unter ", // itemSelector ist das div, in dem der Beitrag angezeigt wird" itemSelector ":" article ", // contentSelector ist das div, in dem der Seiteninhalt (Beiträge) angezeigt wird" contentSelector ":" # content "}; / * Das letzte, was Sie tun müssen, ist, contentSelector für das unendliche Scrollen mit einer Funktion jquery aus infinite-scroll.min.js * / jQuery (inf_scrolling.contentSelector) .infinitescroll (inf_scrolling) zu konfigurieren. </ script> <? }} / * Wir müssen diese Aktion in die Fußzeile der Seite einfügen. 100 ist eine Prioritätsnummer, die einer späteren Ausführung entspricht. * / add_action ('wp_footer', 'set_infinite_scrolling', 100); ?>

Alternativer Ansatz - Laden von Seiten und benutzerdefinierten Post-Typen

Der vorherige Code lädt alle Ihre Posts, aber was ist, wenn Sie Seiten oder benutzerdefinierte Post-Typen anzeigen möchten (wie Portfolio-Elemente, wenn Ihr Theme dies unterstützt)? Nun, wir können den Code ein wenig modifizieren und es funktioniert auch.

Die einzige Anpassung, die benötigt wird, ist in Ihrem Index, in der Kategorie oder in irgendeiner anderen Datei, in der Elemente geladen werden. Sie ersetzen Ihre aktuelle Schleife durch einen anderen Code. Sie können Ihre Schleife anhand dieses Codes identifizieren:

while (have_posts ()):

Sobald du es gefunden hast, kannst du diesen magischen Code verwenden:

<div id = "content" role = "main"> <? php / * Nur Seiten mit unendlichem Bildlauf anzeigen! Hier ist das Geheimnis: Sie können post_type für das, was Sie brauchen, einstellen, es ist einfach! Einige post_types könnten sein: portfolio, project, product Wir könnten beliebig viele Posttypen hinzufügen und sie durch Kommas trennen, wie 'post', 'page', 'product' * / $ args = array (// Argumente einrichten 'post_type' => 'page', // Nur Seiten); query_posts ($ args); // Beiträge laden if (have_posts ()):?> <? php / * Startet den Loop * /?> <? php while (have_posts ()): the_post (); // der "normale" Schleifencode, um diese Elemente anzuzeigen?>

Schlussfolgerung

Dies ist nur ein "Aufwärm" -Artikel. Es gibt viele Dinge, die Sie mit dieser Art von Ansatz tun könnten. Zum Beispiel könnten Sie Produkte in Ihrem Geschäft (mit WooCommerce, vielleicht) als Benutzer scrollt laden, oder sogar fügen Sie mehr JS und CSS-Code dort zu erstellen und super parallax-like Loader für Post-Bilder.

Was denkst du über diese Technik? Magst du es? Würdest du es benutzen? Teilen Sie Ihre Gedanken mit den Kommentaren!

Über Rochester Oliveira

Ich bin ein Webdesigner und Unternehmer aus Itajubá (MG), Brasilien. Ich liebe es, über obskure Themen zu schreiben und coole Sachen zu machen.

Verbinden: