Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
Emoticons, Smiley, Emoji
smilies.4-user.de

Von ':-P' bis 😎: Smileys und Emojis – Ein kleiner Leitfaden

Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – Ausgezeichnet!"
Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist sehr gut!"
Advanced Editor Tools immer NEU – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
– mit Advanced Editor Tools!
Advanced Editor Tools immer NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Advanced Editor Tools immer NEU! Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Antörnend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Advanced Editor Tools immer NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… Classic Widgets sind so praktisch!
"Classic Widgets – sind so grandiose!"
Advanced Editor Tools immer NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum – Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Advanced Editor Tools immer NEU! – Classic Widgets

Die digitalen Ausdrucksformen in WordPress: hier gehts um den altbekannten Text-Smileys oder Smile, Smiling wie :-P bis zu den farbenfrohen Emojis Text-Smileys wie 🌟. Dieser Leitfaden bietet eine klare Unterscheidung zwischen den beiden und beleuchtet das Drumherum. Weiter kann ein Blick in die Verwendung von Unicode-Zeichen helfen und wie daraus Smileys entstehen. Lasse uns gemeinsam die Unterscheidung entschlüsseln und die technischen Details besser verstehen!

Mit Emoticons darauf achten, dass sie den Text nicht beeinträchtigen oder unprofessionell aussehen lassen.

Was sind Smileys?

Einführung in Smileys in der WordPress Dokumentation.

Was sind Emojis?

Einführung in Emoji in der WordPress Dokumentation.

Smileys vs. Emojis

Die Begriffe "Smileys" und "Emojis" sind unterschiedliche Konzepte, die in der digitalen Kommunikation verwendet werden. Smileys sind einfache, textbasierte Darstellungen von Gesichtsausdrücken, die darauf abzielen, Emotionen auszudrücken. Ein klassisches Beispiel für einen Smiley ist ':-)' für ein lächelndes Gesicht.

Die automatische Umwandlung in WordPress ist in Dashboard / Einstellungen / Schreiben, dort bei "Emoticons wie :-) und :-P in Grafiken umwandeln". Wenn diese Option aktiviert ist, bedeutet dies, dass Smileys auf der Website konvertiert und angezeigt werden und haben nichts mit Emojis, aber gemeinsam mit Emoticons zu tun.

Auf der anderen Seite sind Emojis eben grafische Symbole, die Emotionen und Objekte darstellen und eine breitere Palette von Ausdrücken bieten. Im Gegensatz zu Smileys sind Emojis keine reinen Textzeichen, sondern farbige Bilder, die von modernen Kommunikationsplattformen unterstützt werden. Beispiele für Emojis sind 🌟 für einen Stern, 🛎 Rezeptionsglocke oder 😊 für ein lächelndes Gesicht. Das lächelnde Gesicht ist dem von Smiley :-) und fast 🙂 identisch. Die Emojis sind farbenfroher und bieten eine größere Auswahl.

  • Smileys sind im Text als Textzeichen :-) zu sehen, hingegen die Emojis 🚀 gleich wie visuell zu sehen sind.
Editor Visuell / TextQuellcodeDarstellung
Smiley = 8-)ist im Quelltext 8-)😎
Emoji = 😎ist im Quelltext 😎gleich 😎

Unicode-Zeichen und HTML-Entität

Ein Unicode-Zeichen, wie zum Beispiel (U+263A), das der HTML-Entität ☺ entspricht. Wenn du diese HTML-Entität im Text-Editor eingibst und dann zum Visuell-Editor wechselst, wird sie als dargestellt.

Ein Beispiel für ein normales Emoji ist mit Unicode (U+1F60A) und der HTML-Entität 😊. Wenn du diese HTML-Entitäten im Text-Editor eingibst und dann zum Visuell-Editor wechselst, wird das Emoji 😊 angezeigt.

Die Darstellung folgenden Smileys kann ganz einfach gestylt werden:

<span style="font-size: 36px; color: #ff9900;">☺</span>

, im Gegensatz zu einem normalen Smiley :-) 🙂 oder dem Emoji 😎, es sei denn, es geht um die Größe.

Es ist zu beachten, dass diese HTML-Entitäten letztendlich auf Unicode-Zeichen verweisen, die von modernen Plattformen und Browsern unterstützt werden, um die gewünschten grafischen Symbole darzustellen.

Die Verwendung von Unicode-Zeichen, insbesondere für Emojis, ist in erster Linie für Entwickler und technisch versierte Benutzer gedacht. Der durchschnittliche Anwender verwendet in der Regel einfach die grafischen Benutzeroberflächen, um Emojis auszuwählen und einzufügen, ohne sich mit den zugrunde liegenden Unicode-Codes befassen zu müssen. Es dient mehr als technische Information und bietet Flexibilität für Entwickler, die direkt mit dem Quellcode arbeiten.

Für fortgeschrittene Benutzer oder Entwickler, die spezifische Anpassungen vornehmen möchten, besteht die Möglichkeit, Inline-CSS und JavaScript für die Darstellung von Emojis zu verwenden. Dieser Ansatz erfordert jedoch ein tieferes Verständnis der Webentwicklung und wird in der Regel nicht von durchschnittlichen Benutzern bedurft.

Darüber hinaus sollte man sich beim Einfügen von Emojis bewusst sein, dass sie möglicherweise nicht auf allen Geräten und Plattformen einheitlich angezeigt werden, und Probleme bei der Datenbanksicherung verursachen können. D.h. einige Datenbanken unterstützen möglicherweise nicht standardmäßig alle Zeichen, die in Emojis enthalten sind. Nach dem Einspielen der Datenbank sind dann statt der Emojis nur mehr so Fragezeichen (?) zu sehen.

