AJAX: Artikel nachladen ohne jQuery und WordPress Plugins

Jedes Mal, wenn ein Besucher auf einen Link klickt, lädt die komplette Seite neu. Das kostest in den meisten Fällen viel Zeit und ist von Lesern ungern gesehen. Mit einem Ajax Lade-Button können ältere Artikel dynamisch nachgeladen werden.

Update: Ich muss mich entschuldigen. Ich hatte einen kleinen Fehler im jQuery Code so das es zu Fehlern führen konnte bzw. garnicht funktioniert hat. Ich habe das Tutorial nun selber getestet.

Möchte ein Leser ältere Artikel von einem Blog oder Portfolio lesen, klickt er normalerweise auf „ältere Artikel“, der zu einer Übersicht mit älteren Artikel führt. Klickt man auf diesen Link lädt normalerweise die komplette Seite neu. Das heißt, es werden neben den älteren Artikeln auch Skripte, Stylesheets oder Bilder neu geladen. Kurz gesagt: der Besucher muss lange warten, um geringfügige Änderungen sehen zu können.

Mit diesem Artikel möchte ich zeigen wie einfach man jedem WordPress ein Ajax Lade-Button hinzufügen kann, ohne ein Plugin zu verwenden.

Java-Script + PHP = Ajax

Ajax steht für asynchrones Java-Script und XML. Dieses Konzept ermöglicht asynchrone Datenübertragung zwischen Browser (Client) und Server — ohne die Seite neu zu laden. So werden PHP-Dateien via Java-Script vom Server angefragt, dort verarbeitet und fertig an den Browser zurück gegeben.

Dadurch wird die Reaktionszeit deutlich verbessert und auch der Traffic (Datenverbrauch) wird deutlich verringert.

Los geht es!

In diesem Artikel beziehe ich mich auf das kostenlose Blog-System WordPress, das wohl bekannteste CMS unter den Bloggern. Weiterhin nutze ich für die Umsetzung das Framework jQuery.

Das Ganze lässt sich aber auch in normalen Java-Script umsetzen. Sollte sich jemand für diese Lösung interessieren, bitte ich um einen Kommentar.

Dateistruktur

Umgesetzt habe ich das Ganze in meinem Theme-Ordner von WordPress. Deinen Theme-Ordner findest du unter: ~/wp-content/themes/%THEME NAME%/. WordPress-Themes unterstützen normalerweise jQuery.

Die zusätzliche Java-Script Datei script.js, welche die asynchrone Kommunikation realisieren wird, liegt in einem Unterordner js von der Theme.

Was wir genau tun

Um möglichst einfach neue Artikel nachzuladen verwende ich die von WordPress mitgebrachte Seitennummerierung bei Artikelübersichten.

Nehmen wir an Du hast 15 Artikel in deinem Blog und lässt dir 10 pro Seite anzeigen. So würden 5 auf der ersten und 10 auf der zweiten Seite erscheinen. Die zweite Seite der Artikelübersicht kannst du z.B. über www.domain.tld/blog/page/2 aufrufen.

Wir nutzen diese Funktionalität, um nun die Artikelvorschauen der jeweiligen Seitennummern ohne Formatierung nachzuladen. Das heißt, der reine Textauszug, Kategorie, Autor und z.B. das Artikelbild. Unser Skript lässt sich so universell auch auf Kategorien und anderen Artikeltypen wie dem SimplePortfolio ausweiten.

Nun in der Praxis

Kommen wir nun zu den eigentlichen Eingriffen in den Quellentext von der WordPress-Theme. In diesem Artikel beschränke ich mich auf die Realisierung für die Blog Startseite des Themes. Der Ajax Lade-Button erscheint so auch automatisch auf den Kategorien, Schlagwörter und Suchergebnis-Seiten.

Ajax Lade-Button erstellen

Fangen wir mit einem einfachen Lade-Button an. Wenn man darauf klickt soll die Funktion loadMore() ausgeführt werden, die neue Artikel nachlädt. Unser Button:

<div id="loadmore" onclick="loadMore()">
    Mehr laden
</div>

Artikelvorschau: index.php

Über den POST-Parameter ajax können wir zwischen zwei Ausgaben wechseln. Ist der POST Parameter ajax in einer Anfrage nicht gesetzt, so wird die normale Ansicht mit Sidebar, Header und Footer geladen. Ist der Parameter gesetzt, so werden nur die Artikel der jeweiligen Seite angezeigt. Was der Parameter für einen Wert enthält ist egal, er muss nur gesetzt sein.

