Iconseasy_svg_icon

[easy_svg_icon]

Setz ein Icon aus der Easy-SVG-Bibliothek in Beiträge, Widgets und Page-Builder-Textfelder, wo du kein PHP schreiben kannst, mit Klasse und Label.

Shortcode · Easy SVG · Status: Stabil

Der Shortcode [easy_svg_icon] setzt ein Icon aus der Icon-Bibliothek der Website in Inhalte: einen klassischen Beitrag, einen Shortcode-Block, ein Text-Widget oder das Textfeld eines Page-Builders. Er gibt genau das aus, was easy_svg_icon() ausgibt, denn er ist nur eine dünne Hülle um diese Funktion.

Verwendung

[easy_svg_icon name="easy-svg/heart" class="icon icon--small" label="Favourite"]

Wann du es brauchst

  • Ein Redakteur möchte ein Icon im Text und kann oder soll kein PHP schreiben.
  • Ein Page-Builder hat ein Text- oder HTML-Feld, das Shortcodes ausführt, aber kein Icon-Element.
  • Ein klassisches Theme oder ein Widget-Bereich, in dem der Block-Editor nicht genutzt wird.

Wann nicht:

  • In Block-Inhalten unter WordPress 7.1 oder neuer ist der Core-Block Icon mit der Sammlung easy-svg die native Wahl.
  • In PHP-Templates. Ruf easy_svg_icon() direkt auf, dort gibt es auch den Schalter decorative, den der Shortcode nicht hat.

Parameter

body
namestring
Required

Das Icon: ein reiner Slug (heart) oder ein Name mit Sammlung (easy-svg/heart). Leerzeichen am Rand werden entfernt. Fehlt name oder ist es leer, wird nichts ausgegeben. Der Kopieren-Knopf der Bibliothek gibt dir die genaue Form, auch ein -2, das der Slug bekommen haben kann, als der Name schon vergeben war.

body
classstring

CSS-Klassen für das svg-Wurzelelement, mit Leerzeichen getrennt. Wird als Attribut maskiert. Leer ist dasselbe wie nicht gesetzt.

body
labelstring

Der zugängliche Name. Setz ihn, wenn das Icon für sich allein etwas bedeutet (ein Link nur mit Icon, eine Bewertung). Das Icon bekommt dann role="img", focusable="false" und aria-label. Ohne label ist das Icon dekorativ: aria-hidden="true" und focusable="false". Leer ist dasselbe wie nicht gesetzt.

Jedes andere Attribut (zum Beispiel decorative, size oder onload) wird ignoriert.

Rückgabewert

returnstring

Das SVG-Markup des Icons mit Klasse und ARIA-Attributen an der Wurzel, oder ein leerer String, wenn der Name fehlt oder kein Icon dazu passt. WordPress setzt den zurückgegebenen String dort ein, wo der Shortcode stand.

Standardwert

Ohne class und label: ein dekoratives Icon, aria-hidden="true" focusable="false", keine Klasse.

Beispiele

Dekoratives Icon vor einem Satz

[easy_svg_icon name="phone" class="inline-icon"] Call us on 030 1234567

Der Text sagt, was das Icon bedeutet, also kein Label.

Icon mit Bedeutung

<a href="https://example.com/feed/">[easy_svg_icon name="easy-svg/rss" label="RSS feed"]</a>

Der Link hat keinen Text, das Label ist sein einziger Name für Screenreader-Nutzer.

Das Inline-Icon gestalten

Die Ausgabe des Shortcodes hat keine Größe. Ergänze eine kleine Regel in deinem Theme oder unter Zusätzliches CSS im Customizer:

.inline-icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	fill: currentColor;
}

Aus PHP ausgeben

Bekommt ein Template Inhalte mit Shortcodes, gibt do_shortcode() sie aus. Schreibst du das Template selbst, ruf lieber die Funktion direkt auf.

$intro = get_post_meta( get_the_ID(), 'myplugin_intro', true );
echo wp_kses_post( do_shortcode( $intro ) ); // Vorsicht: wp_kses_post() entfernt SVG.

Die Zeile oben zeigt einen häufigen Fehler: wp_kses_post() kennt kein SVG und entfernt das Icon. Maskiere zuerst selbst und ruf do_shortcode() als letzten Schritt auf.

So funktioniert es

  1. Der Shortcode wird auf init registriert, und nur solange die Icon-Bibliothek unter Icons, Einstellungen eingeschaltet ist. Der Schalter wird gelesen, wenn das Plugin lädt, eine Änderung gilt also ab der nächsten Anfrage.
  2. WordPress ruft easy_svg_icon_shortcode() mit den Attributen auf. Ein Aufruf ohne Attribute übergibt einen String, der wie keine Attribute behandelt wird.
  3. name wird getrimmt. Nur class und label werden weitergereicht, und nur, wenn sie nicht leer sind.
  4. easy_svg_icon() erledigt den Rest: Suche, Filter easy_svg_icon_markup, ARIA-Attribute.

Der Shortcode ist der einzige Weg, wie ein Redakteur ohne Icon-Block ein Icon im Beitragsinhalt ausgibt. Er nutzt dieselbe Suche und dasselbe gehärtete gespeicherte Markup wie die PHP-Funktion, öffnet also keinen zweiten Weg für rohe Bytes auf eine Seite.

Stolperfallen

  • Bibliothek ausgeschaltet. Solange die Icon-Bibliothek aus ist, ist der Shortcode nicht registriert, und WordPress zeigt [easy_svg_icon ...] als reinen Text. easy_svg_icon() in PHP funktioniert weiter.
  • Kein Attribut decorative. Ein bedeutungstragendes Icon ohne Label kannst du nicht erzwingen. Schreib stattdessen ein Label.
  • Unbekannte Namen scheitern still. Ein Tippfehler oder ein gelöschtes Icon ergibt nichts, ohne Hinweis auf der Seite. Kopier den Namen aus der Bibliothek.
  • Escaping nach dem Shortcode. Jedes wp_kses_post() oder esc_html(), das nach do_shortcode() läuft, entfernt oder maskiert das SVG.
  • Keine Größe, keine Farbänderung. Das Icon hat die Maße und Farben aus der Datei. Steuere sie mit CSS über die Klasse.

Siehe auch

Was this page helpful?