Das Grundgerüst des ersten Plugins mit eigenem Menüpunkt im WordPress Admin steht und der Admin-Menüpunkt wird auch angezeigt. Doch es fällt auf, dass – im Gegensatz zum eigenen – alle anderen Menüpunkte optisch ansprechende Icons zu ihrer Linken aufweisen. Meine seit Jahren beliebteste Quelle für anspruchsvoll gestaltete Icons ist Font Awesome. Aber wie bekomme ich das Icon meiner Wahl vor den Menüeintrag?
In den WordPress Developer Resources ist für add_menu_page() beschrieben, dass als 6. Parameter (optional) ein String $icon_url anzugeben ist. Ich sehe prinzipiell 3 Möglichkeiten, das Font Awesome Icon als Menü-Icon zu verwenden.
- Man konvertiert das Icon in eine Image-Datei, lädt diese in sein Plugin und gibt tatsächlich die URL des Icons an.
- Man gibt übergibt den Wert ’none‘ als
$icon_url-Parameter, sorgt dafür, dass die Schriftart Font Awesome bspw. durch laden der fontawesome-webfont.woff von bootstrapcdn.com zur Verfügung steht und nimmt die Gestaltung via CSS vor. - Der meines Erachtens einfachste und eleganteste Weg:
Wir konvertieren das gewünschte Icon mittels des Node.js basierten Generators Font-Awesome-SVG-PNG in eine SVG (sofern es nicht ohnehin schon als solche im Archiv enthalten ist) und lassen uns z.B. mit b64.io daraus einen base64-codierten String generieren. Den ersten Teil des als $icon_url anzugebenden Strings geben die WordPress Developer Resources bereits vor, so dass wir nur noch den generierten String ergänzen müssen.Das Ergebnis sieht dann beispielsweise so aus:
Das sieht ganz ähnlich aus wie das Beitragsbild, das allerdings im PNG-Format vorliegt, während Ihnen ein Blick in den Quellcode dieser Seite oder eine Inspektion der Bildeigenschaften verrät, dass es sich bei der Kaffeetasse oberhalb dieses langen Satzes um eine als Data URI angegebene SVG handelt.
Für das Admin-Menü habe ich das Icon in weißer Variante verwendet und die SVG vor der base64-Codierung noch mit svgo, einem ebenfalls auf Node.js basierenden Tool zur Optimierung von Vektorgrafiken, um satte 3,6% komprimiert. Um die Darstellungsgröße und Farbgebung kümmert sich WordPress.
Auf diese Weise lassen sich Font Awesome Icons binnen weniger Minuten als Menu Icons im WordPress-Backend einbinden. Selbst programmierte WordPress-Plugins mit eigenen Menüpunkten wirken professioneller. Ein prägnanteres, als das standardmäßig von WordPress verwendete Icon steigert Wiedererkennung und Benutzerfreundlichkeit. Last but not least fügen sich die Menüpunkte Ihrer eigenen Plugins nahtlos in das Erscheinungsbild der Navigation im WordPress-Admin ein.