Nun, dies ist mit einem kleinen Eingriff in die functions.php möglich. Dort muss man „lediglich“ etwas Code einschleusen. Aber eins nach dem andern.

Vorbereitung

Zunächst sollte man sich ein passendes Smilie-Set suchen, in dem alle Smilies vorhanden sind, die WordPress unterstützt. Welche das sind, na werft doch einfach mal einen Blick in das Verzeichnis /wp-includes/images/smilies eures Blogs.

Sind nun alle Smilies beisammen, so erweitert man das eigene Theme um das Verzeichnis images/smilies/ und kopiert die Smilies genau dort hinein.

Das war es schon mit den Vorbereitungen, nun geht es an die Eingeweide des Themes.

Funktion hinzufügen

Hier wird nun die functions.php des Themes bearbeitet. In diese Datei werden einige Funktionen eingefügt, welche unter anderem die eigenen Smilies definieren und ausgeben. Wahlweise im Artikel und/oder in den Kommentaren. Natürlich sollte man auch dafür Sorge tragen, dass die wordpresseigene Funktion deaktiviert wird.

Als erstes wird eine Funktion benötigt, welcher die URI zu den Smilies zurückgibt. Dies ist wichtig, damit die Dinger auch angezeigt werden können.

1
2
3
4
5
if(!function_exists('get_my_smilies_uri')) {
    function get_my_smilies_uri() {
        return get_template_directory_uri() . '/images/smilies/';
    }
}

In dieser Funktion wird der Pfad zu den Smilies angegeben. Der Aufruf von get_template_directory_uri() ersetzt dabei den Pfad zum aktuell verwendeten Theme, so dass dieser nicht von Hand eingetragen werden muss. Dahinter setzt ihr dann einfach das Verzeichnis der Smilies in eurem Theme. Wichtig dabei, achtet am Anfang und Ende auf den Slash ( / ).

Im nächsten Schritt werden die Smilies definiert. Hier kann jeder festlegen, welches Smilie durch welches Icon ersetzt werden soll.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
if(!function_exists('my_smilies')) {
    function my_smilies() {
        $array_Smilies = array(
            ':)'            => 'icon_smile.gif',
            ':-)'           => 'icon_smile.gif',
            ':smile:'       => 'icon_smile.gif',
            ':D'            => 'icon_biggrin.gif',
            ':-D'           => 'icon_biggrin.gif',
            ':grin:'        => 'icon_biggrin.gif',
            ':('            => 'icon_sad.gif',
            ':-('           => 'icon_sad.gif',
            ':sad:'         => 'icon_sad.gif',
            '8)'            => 'icon_cool.gif',
            '8-)'           => 'icon_cool.gif',
            ':cool:'        => 'icon_cool.gif',
            ':x'            => 'icon_mad.gif',
            ':-x'           => 'icon_mad.gif',
            ':mad:'         => 'icon_mad.gif',
            ':P'            => 'icon_razz.gif',
            ':-P'           => 'icon_razz.gif',
            ':razz:'        => 'icon_razz.gif',
            ':|'            => 'icon_neutral.gif',
            ':-|'           => 'icon_neutral.gif',
            ':neutral:'     => 'icon_neutral.gif',
            ';)'            => 'icon_wink.gif',
            ';-)'           => 'icon_wink.gif',
            ':wink:'        => 'icon_wink.gif',
            ':lol:'         => 'icon_lol.gif',
            ':oops:'        => 'icon_redface.gif',
            ':cry:'         => 'icon_cry.gif',
            ':evil:'        => 'icon_evil.gif',
            ':twisted:'     => 'icon_twisted.gif',
            ':roll:'        => 'icon_rolleyes.gif',
            ':!:'           => 'icon_exclaim.gif',
            ':idea:'        => 'icon_idea.gif',
            ':arrow:'       => 'icon_arrow.gif',
            ':?:'           => 'icon_question.gif',
            ':o'            => 'icon_surprised.gif',
            ':-o'           => 'icon_surprised.gif',
            ':eek:'         => 'icon_surprised.gif',
            ':???:'         => 'icon_confused.gif',
            ':-?'           => 'icon_confused.gif',
            ':?'            => 'icon_confused.gif',
            '8O'            => 'icon_eek.gif',
            '8-O'           => 'icon_eek.gif',
            ':shock:'       => 'icon_eek.gif',
            ':mrgreen:'     => 'icon_mrgreen.gif'
        );
   
        return $array_Smilies;
    }
}

