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' ){ ?> <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: Google, HTML, JavaScript, PHP, Podcast
Hey 🙂 genau was ich gesucht habe! bin gespannt ob es bei meinem Layout funktioniert.
Danke für den guten Post!
Mist. Ich bekomme es nicht hin. Bei mir springt’s nur nach oben, wenn ich dann auf den Link klicke.
Funktioniert das auch mit custom post types?
Sollte es, ich habe es allerdings nie probiert.
Bei mir funktioniert es, wie bei ad, leider auch nicht. Schade, denn eine andere Lösung konnte ich bisher nicht finden.
Hallo reen,
Wenn überhaupt noch aktuell:
Ich habe einen ähnlichen Ansatz implementiert. Damit kann ich auch den Custom PostType ‚Portfolio‘ nachladen lassen: http://www.bit01.de/blog/einfacher-ajax-load-button-wordpress-ohne-plugin/
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)
Okay das ist doch schon was, wenn du die Seite aufrufst: http://www.domain.de/page/2/?ajax=yes gibt es denn dann eine 404? Wie ist deine Permalink Struktur
Danke für die Hilfe!
Die Permalinkstruktur ist benutzerdefiniert:
/%postname%/
Merke gerade, dass nicht der komplette Pfad aufgerufen wird, sondern nur root/page/2/?ajax=yes.
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!
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…
Alles klar, werde mich mal weiter umsehen und was ausprobieren..;)
Danke für deine Hilfe
(Sorry für die Rechtschreibefehler…;P)