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.
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' ){ ?>
} ?>
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(''+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.