Damit wäre schon ein Großteil geschafft. Die Smilies sind definiert, und somit geht es nun an daran, diese aus dem Text auch heraus zu filtern und durch die Icons zu ersetzen. Dafür habe ich zwei Funktionen vorgesehen. Eine für den Artikel selbst und eine für die Kommentare. So ergibt sich die Möglichkeit zu steuern, wo die Smilies angezeigt werden sollen und so nicht.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
if(!function_exists('my_smilies_content')) {
    function my_smilies_content($var_sContent) {
        $array_Smilies = my_smilies();

        foreach($array_Smilies as $key => $value) {
            $var_sContent  = str_replace($key, '<img src="' . get_my_smilies_uri() . $value . '" />', $var_sContent);
        }

        return $var_sContent;
    }
}

if(!function_exists('my_smilies_comments')) {
    function my_smilies_comments($var_sComment) {
        $array_Smilies = my_smilies();

        foreach($array_Smilies as $key => $value) {
            $var_sComment  = str_replace($key, '<img src="' . get_my_smilies_uri() . $value . '" />', $var_sComment);
        }

        return $var_sComment;
    }
}

Nun muss man natürlich auch WordPress selbst noch davon überzeugen, die neuen Smilies zu verwenden und nicht irgendwas anderes. Um dies zu erreichen werden Filter zu WordPress hinzugefügt. Hier erschließt sich dann auch der Grund, warum ich die Ausgabe von Artikel und Kommentar getrennt habe, denn es sind zwei Filter, siehe Zeile fünf und sechs. In dieser Funktion wird auch gleich dafür gesorgt, das die WordPress-Smilies nicht verwendet werden, siehe Zeile drei.

1
2
3
4
5
6
7
8
if(!function_exists('my_smilies_filters')) {
    function my_smilies_filters() {
        update_option('use_smilies', 0);                    // WordPress-Smilies abschalten

        add_filter('the_content', 'my_smilies_content');    // Smilies im Artikel
        add_filter('comment_text', 'my_smilies_comments');  // Smilies in den Kommentaren
    }
}

Bisher passiert noch gar nichts, denn die Funktion mit den Filtern muss noch aufgerufen werden.

1
2
3
if(function_exists('my_smilies_filters')) {
    my_smilies_filters();
}

Mit diesem Funktionsaufruf werden die Filter scharf geschallten und zu WordPress hinzugefügt.

Abgesang

Ich muss dazu sagen, ich bin kein Freund von grafischen Smilies. Dies liegt wohl daran, dass ich bisher einfach noch kein wirklich schönes Smilie-Set gesehen habe. Die meisten waren mir einfach zu grell und zu bunt und viel zu blinkend. Also empfand ich die dann eher als störend beim Lesen.

Ich habe meine Meinung etwas revidiert, denn Ralf hat auf einen Blog ein eigenes Smilie-Set veröffentlicht und zum freien Download bereitgestellt. Diese sind sehr dezent, nicht bunt, nicht blinkend, einfach schön und ich verwende es auch hier in meinem Blog :-)

Also, viel Spaß damit !!

Artikel / Seite weiterempfehlen

