Icon für RSS-Feed Link zum XING-Profil
Wählen Sie eine Hintergrundfarbe:
Schwarzer Hintergrund Blauer Hintergrund Hellblauer Hintergrund Rose Hintergrund Grüner Hintergrund Grüner Hintergrund Olivfarbener Hintergrund Gelber Hintergrund Sandfarbiger Hintergrund Beiger Hintergrund Weisser Hintergrund
Texthintergrund:
Schwarzer Hintergrund Weisser Hintergrund Transparenter Hintergrund


Ladebild
Brick in the Wall

WordPress Kommentare mit Smileys

Von Matu am 23. Juni, 2009 (21:59 Uhr) unter Kategorie: Javascript, WordPress

Auf vielen WordPress-Blocks befindet sich im Kommentarbereich eine Zeile mit Smileys.

Icon Wink in WordPress Kommentare mit SmileysIcon Neutral in WordPress Kommentare mit SmileysIcon Mad in WordPress Kommentare mit Smileys

Durch Anklicken können diese Smileys dann schnell und einfach in einen Kommentar eingebunden werden. So etwas wollte ich meinen Besuchern natürlich auch bieten und habe für Euch etwas recherchiert. Folgender Javascript-Block, den ich noch XHTML-Strict validiert habe, muss in Eurer comments.php unter (oder über) der <textarea></textarea> eingefügt werden.

<div class="smileys">
  <script type="text/javascript">
  /*<![CDATA[*/
    function SJB_appendSmiley(text) {
        var comment=document.getElementById('comment');
        comment.value=comment.value+' '+text;
    }

document.write('<a href="javascript:SJB_appendSmiley(\':wink:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_wink.gif" alt=":wink:" class="wp-smiley" title=":wink:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':-|\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_neutral.gif" alt=":-|" class="wp-smiley" title=":-|" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':-x\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_mad.gif" alt=":-x" class="wp-smiley" title=":-x" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':twisted:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_twisted.gif" alt=":twisted:" class="wp-smiley" title=":twisted:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':)\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley" title=":)" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\'8-O\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_eek.gif" alt="8-O" class="wp-smiley" title="8-O" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':(\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley" title=":(" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':roll:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_rolleyes.gif" alt=":roll:" class="wp-smiley" title=":roll:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':-P\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_razz.gif" alt=":-P" class="wp-smiley" title=":-P" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':oops:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_redface.gif" alt=":oops:" class="wp-smiley" title=":oops:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':-o\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_surprised.gif" alt=":-o" class="wp-smiley" title=":-o" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':mrgreen:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_mrgreen.gif" alt=":mrgreen:" class="wp-smiley" title=":mrgreen:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':lol:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_lol.gif" alt=":lol:" class="wp-smiley" title=":lol:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':idea:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_idea.gif" alt=":idea:" class="wp-smiley" title=":idea:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':-D\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_biggrin.gif" alt=":-D" class="wp-smiley" title=":-D" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':evil:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_evil.gif" alt=":evil:" class="wp-smiley" title=":evil:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':cry:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_cry.gif" alt=":cry:" class="wp-smiley" title=":cry:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\'8)\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_cool.gif" alt="8)" class="wp-smiley" title="8)" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':arrow:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_arrow.gif" alt=":arrow:" class="wp-smiley" title=":arrow:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':-?\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_confused.gif" alt=":-?" class="wp-smiley" title=":-?" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':?:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_question.gif" alt=":?:" class="wp-smiley" title=":?:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':!:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_exclaim.gif" alt=":!:" class="wp-smiley" title=":!:" />');
document.write('</a> ');
/*]]>*/
</script>

<noscript><p>Wenn du Javascript aktiviert hättest, würden hier klickbare Smileys stehen <br /> You could see clickable smiley faces here if you had JavaScript activated.</p></noscript></div>

Über das div mit der Klassenbezeichnung (class=”smileys”) könnt Ihr die Zeile in Eurem Stylesheet positionieren (falls gewünscht).

Der Pfad zu jedem einzelnen Smiley-Bild muss noch durch Eure eigene Domain ersetzt werden.

