HTML / CSS, JavaScript / DHTML, WordPress

WordPress Artikel via AJAX nachladen, wie auf Facebook – Tutorial

WordPress Entwickler und Webdesigner

Wordpress Artikel via AJAX nachladen

In meinem letzten Artikel „AJAX Suche für WordPress – nach dem Vorbild von Google Instant Search – Tutorial“ habe ich euch erklärt, wie ihr eine moderne AJAX Suche programmieren könnt bzw. wie so eine Suche speziell mit WordPress funktioniert. Nun möchte ich euch erklären, wie ihr ein weiteres nettes Feature von Webdesign-Podcast.de nachbauen könnt. Ich muss hierbei natürlich nicht verheimlichen, dass ich mich bei der Funktion von Facebook habe inspirieren lassen.

Auf Facebook funktioniert das ganze jedoch noch einwenig anders, dort werden die älteren Beiträge automatisch nachgeladen sobald man in den unteren Bereich von Facebook scrollt. Da diese Funktionsweise bei einem Blog aber nicht unbedingt ideal ist, mache ich es hier auf der Webseite etwas anders. Die älteren Artikel werden schnell und komfotabel nachgeladen, sobald man auf den Button „Ältere Beiträge / Artikel laden…“ klickt. Würde diese Funktion hier automatisch mit dem runterscrollen ausgelöst, hätten Besucher keine Chance mehr den Footer zu erreichen, daher die Klick-Methode.

Die AJAX Nachlade Funktion ist ähnlich simpel wie die Suche und lässt sich ohne Probleme in WordPress Webseiten, aber auch andere Content-Management-Systeme oder statische Webseiten einbinden.

Anzeige:




Das hier ist der Code für den Button, den ihr z.B. in eure index.php von WordPress einbauen könnt:

<? if( $_GET['ajax'] != 'yes' ){ ?>
	<div id="ajaxContentLoader">
		<a href="#">Ältere Beiträge / Artikel laden...</a>
	</div>
<? } ?>