Das Aussehen für die Artikel steht in einer separaten loop-post.php. Über die Methode get_template_part(‚loop‘,’post‘) werden automatisch alle Artikel mit in diesem Aussehen geladen.

<?php if(!isset($_POST['ajax'])): ?>

<?php get_header(); ?>
    <div id="results" data-max-pages="<?php echo $wp_query->max_num_pages; ?>">
        // Artikel Template laden oder selbst schreiben
        <?php get_template_part('loop','post'); ?>
    </div>
    <div id="loadmore" onclick="loadMore()">
        Mehr laden
    </div>
<?php the_sidebar(); the_footer(); ?>

<?php else: ?>
        // Artikel Template laden ohne Header, Footer und Sidebar
	<?php get_template_part('loop','post'); ?>
<?php endif; ?>

Kommunikation: js/script.js

Kommen wir nun zum wichtigsten Teil der Umsetzung: der asynchronen Kommunikation zwischen Server und Browser (Client) in Java-Script. Wichtig: jQuery muss in der WordPress-Theme mit geladen werden.

page = 1;
maxPages = jQuery("#results").attr("data-max-pages");

function loadMore() {
    if (page >= maxPages) {
		jQuery('#loadmore').slideUp("fast");
		return false;
	}
	page++;
	jQuery.post(document.URL+'page/' + page, { ajax: '' }, function(data) {
		jQuery("#results").append( data );
	});
	return false;
}

Zunächst einmal initialisieren wir zwei Variablen. Eine für die aktuelle Seitennummer, die andere für die maximale Anzahl von Seiten. Die Letztere holen wir uns aus der index.php: data-max-pages.

Nach einem Klick auf den Ajax Lade-Button wird die Methode loadMore() aufgerufen. Die Methode prüft zunächst, ob die aktuelle Seite die maximale Anzahl erreicht hat. Ist das der Fall versteckt er den Lade-Button und beendet die Funktion.

Sind wir noch nicht auf der letzten Seite angekommen, wird eine Anfrage zum Server geschickt. Was wir wollen ist der Inhalt der nächsten Seite. Wie wir oben erfahren haben, geht das einfach indem wir ein page/ und die aktuelle Seitenzahl an die aktuelle Adresse anhängen. Damit wir nur die „reinen“ Artikel zurück bekommen, schicken wir auch noch einen ajax POST-Parameter mit.

jQuery.post(URL, PARAMETER, function(data) { });

Das Ergebnis, also die Artikel werden in der lokalen Variable data gespeichert. Zum Schluss werden die Artikel nun dem Div-Container mit der ID results angehängt.

jQuery("#results").append( data );

Nun ohne jQuery

Aufgrund der regen Nachfrage werde ich nun noch eine Ergänzung des Codes beifügen, die eine Lösung mit reinem Java-Script ermöglicht. Dabei bleibt alles beim alten. Was sich wirklich ändert, wer hätte es gedacht, ist der Java-Script Code. Dieser muss nun anstelle des jQuery-Codes so aussehen:

page = 1;
maxPages = document.getElementById('results').getAttribute ('data-max-pages');

function loadMore() {
	if (page >= maxPages) {
		document.getElementById('loadmore').style.display = "none";
		return false;
	}
	page++;

	var xmlhttp = new XMLHttpRequest();
	data = 'ajax=0';
	xmlhttp.open("POST", document.URL + 'page/' + page, true);
	xmlhttp.onreadystatechange = function() {
	if (xmlhttp.readyState == 4) {
		results = document.getElementById('results');
		results.innerHTML += xmlhttp.responseText;
	}
}
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlhttp.send(data);

return false;
}

Schlusswort

Bitte bedenke, dass die Umsetzung sehr vereinfacht ist. Der Artikel soll die Idee verdeutlichen wie man einen Ajax Lade-Button erstellen kann, der beliebige Inhalte asynchron nachladen kann — egal für welchen Artikeltyp und ohne extra Plugin.

Bitte schreibt einen Kommentar falls noch Fragen offen sind oder eine konkrete Implementierung gewünscht ist.

Schlagwörter: , , ,

Ähnliche Artikel

Abonnieren Sie den RSS-Feed meines Blogs oder verfolgen Sie die Kommentare dieses Artikels.

2 Kommentare

  1. Mike sagt:

    Funktioniert nicht. In deinem eigenem Blog übrigens auch nicht, da werden keine Artikel nachgeladen, wenn ich auf „Mehr“ klicke.


Schreib einen Kommentar