Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

WordPress: So kannst du die Standard-Smileys einfach ersetzen

    WordPress: So kannst du die Standard-Smileys einfach ersetzen

WordPress-Smileys. (Grafik: avryl/new-smileys – GitHub)

WordPress bringt standardmäßig ein Set an Smileys mit – doch nicht alle Nutzer mögen das Design. Wie ihr diese Smileys austauschen könnt, ohne nach jedem WordPress-Update wieder aktiv werden zu müssen, erfahrt ihr hier.

Auf den meisten WordPress-Seiten ist vermutlich die Funktion aktiviert, dass die Smiley-Codes wie :D automatisch in Smiley-Grafiken umgewandelt werden. Mit den Standard-Smileys, die WordPress mitliefert, dürfte aber nicht jeder zufrieden sein – meiner Meinung nach sieht beispielsweise dieser Smiley :) ( :) ) auf den ersten Blick eher fies aus, nicht freundlich – und auf den zweiten Blick lacht er und lächelt immer noch nicht.

WordPress-Smileys: Manchmal nichts halbes und nichts ganzes. (Screenshot: eigene WordPress-Installation)
WordPress-Smileys: Manchmal nichts Halbes und nichts Ganzes. (Screenshot: WordPress)

WordPress-Smileys austauschen – aber richtig

Nun könntet ihr natürlich einfach die Smiley-Grafiken austauschen – sie liegen im Ordner wp-includes/images/smilies – oder die Pfade zu den Smileys anpassen – möglich in der wp-includes/formatting.php in Zeile 1.910. Oder ihr ladet neue Smiley-Grafiken mit veränderten Namen in den Smiley-Ordner und passt die Namen in der wp-includes/functions.php ab Zeile 2.655 an. Nach jedem Update von WordPress dürften diese Änderungen aber wiederholt werden müssen – und außerdem ist es nie empfehlenswert, direkt in den Core-Ordnern und -Dateien herumzuwerkeln.

Es geht aber auch einfacher: Ihr könnt den Pfad zu den Smileys bequem über ein Plugin oder in eurer functions.php ändern – damit bleibt die Änderung auch bei einem Update von WordPress bestehen. Wenn ihr die Änderung in der funtions.php vornehmt, müsst ihr sie nach einem Wechsel des Themes – oder schon nach einem Update, falls ihr das Theme nicht selbst erstellt oder die Änderung nicht in einem Child-Theme vorgenommen habt – wieder neu vornehmen. Die Änderung hier durchzuführen, kann also sinnvoll sein, wenn die Smileys auf das Theme abgestimmt sind. Wenn ihr aber Smileys einsetzt, die als generelle Alternative unabhängig vom Theme gedacht sind, dann ist ein Plugin die bessere Lösung. Hier zeigen wir euch beide Wege, angefangen mit der functions.php (wie angedeutet am besten in einem Child-Theme, wenn es nicht euer Theme ist).

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

Wie ihr seht, ist die Änderung sehr schnell vorgenommen. Diesen Code könnt ihr einfach an das Ende eurer functions.php kopieren. Hierdurch werden die Smileys jetzt nicht mehr aus dem Pfad wp-includes/images/smilies bezogen, sondern aus dem Ordner wp-content/images/smilies. Den könnt ihr natürlich anpassen, wenn ihr wollt. Nun müsst ihr nur noch die neuen Smileys in den neuen Ordner kopieren und hochladen – hier müsst ihr darauf achten, dass die Dateinamen mit denen der alten Smileys übereinstimmen. Wenn ihr jetzt auch andere Dateinamen verwenden wollt, könnt ihr den folgenden Code nutzen:

global $wpsmiliestrans;
$wpsmiliestrans = array (
':mrgreen:' => 'icon_mrgreen.gif',
':neutral:' => 'icon_neutral.gif',
':twisted:' => 'icon_twisted.gif',
':arrow:' => 'icon_arrow.gif',
':shock:' => 'icon_eek.gif',
':smile:' => 'icon_smile.gif',
':???:' => 'icon_confused.gif',
':cool:' => 'icon_cool.gif',
':evil:' => 'icon_evil.gif',
':grin:' => 'icon_biggrin.gif',
':idea:' => 'icon_idea.gif',
':oops:' => 'icon_redface.gif',
':razz:' => 'icon_razz.gif',
':roll:' => 'icon_rolleyes.gif',
':wink:' => 'icon_wink.gif',
':cry:' => 'icon_cry.gif',
':eek:' => 'icon_surprised.gif',
':lol:' => 'icon_lol.gif',
':mad:' => 'icon_mad.gif',
':sad:' => 'icon_sad.gif',
'8-)' => 'icon_cool.gif',
'8-O' => 'icon_eek.gif',
':-(' => 'icon_sad.gif',
':-)' => 'icon_smile.gif',
':-?' => 'icon_confused.gif',
':-D' => 'icon_biggrin.gif',
':-P' => 'icon_razz.gif',
':-o' => 'icon_surprised.gif',
':-x' => 'icon_mad.gif',
':-|' => 'icon_neutral.gif',
';-)' => 'icon_wink.gif',
// This one transformation breaks regular text with frequency.
// '8)' => 'icon_cool.gif',
'8O' => 'icon_eek.gif',
':(' => 'icon_sad.gif',
':)' => 'icon_smile.gif',
':?' => 'icon_confused.gif',
':D' => 'icon_biggrin.gif',
':P' => 'icon_razz.gif',
':o' => 'icon_surprised.gif',
':x' => 'icon_mad.gif',
':|' => 'icon_neutral.gif',
';)' => 'icon_wink.gif',
':!:' => 'icon_exclaim.gif',
':?:' => 'icon_question.gif',
);