document.write('<img src="http://deine_domain/wp-includes/images/smilies/icon_exclaim.gif" alt=":!:" class="wp-smiley" title=":!:" />');

Wenn Ihr das nicht händig machen wollt, empfiehlt sich die Bearbeitung in einem Editor. Notepad++ bietet für solche Vorgänge unter Suche (STR+F) die Option Ersetzen.
Damit lassen sich auch in größeren Scripten einzelne Zeichen schnell und problemlos durch andere austauschen.

In allen Zeilen des beginnenen a-Tags müssen zudem die Hochkommata escaped werden.

document.write('<a href="javascript:SJB_appendSmiley(\' ... \')">');

Die Smileys (wie auch am Pfad erkennbar) befinden sich in dem Ordner …/wp-includes/images/smilies/…, der direkt im Root-Verzeichnis (1. Ebene) Eurer WordPress-Installation liegt. Werft dort einfach mal einen Blick hinein.
Den dort könnt Ihr auch weitere bzw. andere Smilies einfügen. Dazu einfach etwas im Netz stöbern. Eventuell kreiert jemand ja auch einen Satz eigener Smileys und stellt diese dann anderen zur Verfügung.

Sobald Ihr dort eigene Smileys hinzugefügt habt, müssen diese dem WordPress-System noch “bekannt” gemacht werden:

  • Öffnet dazu bitte ebenfalls im wp-includes-Ordner die functions.php
  • Drückt dort die Tastenkombination “STRG+F”, so dass sich das “Suchen”-Fenster öffnet und gebt dort $wpsmiliestrans = array ein
  • Dadurch gelangt Ihr zu einem Array, in dem allen einzelnen Smiley-Images (aus dem zuvor angesprochenen smilie-Ordner) ein individueller Text zugeordnet wird.

    Smiley Array in WordPress Kommentare mit Smileys

  • Der gleiche Text wird beim Anklicken eines Smileys an die Funktion SJB_appendSmiley übergeben und in den Kommentarbereich eingefügt.

    document.write('<a href="javascript:SJB_appendSmiley(\':-|\')">');
    
  • Wordpress tauscht diesen Text dann durch das jeweilige im $wpsmiliestrans-Array zugewiesene Smiley aus
  • Für jeden Eurer eigenen Smileys, die Ihr zuvor im smilie-Odner abgespeichert habt, legt Ihr hier nun nach dem gleichen Schema eine eigene Zeile an:

    ...
     ':neuer_smiley:' => 'neuer_smiley.gif',
    ':neuer_smiley2:' => 'neuer_smiley2.gif',
    ':neuer_smiley3:' => 'neuer_smiley3.gif',
    ...
    
  • Der Javascript-Block in der comments.php muss natürlich um jedes neu hinzugefügte Smiley erweitert werden:

    document.write('<a href="javascript:SJB_appendSmiley(\':neuer_smiley:\')">');
    document.write('<img src="http://eure_domain/wp-includes/images/smilies/neuer_smilie.gif" alt=":-x" class="wp-smiley" title=":neuer_smilie:" />');
    document.write('</a> ');
    

Jetzt sollte klar geworden sein, wie es funktioniert.

Mich persönlich sprechen diese ‘manto-smileys’ besonders an, die nur noch mit GIMP (oder Photoshop) auf eine akzeptable Größe reduziert werden müßten.
Als ich diese das erste mal gesehen habe, dachte ich nur:”Wie geil ist das denn!”. Allerdings sagt die Seite nichts über die Lizenzbestimmungen des chinesischen Designers aus …!

1 Star2 Stars3 Stars4 Stars5 Stars (6 votes, average: 5,00 out of 5)
Loading ... Loading ...

