JPKCom DB
Auf GitHub ansehen (öffnet in neuem Tab)

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/ (öffnet in neuem Tab).

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/ (öffnet in neuem Tab) 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 (öffnet in neuem Tab).

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). Seit 2.0.17 trägt es außerdem den Header Update URI: Die Update-Schnittstelle von wordpress.org liefert für dieses Plugin dann keine Updates mehr, ein dort veröffentlichtes Plugin mit demselben Slug kann sich also nicht als Update ausgeben. Seit 2.0.18 zeigt Dashboard → Aktualisierungen das JPKCom-Logo neben dem Plugin.
  • Updates auch im deaktivierten Zustand: Seit 2.0.19 (Updater 1.5.0) bekommt das Plugin Updates auch dann angeboten, wenn es deaktiviert ist — vorausgesetzt, ein anderes JPKCom-Plugin mit Updater 1.5.0 oder neuer ist aktiv. Dessen Updater beantwortet die Update-Abfrage für alle installierten JPKCom-Plugins, samt Update-Zeile, Icon und „Details anzeigen“, und die SHA256-Prüfung gilt genauso wie für ein aktives Plugin. Auf Multisite muss dafür mindestens ein JPKCom-Plugin netzwerkweit oder auf der Hauptseite aktiv sein. Außerdem seit 2.0.19: Die gespeicherte Update-Liste enthält keine Download-URLs von JPKCom-Plugins mehr, der Updater ergänzt sie nur, solange er geladen ist; die Prüfsumme wird auch bei einem Paket geprüft, das ein anderes Plugin liefert, und für jede GitHub-Adresse der Release-Datei. Liegt das Plugin als Git- bzw. VCS-Checkout oder in einem umbenannten Ordner, zeigt WordPress zwar das neue Release an, bietet aber kein Update-Paket an und verweigert auch den Download (bei einem umbenannten Ordner gilt das, solange das Plugin aktiv ist) — das Update würde den Checkout bzw. den Ordner löschen. Ein deaktiviertes Plugin in einem umbenannten Ordner erkennt der Updater gar nicht, du erfährst dann also auch nichts von neuen Versionen. Aktualisiere solche Installationen von Hand, etwa per git pull. Update-Informationen holt der Updater nur für Nutzer, die Plugins aktualisieren dürfen, im Update-Cron und in WP-CLI, nie für anonyme Besucher.

Weiterführende Informationen