31 Meinungen zu “WordPress: Eigene Smilies (updatesicher) nutzen

  1. Das funktioniert so leider bei mir nicht, es kommt folgende Fehlermeldung auf meiner Startseite:

    Fatal error: Call to undefined function ppfeufer_get_smilies_array() in /var/www/user/lehrling/html/wp-content/themes/mein-theme/functions.php on line 114

    Bitte um Hilfe. – Danke im voraus!

  2. Vielen Dank für Ihre Korrektur!

    Die Smilies funktionieren soweit gut, jedoch habe ich noch ein Problem. Ich benutze Bookmarks und eins davon gibt die Möglichkeit eine Empfehlung per E-Mail zu versenden. Jetzt beist sich der Filter aber damit, da im Code „mailto:?subject=“ angegeben ist. Dadurch wird das Bookmark zerstört, da ein Smilie mit :? darauf gelegt ist.

    Kann man das beheben ohne den Smilie ändern zu müssen? – Weil vorher ging der Bookmark auch so…

    Würde mich sehr über ein letztes mal Hilfe von Ihnen sehr freuen! :)

  3. Hallo,

    ich habe mir auch gerade den Code installiert und stehe vor dem gleichen Problem wegen diesen einen Smilies… hoffe es gibt eine Lösung. – Nutze „Sociable 3.0“ für die Bookmarks.

    Freue mich auch über Support.

  4. Also ihr beiden, lest euch doch bitte noch mal den Artikel genau durch, besonders folgenden Absatz:

    Im nächsten Schritt werden die Smilies definiert. Hier kann jeder festlegen, welches Smilie durch welches Icon ersetzt werden soll.

    Hier sollten eure Fragen beantwortet werden :-)

    Was jedoch den mailto-Befehl angeht, ich bin mir zwar nicht sicher, aber das sieht schon nach ner falschen Syntax im Befehl selbst aus.

    1
    2
    <a href="mailto:email@domain.tld?subject=Betreffszeile">mail me</a> <!-- Richtig -->
    <a href="mailto:?subject=Betreffszeile">mail me</a> <!-- Falsch -->

    So weit ich weiß, muss die E-Mailadresse VOR dem Betreff stehen, was dann auch dieses Problem wieder lösen würde.

    • Ich habe den gesamten Text schon sehr ausführlich gelesen und mir ist auch klar das ich die Symbolzusammenstellung zum anzeigen eines Smilies selber ändern kann, jedoch würde ich gerne die Standard-Smilies so lassen. Ich brauche den Code haupsächlich dazu damit die Smilie-Images im Template-Ordner sind und ich ein par hinzufügen kann.

      Mit dem Bookmark ist nicht ganz richtig, der Code ist schon korrekt, denn da es ein Bookmark ist befindet sich zu Beginn nur der Betreff und die Nachricht mit dem Link darin. Die E-Mail Adresse gibt der User erst danach ein, von daher sollte dieser Platz leer sein… außer es gibt eine Art „Platzhalterbefehl“ dafür?

  5. Ok, weiter geht das Gedankenspiel :-)

    functions.php erweitern und dafür sorgen, dass die Smilies vor den Plugins geladen werden. Also eine Funktion erstellen, welche die bereits bestehende the_content(); ersetzt und dort die Smilies schon laden lassen. Diese Funktion wird dann an Stelle von the_content(); im Template aufgerufen.

    Eins solche Funktion habe ich hier bereits schon mal vorgestellt, diese kann leicht dementsprechend angepasst werden.

  6. Hallo Peter,

    super Beschreibung, musste ich natürlich (mal wieder) umsetzen. Vielleicht bin ich ja ein bisschen pingelig, aber nachdem ich alles befolgt hatte, wurden leider ein paar valide Fehler ausgeworfen. Ich habe einfach Deinen 3. Code für die Einbindung in den Beiträgen und Kommentaren noch um alt=““, also z. B. alt=“smilie“ nach dem img-Element und vor dem End-Slash ergänzt.
    Anschließend war die Seite wieder valide.

    Gruß Sylvi

    • Hi Silvy,

      Richtig, ich hatte den alt=““ bewusst weggelassen. Einerseits aus dem Grunde, da ich es getestet hatte und dort wirklich die Smilies reingeschrieben habe, was zu massiven Fehlern führte, da diese auch „übersetzt“ werden. Andererseits, weil dieses Attribut für Screenreader eigentlich nur interessant ist. Dieser muss aber nicht unbedingt die Smilies vorlesen. Aus diesem Grunde ist das auch kein Fehler, sondern lediglich eine Warnung des Validators. Ich persönlich bin der Meinung, dass dieses Attribut nicht unbedingt immer bei allen Bildern gesetzt werden muss, gerade bei Smilies nicht. Aber das ist eine persönliche Meinung und es steht natürlich jedem frei.

      Ich bastel immer noch an einer Methode, dort die Smilies als ausgeschriebenen Text hinein zu bekommen, so dass man, wenn man mit der Maus drauf stehen bleibt auch angezeigt bekommt, was es eigentlich sein soll. Dann macht der auch wieder mehr Sinn, als wenn nun überall „Smilie“ drin steht.

      • Hallo Peter,

        ja da stimme ich Dir zu, dass für Screenreader das Vorlesen des Einheits-Smilies wenig Sinn macht.
        Aber wenn Du das noch hinbekommst, dass jeder individuell ausgelesen wird, das wär ja klasse.
        Ich wollte nur auf meinem Blog vermeiden, dass sich so nach und nach immer mehr valide Fehler „einschleichen“. Ist eben derzeit in kleiner Tick von mir ;)

        Gruß Sylvi

  7. Hallo,

    Gibt es eigentlich eine Möglichkeit, dafür zu sorgen, dass innerhalb von

    1
    <code>

    und

    1
    <pre>

    die Zeichenfolgen nicht als Smilies ersetzt werden? Das hat mich das ein oder andere Mal schon geärgert…
    Danke schon mal für eventuelle Vorschläge.

    Gruß,
    Clemens

    • Hi Clemens,

      Entschuldige, dass ich etwas verspätet antworte.
      Ja, diese Möglichkeit wird es sicherlich geben. Zum einen kann man die betroffenen Smilies einfach aus dem Array heraus nehmen, sofern es nicht unbedingt die Bekanntesten betrifft. Zum andern bietet WordPress auch einige Filter an, mit denen sich das bestimmt irgendwie bewerkstelligen lässt.

      Wenn ich mal wieder ganz viel Zeit habe, schau ich mir die mal etwas genauer an und dann denke ich mal, dass ich da etwas in den Funktionen erweitert bekomme, was solche Blöcke außen vor lässt.

      In diesem Sinne :-)

      • Hallo Peter,

        Zum einen kann man die betroffenen Smilies einfach aus dem Array heraus nehmen, sofern es nicht unbedingt die Bekanntesten betrifft.

        Das habe ich schon gemacht, zum Teil betrifft es aber genau die bekannten… :-(

        Ich habe schon vermutet, dass über die Filter viell. irgendwas gehen könnte. Wenn ich mich mit WP ein bisschen besser auskennte, hätte ich schon selbst was versucht, aber da reicht mein Wissen bei Weitem noch nicht…

        Vielen Dank für (zukünftige) Mühen :-) ,
        Clemens

      • Holla Clemens,

        Ich glaube ich hab die Lösung für Dein Problem. Wenn ich das richtig gesehen, nutzt Du den code-Tag zu Darstellung von LaTeX-Code. Und in diesem doch recht abtrakten Code kann dann durchaus das eine oder andere Smilie dabei sei, stimmt.

        Mir ist aufgefallen, dass in dem PHP-Code im Beitrag oben die Smilies auch in Klartext stehen, also nicht umgewandelt werden, also habe ich mich mal etwas auf die Suche nach der Ursache begeben und diese gefunden. Das Plugin, welches ich hier zum Highlight der Syntax nutze filtert das hier. Dieses Plugin hängt sich an den code-Tag ran und verarbeitet den selbst, so dass WordPress damit nichts mehr zu tun bekommt. Dadurch werden natürlich auch die Smilies nicht „umgewandelt“ innerhalb des Codes.

        Zur kleinen Demonstration habe ich mir erlaubt mal etwas von dem LaTeX-Code aus Deinem Blog herzunehmen in dem ich bei kurzen tests Smilies gefunden habe -> 0: bond(r) atom(„0“);.

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        \begin{chemistry}[beispiel5]
        formula(L,R){
         ring("chair",,,L){
           0: bond(r) atom("0");
           1: bond(r) atom("1");
           2: bond(r) atom("2");
           3: bond(r) atom("3");
           4: bond(r) atom("4");
           5: bond(r) atom("5");
         }
        }
        \end{chemistry
        }

        Das Plugin nennt sich übrigens CodeColorer und die Syntax findest Du, wenn Du hier über dem Kommentarfeld mal auf einen der Button klickst, die für Code stehen. :-)

        Unterstützt wird von dem Plugin das Highlighting von über 170 Sprachen, auch LaTeX, wie Du siehst.

    • Hallo Clemens,

      Du wirst lachen, den Gedanken hatte ich gestern kurz vorm Einschlafen. War da nur zu faul noch mal aufzustehen und das zu testen. Bei meinem heutigen Tests ist mir übrigens noch was aufgefallen. Es scheint so, als würde die nächste größere WordPress-Version diese Filter schon per default inne haben. Ich hab auf meinem Testsystem WordPress 3.2-bleeding installiert und da ging es auch ohne Plugin. Also scheint dies dort schon berücksichtig zu werden.

  8. Hallo,
    sehr schönes Tutorial da, hab es bei mir gleich in die functions.php eingebaut und funktioniert super :) Nur eine Frage, selbst wenn es ein wenig vom Thema abweicht, kann man diesen Smilie Pool auch unter dem Kommentar Feld anzeigen lassen, sodass man gleich die Smilies auswählen kann, oder zumindest den Shortcut davon sieht?

    Eventuell, wenn man mit der Maus drüberfährt man den Code sieht oder mit dem draufklicken in das Feld eingefügt wird… :D

    MfG

      • Danke für deine Antwort. Ich kenne nur ein ähnliches Plugin von alexking.org (WP Grins) was dies möglich macht, nur weiss ich nicht, wie ich es umschreiben muss, damit es unter der Commentform angezeigt wird und auch diese Smilies benutzt werden, die hier im Tut beschrieben sind, da ich mich nicht wirklich mit php auskenne und auch nicht befasse :S

        MfG

  9. Ach, habe noch ne Frage (sry) Kennst du ein Plugin, oder weisst du wie man es irgendwie hinbekommt, dass diese Smilies wirklich nur in Artikeln oder wahlweise auf bestimmten Seiten durch die jeweiligen Shortcuts ersetzt werden? also, sonst wirkt es z.b im Impressum störend, da ich dort so einen Fall habe :S

    MfG

    • Ja, solche Seiten kann man durch Conditional Tags erkennen.
      CMS-Seiten: is_page()
      Artikel: is_single()

      Also, wenn man die Smilies zum Beispiel nicht auf CMS-Seiten haben will muss die Funktion my_smilies_filters() folgendermaßen aussehen:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      if(!function_exists('my_smilies_filters')) {
          function my_smilies_filters() {
              if(is_single()) {
                      update_option('use_smilies', 0);                    // WordPress-Smilies abschalten

                      add_filter('the_content', 'my_smilies_content');    // Smilies im Artikel
                      add_filter('comment_text', 'my_smilies_comments');  // Smilies in den Kommentaren
              }
          }
      }

      Damit werden die Smilies nur eingebunden, wenn es ein Einzelartikel ist.

  10. Hallo,
    leider funktioniert es bei mir nicht.
    Jedes Mal wird mir angezeigt, dass es ein Problem in folgender Zeile gibt:

    1
    function get_my_smilies_uri() {

    Was ich gemacht habe?
    Deine Funktionen 1:1 kopiert, die Smilies im Theme in den Ordner images/smilies kopiert alles in die functions.php eingefügt.

    Eigentlich so, wie es dasteht.
    Ich nutze WordPress 3.5.1 in der deutschen Version.
    Wenn es mit einem anderen Plugin in konflikt steht, wie kann das sein, da ich kein anderes Plugin nutze, welches auf die Funktion der Smilies greift.

    Vor der ganzen Prozedur hatte ich die automatische Umwandlung deaktiviert. Auch wenn ich jetzt diese funktion aktivierte ändert sich nichts an der Fehlermeldung.

    Liegt es an der WordPress-Version?
    Ich habe jetzt die Original-Smilies überschrieben würde mich aber freuen, wenn ich die updatesichere funktion anwenden könnte.

    Vielen Dank.
    LG Timm

  11. Sehr schön, habe es testweise nachgebaut in einem frisch installierten Blog, läuft bestens. Allerdings bin ich auch kein großer Freund von Smileys, daher wird es die Funktion nicht in den Alltagseinsatz schaffen :-)

    Meine Gründe weichen von deinen ab. Es ist nicht wegen „blinkend und bunt“ sondern wegen der Ladezeit. Mag trivial klingen, Kleinvieh macht ja aber auch Mist.

Schreibe einen Kommentar

Ihre Email-Adresse wird nicht veröffentlicht. Pflichtfelder sind durch * markiert.

Sie können folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>