Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!

Smileys in WordPress ändern, so geht’s!

Wer bei seiner WordPress Installation den Haken unter Design » Editor bei „Wandle Emoticons wie :-) und :-P in Grafiken um.“ nicht entfernt hat, wird sie kennen. Die WordPress Smileys, die einen gewissen Charme von 1990 haben. Sie erfüllen zwar ihren Zweck, aber die schönsten sind sie nicht gerade und vor allem passen sie auch nicht in jedes Layout. Gerade bei einem Flat Design, fallen die Smileys zu sehr aus dem Raster. Daher habe ich mich mal umgeschaut, was es für Möglichkeiten gibt, diese zu ändern.

Zwar gibt es einige Plugins, aber wie ihr wisst lieben wir ja die DIY-Mentalität und wollen keine überladenen Plugins in unser System knallen, sondern simple und einfach die Funktion die wir brauchen umsetzen.

bevor es losgeht, schauen wir uns nochmal die mitgelieferten Smileys an:


Die Standard WordPress Smileys

IconTextTextFull TextIconFull Text
smile:):-):smile:lol:lol:
biggrin:D:-D:grin:redface:oops:
sad:(:-(:sad:cry:cry:
surprised:o:-o:eek:evil:evil:
eek8O8-O:shock:twisted:twisted:
confused:?:-?:???:rolleyes:roll:
cool8)8-):cool:exclaim:!:
mad:x:-x:mad:question:?:
razz:P:-P:razz:idea:idea:
neutral:|:-|:neutral:arrow:arrow:
wink;);-):wink:mrgreen:mrgreen:

… nun ja, wie gesagt. Geschmackssache. Lass uns anfangen!

WordPress-Smileys austauschen

Der einfachste Weg ist es wohl, dass du einfach die Smileys ersetzt. Das geht entweder über das Austauschen der GIF-Datien, welche du im Ordner /wp-includes/images/smilies findest oder in dem du die Pfade der Smileys änderst. Diese Funktion findest du in der /wp-includes/formatting.php File. AAABER! Bei dieser Methode fummeln wir im Source-Code von WordPress rum und das ist nicht so toll. Also, da lieber die Finger von lassen!

WordPress-Smileys definieren

Wir machen das ganze lieber über eine Funktion, die du auch als Plugin anlegen kannst, oder über ein Child Theme einfügen musst, sodass sich die Änderungen nach einem Update der Theme nicht verabschieden und du wieder alles neu einfügen musst.

freebie-smileys

Aber eins nach dem anderen…

Bevor wir loslegen brauchen wir erstmal Smileys! Hierzu habe mal ein wenig recherchiert und ein nettes Freebie auf Dribbble gefunden: dribbble.com/shots/891540-Emoticons. Du kannst natürlich auch selbst bei Google mal nach „gratis Smileys“ oder „free Emoticons“ oder „Smiley Freebie“, etc. suchen. Hier findest du wirklich sehr viele, meist kostenlose, Smiley-Sets.

Auch eine Möglichkeit wäre es Seiten aufzusuchen, die kostenlose Icons präsentieren, da Smileys natürlich nichts anderes als Icons sind. Dazu habe ich vor kurzem einen kleinen Artikel geschrieben.

So, nachdem wir nun unsere Smileys geladen haben und diese Eingefärbt sind und so aussehen wie wir es wollen, geht’s ans Eingemachte.

Zunächst packst du folgenden Code in die functions.php

add_filter('smilies_src','custom_smileys_src', 1, 10);
	function custom_smileys_src($img_src, $img, $siteurl){
	return $siteurl.'/wp-content/smileys/'.$img;
}

Hierdurch wird der Pfad für die Smileys von wp-includes/images/smilies/ auf wp-content/smileys/ geändert. Natürlich kannst du den Pfad anpassen, wie du magst. :)

Nun laden wir die Smileys in den Ordner wp-content/smileys/. Nun gibt es zwei Möglichkeiten. Entweder du nennst die Smileys genau so, wie die von WordPress vorgegebenen Dateinamen, oder du musst alle Smileys einmal neu Definieren (das machen wir in dem Beispiel mal).

