Live Kommentarvorschau mit jQuery und WordPress

Kommentarautoren bewerten eine Vorschau des getippten Kommentars als Mehrwert und es gibt die unterschiedlichsten Lösungen um die Vorschau in das Blog zu integrieren. Die wohl bekannteste ist das Plugin Live Comment Preview. Mit diesem Plugin fällt die Implementierung recht leicht.

Nicht immer ist der leichteste Weg aber der Beste, wobei die folgende Lösung nicht unbedingt als die Beste angesehen werden soll, aber für mich und das Theme, bei dem ich die Vorschau einsetze, ist es die beste Lösung. Dies liegt vor allem daran, dass ich schon einige Funktionen in das Theme integriert habe, die auf Basis jQuery – eine populäre JavaScript-Library – basieren. Somit ist die Entscheidung leicht gefallen, denn das Framework wurde eh schon geladen und stand so zur Verfügung.

Damit erklärt sich auch schon die Grundfunktion – die im folgenden vorgestellte Lösung wird mit jQuery realisiert. Der Code entspricht dem wunderbaren Blog zum Thema jQuery – „Learning jQuery“.

Damit wir auf das Framework zugreifen können, muss es natürlich eingebunden werden. Dazu hinterlegen wir einen Link zur Library im Theme. Hierbei gilt es zu beachten, dass die Library entweder aus dem Standard von WordPress geladen wird oder im Theme als Datei hinterlegt wurde. Zu jeder Anwendung jeweils ein Beispiel.

Außerdem gilt es zu prüfen, dass nicht eventuell andere Plugins auch eine eigene Library mitbringen. Es kann zu Problemen zwischen den verschiedenen Librarys kommen! Ebenso sollte man nicht die gleiche Library mehrfach laden, eventuell auch verschiedene Versionen. Also hier gilt, prüfen.

Im weiteren empfehle ich, dass das Framework, auch wenn jQuery wesentlich kleiner ist als andere Librarys, nur dann geladen wird, wenn es explizit auch benötigt wird. Realisieren kann man dies recht einfach mit Hilfe der Conditional Tags unter WordPress.

Einbinden werde ich den Code in die footer.php, so dass die Library erst dann geladen wird, wenn der User sein „wichtigen“ Daten bekommen hat, den Inhalt der Seite.

Einbinden des Framework aus dem Theme-Ordner

<?php if (is_single() || is_page()) { ?>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.js" type="text/javascript" charset="<?php bloginfo('charset'); ?>" ></script>
<?php } ?>

Einbinden aus den Standard-WordPress-Installation

<?php wp_enqueue_script('jquery');?>

Diese Variante kommt mit wenig Syntax aus, denn WordPress bietet eine eigene Funktion zum einbinden der Librarys. Es gibt noch weitere Möglichkeiten, doch diese sollen in diesem Artikel nicht das Thema sein. Einige Möglichkeiten findet man in der Datei wp-includes/script-loader.php, Klasse WP_Scripts.

Einbau der Kommentar-Vorschau

Hat man die Library eingebunden, dann steht die Basis und wir können das Kommentar-Template bearbeiten und die Vorschau integrieren.

Textfeld ansprechen

Dazu müssen wir die Daten aus dem Textfeld (textarea) bekommen, dieses erkennt jQuery anhand der ID comment.

Das Formular zum Hinterlassen von Kommentaren ist in jedem Theme anders hinterlegt, die Grundstruktur sollte aber ähnlich sein, deshalb im folgendem Code-Abschnitt ein Beispiel. Entscheidend ist das ID des Textfeldes. Das JavaScript für die Live-Vorschau muss dementsprechend angepasst werden.

<form id="commentform" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" >
	<p>
		<label for="author">Name <?php if ($req) echo "<small>ist Pflichtfeld</small>"; ?></label>
		<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="50" tabindex="1" />
	</p>
	<p>
		<label for="email">eMail (bleibt versteckt) <?php if ($req) echo "<small>ist Pflichtfeld</small>"; ?></label>
		<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="50" tabindex="2" />
	</p>
	<p>
		<label for="url">Website</label>
		<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="50" tabindex="3" />
	</p>
	<p>
		<label for="comment">Dein Kommentar</label>
		<textarea name="comment" id="comment" cols="70" rows="5" tabindex="4"></textarea>
	</p>
	<?php do_action('comment_form', $post->ID); ?>
	<p>
		<input name="submit" type="submit" id="submit" tabindex="6" value="Kommentar absenden" />
		<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
	</p>
</form>

