JPKCom DB
Auf GitHub ansehen

JPKCom FA inline SVG shortcode — Anleitung & Tipps

Inline-SVGs aus Font Awesome (Pro) v5.15.4 per Shortcode in WordPress ausgeben — Installation, Font-Awesome-Setup und Praxis-Tipps zum [jsvg]-Shortcode.

JPKCom FA inline SVG shortcode lädt Icons aus Font Awesome (Pro) v5.15.4 als Inline-SVG und gibt sie über einen Shortcode aus — schnell und ressourcenschonend, ohne Webfont oder JavaScript-Loader. Gedacht für alle, die das SVG-with-JS-Paket von Font Awesome unbürokratisch in ihre WordPress-Seite einbinden wollen.

Das ist kein offizielles Plugin von Font Awesome und steht in keiner direkten Verbindung zum Anbieter. Eine Font-Awesome- bzw. Font-Awesome-Pro-Lizenz bekommst du unter https://fontawesome.com/.

Anleitung

Voraussetzungen

  • WordPress 6.9 oder neuer (getestet bis WordPress 7.1)
  • PHP 8.3 oder neuer
  • Eine eigene Kopie von Font Awesome (Pro) v5.15.4 (über deine Font-Awesome-Lizenz)
  • Multisite wird unterstützt (das Plugin ist netzwerkfähig)

Installation

  1. Gehe im Admin-Bereich zu Plugins → Installieren und klicke auf Plugin hochladen.
  2. Wähle die ZIP-Datei des Plugins und klicke auf Jetzt installieren.
  3. Lade deine Version von Font Awesome (Pro) v5.15.4 unter https://fontawesome.com/ herunter.
  4. Entpacke den Inhalt des Font-Awesome-Archivs direkt in einen Ordner namens jpkcom_fasvg/ unterhalb von wp-content/uploads.
  5. Stelle sicher, dass folgende Dateien/Verzeichnisse vorhanden sind: wp-content/uploads/jpkcom_fasvg/css/svg-with-js.min.css und wp-content/uploads/jpkcom_fasvg/svgs/*.
  6. Klicke auf Aktivieren.

Verwendung

Setze den Shortcode in deinen Inhalt oder in einen Menüpunkt-Titel:

[jsvg type="" name="" style="" class="" title=""]

Beispiel:

[jsvg type="fal" name="jedi" style="margin:2rem" class="fa-10x" title="Obi-Wan Kenobi"]
  • type — die Font-Awesome-Stil-Familie (z. B. fas, fal)
  • name — der Icon-Name (z. B. jedi)
  • style — optionale Inline-CSS-Angaben
  • class — zusätzliche CSS-Klassen (z. B. fa-10x, fa-rotate-270)
  • title — barrierefreier Titel des Icons

Der Shortcode lässt sich auch programmatisch über do_shortcode() verwenden:

<?php
echo do_shortcode( '[jsvg type="fas" name="snowboarding" class="fa-4x fa-rotate-270" title="Snowboarding"]' );

Mehr zu do_shortcode() findest du in der WordPress-Funktionsreferenz.

Tipps & Tricks

  • Icon-Namen entsprechen den SVG-Dateinamen: Der name-Wert verweist auf die Datei im jeweiligen Stil-Verzeichnis unter svgs/. Stimmt der Name nicht mit einer vorhandenen SVG-Datei überein, wird nichts ausgegeben.
  • Sicherheit beim name-Attribut: Seit Version 2.0.9 wird der name-Wert mit sanitize_file_name()/basename() bereinigt, um Path-Traversal zu verhindern — Slashes und Pfadangaben im Namen greifen also nicht. Der Shortcode-Name [jsvg] und alle Attribute bleiben unverändert.
  • Callback umbenannt (2.0.16): Die Shortcode-Funktion hieß bis dahin jsvg_code() — als einzige Funktion des Plugins ohne Präfix und ohne function_exists()-Schutz. Ein Theme oder Plugin mit demselben Funktionsnamen führte zum Fatal Error. Sie heißt jetzt jpkcom_fasvg_shortcode(); jsvg_code() bleibt als veralteter Shim erhalten, damit direkter Code weiterläuft. Rufst du die Funktion in eigenem Code auf, zieh den neuen Namen nach.
  • Multisite: Upload-Pfad pro Site (2.0.16): Pfad und URL des Icon-Ordners wurden bis 2.0.15 einmalig beim Laden der Plugin-Datei aufgelöst. Da das Plugin netzwerkfähig ist und jede Site im Netzwerk ihr eigenes Upload-Verzeichnis hat, zeigte der gemerkte Wert nach einem switch_to_blog() auf die falsche Site. Shortcode und Stylesheet lösen den Pfad jetzt pro Aufruf über jpkcom_fasvg_path() / jpkcom_fasvg_url() auf. Die Konstanten JPKCOM_FASVG_PATH und JPKCOM_FASVG_URL bleiben aus Kompatibilitätsgründen bestehen.
  • Eindeutige Titel-IDs: Die id des <title>-Elements stammt seit 2.0.16 aus wp_unique_id() statt aus einer Zufallszahl. Bei mehreren Dutzend Icons mit title auf einer Seite war eine Kollision unwahrscheinlich, aber möglich — und eine doppelte id bricht aria-labelledby still und ist zudem ungültiges HTML.
  • In Menü-Titeln nutzbar: Da der Shortcode auch in Menüpunkt-Titeln funktioniert, kannst du Navigationspunkte mit Icons anreichern.
  • Transformations-Klassen von Font Awesome: Größen- und Rotations-Utilities wie fa-4x oder fa-rotate-270 lassen sich über das class-Attribut mitgeben.
  • Icons im Block-Editor ab WordPress 7.1: Der Post-Editor rendert seinen Canvas ab WordPress 7.1 immer in einem iframe. Das Stylesheet hing bis Version 2.0.13 an enqueue_block_editor_assets und landete damit nur im umgebenden Admin-Dokument — Icons in der Blockvorschau hätten ihre Font-Awesome-Größenregeln verloren und in Originalgröße gerendert. Seit 2.0.14 hängt es an enqueue_block_assets und erreicht beide Kontexte; der nicht-iframete Editor bis WordPress 7.0 verhält sich unverändert. Front-End und Editor teilen sich jetzt das Handle jpkcom-fasvg-style — das frühere jpkcom-fasvg-gutenberg-style gibt es nicht mehr. Falls du es in eigenem Code dequeued oder als Abhängigkeit angegeben hast, zieh das nach.
  • Reproduzierbare Updates: Ab Version 2.0.9 nutzt das Plugin sichere, selbst gehostete Updates über GitHub mit SHA256-Prüfsummen und arbeitet mit declare(strict_types=1).

Weiterführende Informationen