Hierzu fügst du den folgenden Code ebenfalls in deine functions.php ein, am besten direkt unter der oben erstellen Funktion. An dieser Stelle ist noch zu sagen, dass am besten alle Smileys definiert werden, wenn sollten welche wegfallen, haben diese kein Bild und geben einen Fehler aus. Wenn du aber weißt, dass du z.B. :arrow: eh niemals benutzen wirst, kannst du diesen getrost weglassen. :) Ich definiere in dem Beispiel nun nur die, die ich auch benutze bzw. die ich in dem Freebie auf Dribbble drin hatte. Die einzelnen Dateien (im DRWP-Blau) habe ich dir übrigens mal als ZIP-Datei zusammengepackt. So kannst du die Anleitung direkt testen und erst später deine Smileys ersetzen (DRWP-Smileys.zip).

global $wpsmiliestrans;
$wpsmiliestrans = array (
	':@' => 'Angry.png',
	':S' => 'Confused.png',
	'8)' => 'Cool.png',
	'3:)' => 'Evil.png',
	'^^' => 'Grin.png',
	':D' => 'Happy.png',
	':|' => 'Neutral.png',
	':(' => 'Sad.png',
	':O' => 'Shocked.png',
	':)' => 'Smiley.png',
	':P' => 'Tongue.png',
	';)' => 'Wink.png',
	':\\' => 'Wondering.png',
	':dr:' => 'Doctor.png'
);

In der Zeile 15 siehst du zwei \\ statt einem. Das hat mit PHP zu tun. Wenn man im Code irgendwie ein " oder ' verwendet, das aber von PHP nicht als „Ende“ angesehen werden soll, kann man diesen mit einem \ quasi „entschärfen“. Auch wenn ein Smiley einen ‚ enthalten sollte, müsstest du ihn so aufbauen :\'(, sodass das ' von PHP nicht als Ende des Strings gedeutet wird. Das \ erscheint dann jedoch nicht im Frontend und verändert die Ausgabe auch nicht.

Wenn du nun alles richtig gemacht hast, sollte es funktionieren, wie in unserem Beispiel:


Hübsche Smileys im DRWP-Blau

IconTextFile
:@:@Angry.png
:S:SConfused.png
8)8)Cool.png
3:)3:)Evil.png
^^^^Grin.png
:D:DHappy.png
:|:|Neutral.png
:(:(Sad.png
:O:OShocked.png
:):)Smiley.png
:P:PTongue.png
;);)Wink.png
:\:\Wondering.png
:dr::dr:Doctor.png

So, das war auch schon alles. Gar nicht so schwer, oder? Nun viel Spaß mit deinen individuellen Smileys! Und wenn du ein cooles Smiley-Set gefunden haben solltest, hinterlasse es doch in den Kommentaren. :)

Über André

Als Web- und Grafikdesigner arbeite ich täglich mit WordPress. Auf DRWP.de veröffentliche ich in unregelmäßigen Abständen immer wieder kleinere Snippets und Artikel, die mir bei meiner täglichen Arbeit helfen und auch für den ein oder anderen Suchenden von nicht unerheblichem Interesse sein könnten.

WordPress Affiliate ThemeAnzeige

6 Kommentare

Avatar von Fabian

Fabian 17. August 2014 um 12:15

Hi,

danke für den Beitrag. Sehr nützlich auf jeden Fall. Die Standard Smilies kann ich auch schon nicht mehr sehen …. ;-)

Antworten
Avatar von André

André 17. August 2014 um 18:50

Ja, zumal sie auf jedem Blog sind. Mit der zeit wird ’s öde. ;)

Antworten
Avatar von Markus

Markus 17. August 2014 um 15:55

Hallo,

ich hab´s zwar jetzt anders geregelt, aber Du hast mich auf ne super Idee gebracht! Und ausserdem hast Du einen tollen Schreibstil!

Antworten
Avatar von André

André 17. August 2014 um 18:49

Hehe, danke. ;)

Wie hast du es denn gelöst und welche Idee hab ich angestupst?

Antworten
Avatar von Marcel

Marcel 17. August 2014 um 16:23

Cooles Tutorial, lieben Dank André. Ich hasse die normalen Smileys :D!!!!!!!!!!!!!!!!

Liebe Grüße Marcel

Antworten
Avatar von André

André 17. August 2014 um 18:49

Danke, vllt. kannst du es deinen Usern ja als Anleitung an die Hand geben? Passt ja gut zu deiner Seite! ;)

Antworten

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <strong>, <em>, <u>, <a href="">, <del>, <ul>, <ol>, <blockquote>. Für Code benutze bitte pastebin.com und kopiere den Link in dein Kommentar.
*
*