9 Antworten zu “WordPress Kommentare mit Smileys”

  1. WasserRatte von Jimdo sagt:

    Das ist cool ich hab es mal auf Jimdo probiert aber ehe ich weiter probiere will ich wissen ob das nur bei workexpress geth oder auch bei Jimdo? :?: :?: :?:
    PS: Jimdo übersetzt kein php

  2. Matu sagt:

    Hallo WasserRatte,

    Jimdo war mir bis dato unbekannt.
    Habe die Webseite dieses Online-Service gerade mal gesichtet und kann Dir sagen, dass die hier vorgestellte Anleitung dort nicht funktionieren wird … da Du keinen Zugriff auf irgendeinen Bereich im Backend hast und das System anders aufgebaut ist. Das Jimdo-System richtet sich an Nutzer ohne PC-Kenntnisse und spielt sich rein in einer Art WYSIWYG-Editor ab (What You See Is What You Get) und erlaubt lediglich das Hinzufügen bzw. den Einbau von vorgefertigten Modulen … ich würde dazu “Klicki-Klicki”-Webseite sagen.
    Für unerfahrene Nutzer sicherlich eine einfache Art, sich im Internet zu präsentieren. Willst Du aber mehr, d.h. ansprechenderes Design, mehr Zusatzfunktionen, eigene Anpassungen oder die hier vorgestellte Anleitung für Smileys umsetzen, dann kommst Du um ein sogenanntes CMS (Content Management System) nicht herum.
    (Unter vielen anderen bietet Dir z.B. WordPress einen leichten Einstieg. Die Installation ist auch für unerfahrene Nutzer leicht zu bewältigen, dazu gibt es unzählige freie Layouts und Plugins/ Erweiterungen. Mit etwas Interesse und Lernbereitschaft kannst Du Dir so nach kurzer Zeit eine Webseite erstellen, bei der Du auch selber “Hand anlegen” kannst.)
    Alleine das Jimdo in der Grundversion kostenfrei ist empfinde ich positiv … sicherlich gesponsert durch Werbung.
    Solltest Du die kostenpflichtige Version (5 Euro/ Monat) gewählt haben, dann würde ich lieber eigenen Webspace anmieten und wie schon erwähnt auf WordPress setzen. Dies erfordert zwar etwas Einarbeitung, aber andere haben es auch geschafft und Du hast mehr Möglichkeiten, Dir eine eigene individuelle Webseite zu erstellen.

    Jimdo übersetzt kein php

    Auch Jimdo übersetzt oder besser gesagt arbeitet im Hintergrund mit PHP … nur wirst Du da keinen Zugriff drauf haben.
    Im Forum von Jimdo kann man Dir sicherlich auch noch etwas mehr sagen.
    Ich hoffe, ich konnte Dir helfen :wink: !

    Gruß Matu

  3. Jatnika sagt:

    Hi, I can’t understand how to add your site in my rss reader. Can you Help me, please :)

    rH3uYcBX

  4. Matu sagt:

    Hello Jatnika,

    öhm … push the RSS-Feed-Button at the top of my side … then a new side opens where you can store the RSS feed … :thumbsup:

    Greets Matu

  5. Diros sagt:

    Gute Beschreibung

  6. Quick Facts sagt:

    You you could edit the blog subject Wordpress Kommentare mit Smileys – Matu´s Blog – Webprogrammierung und jede Menge Tipps & Tricks to more suited for your webpage you write. I enjoyed the post even sononetheless.

  7. frankzio sagt:

    “wp-includes/images/smilies”

    Hey, matu! Wie komme ich an diesen Ordner?
    Ich bin Anfänger, der zufällig auf wordpress gestossen ist
    und erstelle die Beiträge mit LIVE Writer.
    Heute bin ich im Codex auf die 22 Standardemoticons gestossen
    und weiss also welchen Text ich eingeben muss ;-)
    Aber dein cooler blauer würde mich schon interessen.
    Muss ich dafür CSS erlernen?

  8. Aber erzählen will, dass dies sehr hilfreich ist, vielen Dank für deine Zeit, dies zu schreiben.

  9. Magda sagt:

    Hey, funktioniert das jetzt mittlerweile immernoch?
    bei mir jedenfalls leider nicht :?:

Deine Meinung ist mir wichtig!

Es besteht die Möglichkeit, Kommentare nachträglich innerhalb einer Zeitspanne von 5 Minuten zu ändern (Keine werblichen Kommentare)
Jeder 1. Kommentar muss freigeschaltet werden!

Smileys:spy:

Nach oben