Diesen fügt ihr einfach unter den Codeblock mit der Pfadänderung in eure functions.php ein und passt die Dateinamen an. Wichtig ist, dass ihr hier alle Smileys aufführt, auch wenn ihr einige Dateinamen nicht ändern wollt. Führt ihr hier nur die geänderten auf, sind für die anderen keine Bilder mehr hinterlegt.

Wie ihr seht, ist der neue Dateipfad aktiv – Jetzt fehlen nur noch neue Smileys! (Screenshot: eigene WordPress-Installation)
Wie ihr seht, ist der neue Dateipfad aktiv – jetzt fehlen nur noch neue Smileys! (Screenshot: WordPress)

Kommen wir jetzt zu der Erstellung eines kleinen Plugins, das genau die gleiche Funktion hat. Erstellt dafür einen Ordner namens change-smilies im Verzeichnis wp-content/plugins und darin eine index.php. Der Inhalt sieht so aus (gleich mit beiden Fällen, also auch Dateinamen anpassen):

<?php
/*
Plugin Name: Ändern der Smileys
Version: 1.0
Plugin URI:
Description: Smileys ändern!
*/
add_filter('smilies_src','my_custom_smilies_src', 1, 10);
function my_custom_smilies_src($img_src, $img, $siteurl){
return $siteurl.'/wp-content/images/smilies/'.$img;
}
global $wpsmiliestrans;
$wpsmiliestrans = array (
':mrgreen:' => 'icon_mrgreen.gif',
':neutral:' => 'icon_neutral.gif',
':twisted:' => 'icon_twisted.gif',
':arrow:' => 'icon_arrow.gif',
':shock:' => 'icon_eek.gif',
':smile:' => 'icon_smile.gif',
':???:' => 'icon_confused.gif',
':cool:' => 'icon_cool.gif',
':evil:' => 'icon_evil.gif',
':grin:' => 'icon_biggrin.gif',
':idea:' => 'icon_idea.gif',
':oops:' => 'icon_redface.gif',
':razz:' => 'icon_razz.gif',
':roll:' => 'icon_rolleyes.gif',
':wink:' => 'icon_wink.gif',
':cry:' => 'icon_cry.gif',
':eek:' => 'icon_surprised.gif',
':lol:' => 'icon_lol.gif',
':mad:' => 'icon_mad.gif',
':sad:' => 'icon_sad.gif',
'8-)' => 'icon_cool.gif',
'8-O' => 'icon_eek.gif',
':-(' => 'icon_sad.gif',
':-)' => 'icon_smile.gif',
':-?' => 'icon_confused.gif',
':-D' => 'icon_biggrin.gif',
':-P' => 'icon_razz.gif',
':-o' => 'icon_surprised.gif',
':-x' => 'icon_mad.gif',
':-|' => 'icon_neutral.gif',
';-)' => 'icon_wink.gif',
// This one transformation breaks regular text with frequency.
// '8)' => 'icon_cool.gif',
'8O' => 'icon_eek.gif',
':(' => 'icon_sad.gif',
':)' => 'icon_smile_2.gif',
':?' => 'icon_confused.gif',
':D' => 'icon_biggrin.gif',
':P' => 'icon_razz.gif',
':o' => 'icon_surprised.gif',
':x' => 'icon_mad.gif',
':|' => 'icon_neutral.gif',
';)' => 'icon_wink.gif',
':!:' => 'icon_exclaim.gif',
':?:' => 'icon_question.gif',
);
?>

Das wär's auch schon. Jetzt könnt ihr den Plugin-Ordner hochladen und das Plugin aktivieren. Bei der Größe der neuen Smileys müsst ihr ein bisschen experimentieren, damit sie euch nicht die Zeilen eurer Website zerschießen. Die Standard-Smileys haben eine Größe von 15 x 15 Pixeln. Mehr zum Thema WordPress-Smileys findet ihr auf der Seite im WordPress-Codex.

Und was ist mit Smileys?

Das frage ich euch! Kennt ihr gute Smiley-Sammlungen (keine Übersichtsseiten, sondern wirklich einzelne Sammlungen), die man sich unbedingt anschauen sollte? Dann schreibt sie doch in die Kommentare! Eine Sammlung, die auf WordPress.com genutzt werden kann, gibt es auf GitHub.

Finde einen Job, den du liebst zum Thema PHP, JavaScript

3 Reaktionen
fantasylife
fantasylife

Ich verwende auf meinem Blog u.a. die Smilies von http://www.greensmilies.com/ - die bieten ein komplettes pak-Paket zum kostenlosen Download an. Lediglich um einen Backlink bei Verwendung wird gebeten.

Antworten
HanYolo
HanYolo

Kann man machen :) ich hab einfach die Gifs in den WP Includes ersetzt

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen