Kommentare zitieren

Ich habe mal wieder eine kleine Bastelei ins Blog eingebaut: eine Möglichkeit, einen ganzen Kommentar als Zitat ins Eingabefeld zu übernehmen. Dazu findet sich jetzt in der Kopfzeile jedes Kommentars am Ende ein entsprechender Link, der diesen als HTML samt umschließendem <blockquote> und darüber einer Zeile „Zitat von …“ samt Link zum Kommentar an die bisherige Eingabe anhängt – und nicht etwa beim Cursor einfügt; dies würde natürlich auch gehen (mach ich bei den Smilies ja schon), aber ich denke, bei so langen Einfügungen ist das Anhängen besser.

Das Script

Das ganze benötigt zum einen ein kleines Script (was auch bedeutet, dass Javascript aktiviert sein muss), das man entweder in eine externe Javascript-Datei einfügt oder einfach inline in die comments.php des Themes, am besten ziemlich direkt nach der Zeile

<?php if ( have_comments() ) : ?>

vor der Ausgabe der Kommentare.

Und das ist das Script, das jQuery benötigt – wird in vielen Fällen ja eh schon geladen:

<script type="text/javascript">

<!--

    function quotecomment (cID) {

        p = jQuery('#edit-comment'+cID);

        if ((!p) || (p.length==0)) p = jQuery('#comment-text-'+cID);

        t = p.html();

        t = t.replace(/<img [^>]*alt=[" ]*([^ "]*)[" ]*[^>]*>/ig,' $1 ');

        jQuery('#comment').val(jQuery('#comment').val() + '\n' +

            'Zitat von <a href="#comment-'+cID+'">'+

            jQuery('#comment-author-'+cID).text()+

            '</a>:\n<blockquote>'+t+'</blockquote>\n\n');

    }

//-->

</script>

In der Funktion (zu deren Aufruf wir gleich noch kommen) wird zunächst das Element mit der ID edit-commentXXX gesucht (mit XXX=Kommentarnummer), das den Kommentartext enthält, wenn das Plugin Ajax Edit Comments aktiv ist und dieser Kommentar bearbeitet werden kann; gibt’s das nicht, ist comment-text-XXX gefragt – das ist eine der kleinen Theme-Anpassungen, die ihr werdet vornehmen müssen – auch dazu gleich mehr.

Von diesem Element wird dann der HTML-Inhalt genommen – so bleiben die ganzen Formatierungen erhalten, auch wenn es mehr Tags enthält (etwa <p>), als original eingegeben wurde. Gut, alternativ hätte ich den Originalinhalt via Ajax nachladen können wie dieses Plugin (oder gleich das Plugin verwenden) oder ihn nochmal direkt in den Funktionsaufruf im Seitenquelltext schreiben, aber dies ist irgendwie die sparsamste Lösung…

Da in diesem HTML-Inhalt auch Bilder – selbst die Smilies – als img-Tags drin sind, müssen sie mit dem regulären Ausdruck im replace wieder in die Smilie-Codes (die in den alt-Attributen stehen) umgewandelt werden – Bilder dürft ihr ja nicht direkt in euren Kommentaren verwenden, das darf nur ich. (Und natürlich muss dieser Ausdruck komplizierter sein, weil der Internet-Explorer wieder ein eigenes Süppchen kocht und etwa die Anführungszeichen bei den Attributen weglässt.)

(Benutzer einer Live-Vorschau, die bei <br> einen Zeilenumbruch zu viel einfügte, sollten die Zeile ergänzen, die ixiter unten im Kommentar nennt.)

Und schließlich wird in dem langen jQuery-Aufruf der Text/Code dann an den Inhalt des Eingabefeldes – das wie üblich die ID "comment" haben muss, ansonsten müsst ihr’s ändern – angehängt.

Änderungen in der Kommentarausgabe

In der Kommentarausgabe des Themes müssen, wie oben schon erwähnt, zum einen die Namen der Elemente mit ausgegeben werden, zum anderen der Link mit dem Aufruf der obigen Funktion. Das wird natürlich von eurem Theme abhängen, aber wer etwas Erfahrung mit solchen Basteleien hat, wird die passenden Stellen schon finden und geeignet ändern können.

Da wäre zum ersten der Name des Kommentators, der die entsprechende ID braucht – und zwar möglichst nur der Name und nichts drumrum. Man nimmt am besten einen eigenen span direkt um den Aufruf der WordPress-Funktion comment_author_link() (oder wie auch immer bei euch der Name mit Link ausgegeben wird); bei mir sieht da sowieso ein strong zur Fettschrift, deswegen hab ich das gleich verwendet:

<strong id="comment-author-<?php comment_ID(); ?>">

<?php comment_author_link() ?></strong>

Das muss, wie man sieht, im HTML-Kontext stehen (also außerhalb des <?php ... ?>-Bereichs). Dann brauchen wir den „zitieren“-Link an der gewünschten Stelle – und in dieser Form muss es innerhalb von <?php ... ?> stehen:

if ($comment->comment_type=="") {

    echo ' <span class="quotecomment">';

    echo '<a href="#commentform" onclick="quotecomment('.get_comment_ID().');" '.

        'title="den Inhalt dieses Kommentars ans Ende des Eingabefelds anh&auml;ngen (als HTML)">'.

        'zitieren <img src="/pics/quote.png" width="17" height="16" alt="" /></a>';

    echo '</span>';

}

Wer nicht will, dass beim Klick auch die Fensterposition wieder zum Eingabefeld scrollt, ersetze das href="#commentform" onclick="quotecomment… durch href="javascript:quotecomment… Wer das Bildchen nicht will, muss das entspr. img-Tag weglassen; ansonsten dürft ihr euch gerne mein Bildchen kopieren1.

Zu guter Letzt muss noch der eigentliche Kommentarinhalt seine ID erhalten, wozu wir den comment_text()-Aufruf in einen div packen, wenn noch kein geeigneter vorhanden ist (ansonsten den einfach entsprechend benennen oder, wenn der in eurem Theme schon eine ID hat, im Script oben anpassen):

echo '<div id="comment-text-'.get_comment_ID().'">';

comment_text();

echo '</div>';

So, das war’s dann eigentlich, ich hoffe, ich habe nichts vergessen. Wenn ihr noch Fragen habt, nur raus damit…

Ausblick

Als weitere Idee wäre noch das Zitieren beliebiger Textabschnitte aus einem Kommentar oder dem Beitrag durch Markieren des Textes, wie es etwa hier bei Frank Bültge vorgestellt wurde. Aber das muss auf einen späteren Zeitpunkt warten…

---

Foto: Alexandr Zinchevici – Fotolia.com

1. bitte auf euren Webspace kopieren und nicht etwa hotlinken [↩]