Wozu die if Abfrage ( if( $_GET[‚ajax‘] != ‚yes‘ ){ ) dient erkläre ich euch später. In der functions.php meines WordPress Templates habe ich noch eine kleine PHP Funktion die sowohl für die Nachlade-Funktion als auch andere Scripte zum Einsatz kommt, dieses Script sieht folgendermaßen aus:

function the_current_page(){
	return get_query_var('paged') == 0 ? 1 : get_query_var('paged');
}

Du möchtest noch mehr über WordPress erfahren und lernen? Dann schau dir doch einmal mein achtstündiges WordPress-Video-Training an. Es behandelt die verschiedensten Themen rund um WordPress praxisnah und gut verständlich, wie z.B. Theme-Erstellung, MultiSite / Blognetzwerk, eigene Plugins, Custom-Post-Types, Suchmaschinenoptimierung und vieles mehr: WordPress-Video-Training von Pascal Bajorat

Die Funktion hat nur die simple Aufgabe die aktuelle Seite als numerischen Wert zurückzugeben.

Als nächstes benötigen wir den JavaScript Code für die Nachlade-Funktion, diesen JavaScript Code habe ich ebenfalls im unteren Bereich meiner index.php mit aufgenommen:

Das Script muss innerhalb von jQuery(document).ready(); ausgeführt werden:

// in der Variable actPage wird die aktuelle Seite gespeichert
// beachtet das es sich bei "<?=the_current_page();?>;" um eine PHP Funktion handelt
var actPage = <?=the_current_page();?>;
// Der Button wird mit der Klick-Funktion zum nachladen belegt
jQuery('#ajaxContentLoader a').bind('click', function(){
        // Wenn der Button noch nicht im Lade-Modus ist, werden die weiteren Anweisungen ausgeführt
	if(jQuery('#ajaxContentLoader a').attr('class') != 'loading'){
                // Dem Button wird die Klasse 'loading hinzugefügt'
                // In dieser Klasse befindet sich auch die Lade-Grafik
		jQuery('#ajaxContentLoader a').addClass('loading');
                // Die aktuelle Seite wird mit +1 addiert
                // wir wollen schließlich die nächste Seite laden
		actPage++;
 
               // jQuery GET Request zum auslesen der nächsten Seite
               // An dieser Stelle übergeben wir den Parameter "ajax", damit der nachladen Button nicht 
               // noch ein zweites mal geladen wird, siehe Code oben (<? if( $_GET['ajax'] != 'yes' ){ ?> ...)
		jQuery.get('/page/'+actPage+'/', {ajax: 'yes'}, function(data,success){
			// Wenn der GET Request erfolgreich ausgeführt wurde...
			if(success=='success'){
				// Wird der neue Content aus der via AJAX geladenen Seite aus dem Container
				// mit der ID #staticContent geladen
				newContent = jQuery('#contentMain #staticContent', data).html();
				// und auf der Webseite vor der Container ID #ajaxContentLoader ausgegeben
				// natürlich könnt ihr den zurück gegebenen Content auch auf andere Art und Weise verarbeiten
				jQuery('<div class="ajaxloaded'+actPage+'">'+newContent).insertBefore('#ajaxContentLoader');
				// Der Lade-Zustand des Buttons wird wieder entfernt
				jQuery('#ajaxContentLoader a').removeClass('loading');
			}
		});
	}
        // Um zu verhindern das bei klick auf den Button die href URL aufgerufen wird
        // brechen wir den Linkaufruf mit return false ab
	return false;
});

Das Prinzip dieses Scripts lässt sich natürlich auch auf andere Content-Management-Systeme übertragen, aber auch auf statische Webseiten. Sollte ihr noch Fragen zu diesem Script haben, dann schreibt einfach in die Kommentare.

Viel Spaß beim ausprobieren.

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

18 Antworten zu “WordPress Artikel via AJAX nachladen, wie auf Facebook – Tutorial”

  1. Mal eine doofe Frage: Habt ihr die jQuery eingebunden und das Script von oben in der Footer oder header.php von WordPress gelagert?

    Installiert mal den Firebug und guckt was der euch als debugging Fehler zeigt.

    • Das steht bei mir im Header:

      $(document).ready(function () {
      var actPage = ;
      jQuery(‚#ajaxContentLoader a‘).bind(‚click‘, function(){
      if(jQuery(‚#ajaxContentLoader a‘).attr(‚class‘) != ‚loading‘){
      jQuery(‚#ajaxContentLoader a‘).addClass(‚loading‘);
      actPage++;
      jQuery.get(‚/page/’+actPage+’/‘, {ajax: ‚yes‘}, function(data,success){
      if(success==’success‘){
      newContent = jQuery(‚#contentMain #staticContent‘, data).html();
      jQuery(“+newContent).insertBefore(‚#ajaxContentLoader‘);
      jQuery(‚#ajaxContentLoader a‘).removeClass(‚loading‘);
      }
      });
      }
      return false;
      });
      });

      Die Konsole meldet:
      GET http://www.domain.de/page/2/?ajax=yes 404 (Not Found)

  2. Hey. Auf meiner Seite funktioniert das ganze leider im IE8 nicht richtig. In allen anderen Browsern geht es.


    $.get(path +’/page/’+actPage, {ajax: ‚yes‘}, function(data,success){
    if(success==’success‘){
    var newContent = $(‚#posts‘, data).html();

    Beim Ajax-Aufruf im IE8 wird newContent als leer zurückgegeben. Eigentlich sollte er drei „News“ beinhalten. Bitte um Hilfe!

  3. Hi,
    Finde die Funktion super, jedoch frage ich mich gerade wie ich das ganze in eine statische Website einbauen kann.
    Kann mir da jemand helfen?

    Danke schonmal im Voraus..;)

    • Bei einer statischen Webseite macht diese AJAX Funktion wenig Sinn, du könntest höchstens den Effekt adaptieren oder mit AJAX aus anderen statischen Seiten etwas nachladen.

    • Danke für die schnelle Antwort..
      Also eigentlich suche ich eine Möglichkeit mit der ich bei meiner Website einzelne Div’s nachladen kann.
      Konkret: Ich habe in meiner Site eine Spalte „News“ nun könnte ich ja z.B. die letzten 5 Einträge in ein Div packen.
      Nun suche ich nach einer möglichkeit mit der ich am Ende des ersten Div ein Button erstellen kann und wenn dieser betätigt wird das nächste dich geladen.Sodass nicht erst die ganze Site gelader werden muss bis sie angezeigt wird.

      Hast du eine Idee wie ich das realisieren kann? o.O

      LG

    • Dafür kannst du diese Funktion adaptieren, musst sie aber entsprechend anpassen – wie genau das funktioniert kann ich dir jetzt aber leider nicht vormachen, dann könnte ich gleich das ganze Script schreiben, aber guck dir mal die AJAX Funktionen von jQuery an. Damit geht das relativ einfach…

Schreibe eine Antwort zu Pascal BajoratAntwort abbrechen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.