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