Ausgabe erzeugen

Als nächstes binden wir den JavaScript-Code ein um die Vorschau des Kommentars zu realisieren. Dazu erzeuge ich einen div mit Hilfe jQuery.

$('#comment').one('focus', function() {
$('#comment').parent().after('<h4 class="live_preview_h">Live Kommentar Vorschau</h4><ol class="commentlist_preview"><li id="live_preview_li"><div class="commenttext" id="live-preview"></div></li></ol>');
});

Auch das ist nur ein Beispiel, wie ich es umgesetzt habe. Der Syntax für die Ausgabe nach dem Kommentarfeld ($('#comment').parent().after) sollte entsprechend deinem Kommentar gleichen. So sieht die Vorschau annähernd dem endgültigem Design ähnlich.

Damit die Vorschau auch nur dann erzeugt wird, wenn ein Kommentar eingegeben wird, also wenn das Textfeld aktiv genutzt wird, fragen wir dieses auch anhand der ID ab ($('#comment').one('focus').

Für die Ausgabe der Vorschau vergebe ich das ID live-preview, dieses benötigen wir im kommenden Schritt.

Ausgabe formatieren

Prinzipiell kann damit die Ausgabe schon eingebaut werden, wenn wir die Ausgabe aktivieren. Allerdings gibt es ein Problem, wenn der Kommentarautor Enter betätigt. Deshalb fragen wir auch dies ab und passen ($comment.replace) die Ausgabe mit einem Break (<br />) an.

var $comment = '';
$('#comment').keyup(function() {
	$comment = $(this).val();
	$comment = $comment.replace(/\n/g, "<br />").replace(/\n\n+/g, '<br /><br />').replace(/(&lt;\/?)script/g,"$1noscript");
	$('#live-preview').html( $comment );
});

Der komplette JS-Code

Damit sieht der komplette Code für die Vorschau des Kommentars wie folgt aus.

jQuery(document).ready(function() {
	/* Comment preview */
	$('#comment').one('focus', function() {
		$('#comment').parent().after('<h4 class="live_preview_h">Live Kommentar Vorschau</h4><ol class="commentlist_preview"><li id="live_preview_li"><div class="commenttext" id="live-preview"></div></li></ol>');
	});
	var $comment = '';
	$('#comment').keyup(function() {
		$comment = $(this).val();
		$comment = $comment.replace(/\n/g, "<br />").replace(/\n\n+/g, '<br /><br />').replace(/(&lt;\/?)script/g,"$1noscript");
		$('#live-preview').html( $comment );
	});
});

Einbinden des Code

Diesen kann man nun in eine eigene Datei auslagern und ähnlich dem Einbinden der jQuery-Bibliothek im obigen Abschnitt einbinden oder direkt im Code des PHP-Templates hinterlegen. Auch dazu wieder je ein Beispiel.

Die folgende Lösung wird nur dann geladen, wenn es sich im einen einzelnen Beitrag (is_single()) oder (||) eine statische Seite (is_page()) in WordPress handelt. Die Abfrage erfolgt mittels Conditional Tags, dazu habe ich hier im Blog schon eine ganze Reihe an Artikeln hinterlegt, nur für die, die mehr zum Thema wissen wollen.

<?php if (is_single() || is_page()) { ?>
<script src="<?php bloginfo('template_url'); ?>/js/comment_preview.js" type="text/javascript" charset="<?php bloginfo('charset'); ?>" ></script>
<?php } ?>

Alternativ auch die zweite Methode, das einbinden direkt in das Template. Dazu muss der JavaScript-Code in den script-Tag eingebettet werden. Als Empfehlung wieder die footer.php, wenn der Code des JS erst geladen werden soll, wenn die Inhalte der Seite vorhanden sind und damit die wichtigen Elemente für den Leser im Browser sind.

<script type="text/javascript">
<!--
	jQuery(document).ready(function() {
		. . .
	});
-->
</script>

Auch diesen Code kann man natürlich wieder mit Hilfe der Conditional Tags in das Template einbetten und so die Ladequalität steigern.

Dann kann ich nur noch viel Spaß beim Umsetzen wünschen! Ich hoffe, es ist anschaulich erklärt und ich wünsche mir auch für diesen Beitrag wie immer, Feedback und Verbesserungsvorschläge. Vielleicht hat ja einer der JavaScript-Cracks einen Tipp für die einfache Integration des Autorennamens und Links o.ä.?

Weiterführende Links

• jQuery API Browser
• Visual jQuery Documentation
• Really Simple Live Comment Preview