Ich entwickle gerade als Studienarbeit ein WordPress Plugin und stoße da täglich auf neue Fragen, wie ich etwas löse. Das Internet ist zwar oft sehr hilfreich, aber gestern bin ich auf ein Problem gestoßen, worauf es eine Lösung gibt, aber anscheinend keine Anleitung, wie man das macht. Deshalb möchte ich euch kurz mal sagen, wie man ein SVG Icon als Menü Icon für ein Custom Post Type in WordPress festlegen kann.
Mit WordPress 3.8 hat sich das Design im Backend geändert und damit eingezogen sind auch dashicons, die man einfach verwenden kann (Using WordPress 3.8′s dashicons in your theme or plugin). Aber was ist wenn man ein andere Icon verwenden will, dass nicht im dashicon-set ist? Dafür kann man SVG verwenden.
Was ist SVG?
SVG steht für scalable vector graphics und ist somit eine Vektordatei. Die Vorteile liegen auf der Hand: Ein SVG ist nicht wie ein Bild an eine Größe gebunden und kann verlustfrei skaliert werden und SVG sind auch nicht farblich vordefiniert. Somit kann das Icon, dass wir verwenden, immer das Farbschema adaptieren.
Wo finde ich SVGs?
Es gibt viele Webseiten die kostenlos Icons zum runterladen an bieten. Ich verwende gerne Flaticon.com. Der Dienst hat viele schöne Icons, die man nicht nur als SVG sondern auch als PNG oder Webfont runterladen kann.
Für unser Vorhaben laden wir natürlich SVG runter. Wenn man sich die Datei dann in einem Text Editor anschaut sieht man in den Quellcode der Vektordatei:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 16 16" xml:space="preserve" fill="#000000">
<path d="M 38.85,12.153c-8.202-8.202-21.498-8.202-29.697,0.00L 4.908,7.908 c 10.545-10.545, 27.642-10.545, 38.187,0.00L 38.85,12.153z M 15.516,18.516L 11.274,14.271c 7.029-7.029, 18.426-7.029, 25.452,0.00l-4.242,4.245 C 27.801,13.827, 20.199,13.827, 15.516,18.516z M 39.00,45.00c0.00,1.659-1.341,3.00-3.00,3.00L12.00,48.00 c-1.659,0.00-3.00-1.341-3.00-3.00l0.00,-3.00 c 0.87-4.275, 3.855-7.89, 7.518-10.002 C 15.564,30.567, 15.00,28.851, 15.00,27.00c0.00-4.971, 4.029-9.00, 9.00-9.00s 9.00,4.029, 9.00,9.00c0.00,1.851-0.564,3.567-1.518,4.998C 35.145,34.11, 38.13,37.725, 39.00,42.00L39.00,45.00 z M 24.00,24.00C 22.341,24.00, 21.00,25.341, 21.00,27.00s 1.341,3.00, 3.00,3.00s 3.00-1.341, 3.00-3.00S 25.659,24.00, 24.00,24.00z M 32.448,42.00C 31.209,38.514, 27.915,36.00, 24.00,36.00s-7.209,2.514-8.448,6.00 L32.448,42.00 z" ></path>
</svg>
SVG mit Base64 encoden
Um dieses Icon später in WordPress verwenden zu können benutzen wir einen kleinen Trick (bzw. ich finde es ist ein Trick). Kopiert den ganzen Code der Vektordatei und encoded es mit Base64. Dafür könnt ihr diese Webseite verwenden: Base64 Decoder Encoder. Dann bekommt ihr diesen Text als Base64 String, der wie folgt aussieht:
PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBJ Y29Nb29uLmlvIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEv L0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4N CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3Jn LzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0i MHB4IiB5PSIwcHgiIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZpZXdCb3g9IjAgMCA0OCA0 OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUi IGZpbGw9IiMwMDAwMDAiPg0KCTxwYXRoIGQ9Ik0gMzguODUsMTIuMTUzYy04LjIwMi04LjIwMi0y MS40OTgtOC4yMDItMjkuNjk3LDAuMDBMIDQuOTA4LDcuOTA4IGMgMTAuNTQ1LTEwLjU0NSwgMjcu NjQyLTEwLjU0NSwgMzguMTg3LDAuMDBMIDM4Ljg1LDEyLjE1M3ogTSAxNS41MTYsMTguNTE2TCAx MS4yNzQsMTQuMjcxYyA3LjAyOS03LjAyOSwgMTguNDI2LTcuMDI5LCAyNS40NTIsMC4wMGwtNC4y NDIsNC4yNDUgQyAyNy44MDEsMTMuODI3LCAyMC4xOTksMTMuODI3LCAxNS41MTYsMTguNTE2eiBN IDM5LjAwLDQ1LjAwYzAuMDAsMS42NTktMS4zNDEsMy4wMC0zLjAwLDMuMDBMMTIuMDAsNDguMDAg Yy0xLjY1OSwwLjAwLTMuMDAtMS4zNDEtMy4wMC0zLjAwbDAuMDAsLTMuMDAgYyAwLjg3LTQuMjc1 LCAzLjg1NS03Ljg5LCA3LjUxOC0xMC4wMDIgQyAxNS41NjQsMzAuNTY3LCAxNS4wMCwyOC44NTEs IDE1LjAwLDI3LjAwYzAuMDAtNC45NzEsIDQuMDI5LTkuMDAsIDkuMDAtOS4wMHMgOS4wMCw0LjAy OSwgOS4wMCw5LjAwYzAuMDAsMS44NTEtMC41NjQsMy41NjctMS41MTgsNC45OThDIDM1LjE0NSwz NC4xMSwgMzguMTMsMzcuNzI1LCAzOS4wMCw0Mi4wMEwzOS4wMCw0NS4wMCB6IE0gMjQuMDAsMjQu MDBDIDIyLjM0MSwyNC4wMCwgMjEuMDAsMjUuMzQxLCAyMS4wMCwyNy4wMHMgMS4zNDEsMy4wMCwg My4wMCwzLjAwcyAzLjAwLTEuMzQxLCAzLjAwLTMuMDBTIDI1LjY1OSwyNC4wMCwgMjQuMDAsMjQu MDB6IE0gMzIuNDQ4LDQyLjAwQyAzMS4yMDksMzguNTE0LCAyNy45MTUsMzYuMDAsIDI0LjAwLDM2 LjAwcy03LjIwOSwyLjUxNC04LjQ0OCw2LjAwIEwzMi40NDgsNDIuMDAgeiIgPjwvcGF0aD4NCjwv c3ZnPg==
Diesen String können wir nun in WordPress verwenden.
SVG als Menü Icon definieren
Um ein Post Type in WordPress anzulegen benutzt man die Funktion register_post_type() (Codex). Praktisch ist, dass man als Argument ein menu_icon festlegen kann. Nun kommt der Trick. Um ein SVG als Icon fest zu legen tragt ihr als Value für menu_icon den Base64 encoded String ein. Damit WordPress auch weiß was das ist müsst ihr davor noch folgendes schreiben:
data:image/svg+xml;base64,
Damit weiß WordPress wie es den String zu interpretieren hat und stellt euch das Icon dann schön im Menü dar.
$podcast_args = array(
'labels' => array(
'name' => __( 'Podcasts', 'sample_plugin' )
),
'public' => true,
'has_archive' => true,
'description' => __( 'A sample Plugin', 'sample_plugin' ),
'menu_icon' => 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEljb01vb24uaW8gLS0+IDwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+IDxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIGZpbGw9IiMwMDAwMDAiPiA8cGF0aCBkPSJNIDM4Ljg1LDEyLjE1M2MtOC4yMDItOC4yMDItMjEuNDk4LTguMjAyLTI5LjY5NywwLjAwTCA0LjkwOCw3LjkwOCBjIDEwLjU0NS0xMC41NDUsIDI3LjY0Mi0xMC41NDUsIDM4LjE4NywwLjAwTCAzOC44NSwxMi4xNTN6IE0gMTUuNTE2LDE4LjUxNkwgMTEuMjc0LDE0LjI3MWMgNy4wMjktNy4wMjksIDE4LjQyNi03LjAyOSwgMjUuNDUyLDAuMDBsLTQuMjQyLDQuMjQ1IEMgMjcuODAxLDEzLjgyNywgMjAuMTk5LDEzLjgyNywgMTUuNTE2LDE4LjUxNnogTSAzOS4wMCw0NS4wMGMwLjAwLDEuNjU5LTEuMzQxLDMuMDAtMy4wMCwzLjAwTDEyLjAwLDQ4LjAwIGMtMS42NTksMC4wMC0zLjAwLTEuMzQxLTMuMDAtMy4wMGwwLjAwLC0zLjAwIGMgMC44Ny00LjI3NSwgMy44NTUtNy44OSwgNy41MTgtMTAuMDAyIEMgMTUuNTY0LDMwLjU2NywgMTUuMDAsMjguODUxLCAxNS4wMCwyNy4wMGMwLjAwLTQuOTcxLCA0LjAyOS05LjAwLCA5LjAwLTkuMDBzIDkuMDAsNC4wMjksIDkuMDAsOS4wMGMwLjAwLDEuODUxLTAuNTY0LDMuNTY3LTEuNTE4LDQuOTk4QyAzNS4xNDUsMzQuMTEsIDM4LjEzLDM3LjcyNSwgMzkuMDAsNDIuMDBMMzkuMDAsNDUuMDAgeiBNIDI0LjAwLDI0LjAwQyAyMi4zNDEsMjQuMDAsIDIxLjAwLDI1LjM0MSwgMjEuMDAsMjcuMDBzIDEuMzQxLDMuMDAsIDMuMDAsMy4wMHMgMy4wMC0xLjM0MSwgMy4wMC0zLjAwUyAyNS42NTksMjQuMDAsIDI0LjAwLDI0LjAweiBNIDMyLjQ0OCw0Mi4wMEMgMzEuMjA5LDM4LjUxNCwgMjcuOTE1LDM2LjAwLCAyNC4wMCwzNi4wMHMtNy4yMDksMi41MTQtOC40NDgsNi4wMCBMMzIuNDQ4LDQyLjAwIHoiID48L3BhdGg+PC9zdmc+',
'can_export' => 'true'
);
if ( !post_type_exists( 'podcast' ) ) {
register_post_type( 'podcast', $podcast_args );
}
Das ganze sieht dann im Backend so aus:
(Bild: CC BY-SA 2.0 von Yuko Honda auf Flickr)