Kommentare zitieren

Pink Butterfly Little Girl With Colorful Message Clouds. Isolate 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. :mrgreen: (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 []

9 Kommentare
2 Trackbacks

  1. c

    So, und hier ist ein Kommentar, den ihr gleich mal testweise zitieren könnt. :mrgreen:

  2. Y

    Zitat von cimddwc:

    So, und hier ist ein Kommentar, den ihr gleich mal testweise zitieren könnt. :mrgreen:

    praktisch ^^

  3. M

    Schau mal zu http://bueltge.de und markiere im Kommentarbereich irgendwas an Text, egal ob Beitrag oder anderer Kommentar.

  4. i

    Schöne Idee. Danke für die Mühen
    Ich hatte mir mal das @ Reply Plugin dahingehend erweitert. Leider habe ich mir dann dummerweise das Update gezogen und vorbei wars mit der Zitatfunktion.
    Ohne Plugin ist aber schon schöner. Ich weiß nur nicht, ob ich das so in meinem Theme untergebracht bekomme. Da ist einiges schon erweitert und deine genannten Einspringpunkte sind so nicht zu finden. Aber OK, das macht die Sache ja auch nur komplizierter .. sollte also kein Hindernis sein. :)

  5. i

    So, habs jetzt auch bei mir umgesetzt.
    Du solltest noch die <br> rausfiltern, sonst erzeugt es bei manchen in der Vorschau immer 2 Zeilenümbrüche.

    t = t.replace(/<br>/g,'');

    Schade dass man dein schnuckeliges <pre class=“javascript“> Tag nicht im Kommentar verwenden kann.

    • c

      Zitat von ixiter:

      Du solltest noch die <br> rausfiltern, sonst erzeugt es bei manchen in der Vorschau immer 2 Zeilenümbrüche.

      Mal schauen, danke für den Hinweis. Was (welche Browser) meinst du mit „manchen“? :)

      Schade dass man dein schnuckeliges <pre class=“javascript“> Tag nicht im Kommentar verwenden kann.

      Tja, die Klasse könnte der Quick Highlighter eigentlich auch weglassen, wenn die Styles direkt im HTML sind (wobei ich aus dessen div ein pre gemacht habe, der Ordnung halber)…

      • i

        Ich meine keine Browser, ich meine manche Themes oder was auch immer. Ich habe bei mir eine Live Vorschau. Da passiert es, dass dort 2 Zeilenumbrüche erzeugt werden. Nach dem Absenden ist alles schön, da WP anscheinend aus <br> gefolgt von \n nur einen Zeilenumbruch erzeugt

        • c

          Ach so. Nun gut, das betrifft mich nicht, aber ich hab den Hinweis oben ergänzt.

          Ich finde ich diese Live-Vorschau eh etwas, nun ja, suboptimal – wenn sie über dem Eingabefeld ist, verschiebt sich dieses ständig (aber wenn sie darunter ist, wird sie oft nicht beachtet), und Smilies zeigt sie auch nicht als Grafiken an…

Schreibe einen Kommentar an cimddwc

Alle Angaben sind freiwillig. Die E-Mail-Adresse wird nicht veröffentlicht oder weitergegeben.

  • Moderation: Wer zum ersten Mal kommentiert, dessen Kommentar muss manuell von mir freigeschaltet werden.
  • Benimm dich! Keine Beleidigungen, keine rechtswidrigen Inhalte u.s.w.! Sollte eigentlich selbst­verständlich sein, oder...?
  • Webseite: Nichts gegen Blogs mit Werbung, aber rein kommerzielle Links sind unerwünscht und werden gelöscht. Reine Spam-Kommentare natürlich auch.
  • Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <sub> <sup> <big> <small> <u>