Emojis aus WordPress entfernen? Das Deaktivieren und Entfernen von Funktionen ist oft langsamer, als es aktiviert zu lassen. Einfach, weil es von Haus aus aktiv ist.

Wir konnten keinen eindeutigen Unterschied feststellen, ob die Emoji-Funktion aktiviert oder deaktiviert ist. Die genaue Funktionsweise bleibt manchmal unklar, da es viele Begriffe und Meinungen dazu gibt. Es scheint, als ob die Informationen darüber nicht immer eindeutig sind.

Hier sind bspw. die Emojis deaktiviert, zu sehen ist das angeblich, dass im Quelltext folgendes nicht enthalten ist:

<script type='text/javascript' src='https://s.w.org/images/core/emoji/13.0.1/72x72/...'></script>

Die Begriffe "Smileys" und "Emojis" werden manchmal synonym verwendet, was zu Missverständnissen führen kann.

Soweit ich das verstehe …

Soweit ich das verstehe, sind Smileys das, welches im Editor-Visuell mit :-P eingegeben wird und bleibt im Text gleich, ohne dass sich das in ein Bildchen umwandelt. Der Smiley ;-) 😉 wird nur auf der Website visuell dargestellt. Im Gegensatz dazu werden Emojis  👉 direkt als Bildchen 👀 eingefügt. Emojis werden auch im Quelltext als Bildchen angezeigt, unabhängig davon, ob die WordPress-Emojis aktiviert oder deaktiviert sind.

Smileys

Für Smileys gibt es ein kleines Plug-in namens TinyMCE-Smiley-Button, das die 22 Smileys aus der folgenden Tabelle anzeigen kann. Beachte, dass das Plug-in nicht erforderlich ist, um die Smileys anzuzeigen. Es fügt lediglich eine Schaltfläche im Editor hinzu, um das Einfügen der Smileys zu erleichtern.

Im 'Advanced Editor' sind bereits Einstellungen für einen Button vorhanden:

Smileys; Advanced Editor
Das Widget "Emoticons" sollte in die Werkzeugleiste integriert werden.

Dies ermöglicht das Einfügen von 20 Smileys (Emoticons), im Unterschied zu den 22 Smileys, die mit dem TinyMCE-Smiley-Button verfügbar sind, die Smileys :!: ❗ und :?: ❓ . Diese beiden Smileys können auch durch Eingabe visuell identisch dargestellt werden.

  • Bei der Eingabe von Smileys mit der Tastatur ist vor und nach dem Smiley ein Leerzeichen zu verwenden.
icontexttextfull texticonfull text
🙂:):-):smile:😆:lol:
😀:D:-D:grin:😳:oops:
🙁:(:-(:sad:😥:cry:
😮:o:-o:eek:👿:evil:
😯8O8-O:shock:😈:twisted:
😕:?:-?:???:🙄:roll:
😎8)8-):cool::!:
😡:x:-x:mad::?:
😛:P:-P:razz:💡:idea:
😐:|:-|:neutral::arrow:
😉;);-):wink::mrgreen::mrgreen:

Zudem können einige Smileys alternativ zur normalen Darstellung auch als animierte GIFs angezeigt werden. Die GIF-Animationen sind bereits im Advanced Editor enthalten, sodass die Smileys bei der Auswahl animiert erscheinen.

Advanced Editor-Emoticons
Rechtsklick und das Öffnen des GIFs in einem neuen Tab

Wir verwenden die Methode, die Smileys durch einen Rechtsklick und das Öffnen des Bildes in einem neuen Tab auszuwählen.

Dadurch haben wir Zugriff auf die URL, und das GIF kann dann dargestellt werden, also das sieht im Editor-Text so aus:

<img class="alignnone size-medium" role="img" src="/wp-content/plugins/tinymce-advanced/mce/emoticons/img/icon_lol.gif" alt="" width="18" height="18" />

Von den 20 Smileys sind die folgenden vier mittels GIF-Animation:

  • icon_lol.gif
  • icon_rolleyes.gif
  • icon_cry.gif
  • icon_redface.gif

 

Und diesen haben wir uns selbst zusammengestellt:

  • du möchtest diesen GIF-Smiley? – einfach Rechtsklick und "Bild speichern unter…" oder direkt hier zumDownload (1KB).

Und Zugabe!

Smiley, Smilie
Smiley OpenIcons; GIF Online-Umwandeln.de

Es gibt auch weitere Plug-ins, die die Verwendung von Emojis und Icons erleichtern können. Es ist jedoch sicherzustellen, dass sie gut getestet und zuverlässig sind, um Probleme zu vermeiden.

^◡^"Kaomoji" und ja, es gibt noch mehr: zum Beispiel, das WordPress Dashicon Smiley   dazu ist im Beitrag über die Dashicons zu finden.

Insgesamt sollten Smileys und Emojis mit Bedacht verwendet werden, um sicherzustellen, dass sie den Inhalt des Artikels verbessern und nicht beeinträchtigen.

Ei-ja, wenn man es mal braucht ➽ HTML von Toptal Designers.

zeitmaschine, gifzentrale.com

Der Beitrag wurde mit fachlicher Unterstützung erstellt.


Aktualisiert im Jahr 2024-April