Ein Artikel von

SVG-Icons im WordPress – Theme twenty – twenty ergänzen

Abgelegt
Datum
Kommentare
Kommentieren
Views
331
Lesezeit
2 Min.

Im neuen WordPress Standard-Theme «twenty twenty» wird mit Ressourcen sparsam umgegangen. Das zeigt sich auch bei den verwendeten SVG-Icons, die das Theme an Bord hat.

Falls man gern weitere Icons integrieren will, muss man sich zunächst eine Quelle für solche Icons suchen und den Code (Textdatei downloaden) in die dafür zuständige PHP-Datei integrieren. Verlinkt habe ich hier zur entsprechenden Datei im Mastertheme bei Github.com.

Download SVG
So sieht in der Beispielquelle die Download-Maske für die SVG-Datei aus.

Text-Datei

Der Inhalt der später auf dem Rechner befindlichen Text-Datei sieht in unserem Beispiel so aus:

<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<title></title>
<g id="icomoon-ignore">
</g>
<path d="M329.372 374.628l-105.372-105.373v-141.255h64v114.745l86.628 86.627zM256 0c-141.385 0-256 114.615-256 256s114.615 256 256 256 256-114.615 256-256-114.615-256-256-256zM256 448c-106.039 0-192-85.961-192-192s85.961-192 192-192c106.039 0 192 85.961 192 192s-85.961 192-192 192z"></path>
</svg>

Der Teil, den man zum Einfügen in die entsprechende Datei zum Handling der SVG-Grafiken benötigt, kann angepasst werden. Ich habe mich an den anderen Einträgen orientiert. Das hat gut funktioniert.

An WordPressDatei anfügen

Den Inhalt der Icon-Datei habe ich in die Datei classes/class-twentytwenty-svg-icons.php ganz am Ende (Zeile 125) in dieser Form eingefügt:

'lesezeit' => '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<path d="M329.372 374.628l-105.372-105.373v-141.255h64v114.745l86.628 86.627zM256 0c-141.385 0-256 114.615-256 256s114.615 256 256 256 256-114.615 256-256-114.615-256-256-256zM256 448c-106.039 0-192-85.961-192-192s85.961-192 192-192c106.039 0 192 85.961 192 192s-85.961 192-192 192z"></path>
</svg>'
		

Die Größen (512×512) bitte so lassen. Diese werden später per CSS angepasst.

In die Datei inc/template-tags.php habe ich danach diese Ergänzung durchgeführt, damit vor der Ausgabe Lesezeit des Beitrages das SVG-Icon angezeigt wird.

Codeergänzung

Platz sparen

Schließlich habe ich noch zwei Ergänzungen in der style.css im Child-Theme vorgenommen, damit die Abstände des angefügten neuen Elements zu den übrigen passen.

.post-meta-wrapper {padding-left: 10px!important; }
span.abstand {margin-right: 10px!important;}

Natürlich kann man nicht nur ein einzelnes SVG-Icon auf diese Weise hinzufügen, sondern beliebig viele. Sie können in einem Schritt über die oben genannte App in einer Datei heruntergeladen werden.

Thomas hatte in einem seiner excellenten Artikel das Thema generell behandelt. Falls Sie aber nur ein, zwei neue Icons für «Twenty Twenty» braucht, kommt mir mit meiner kleinen Anleitung vielleicht auch klar.

P.S.: Ich habe jetzt keine Icon-Font-Bibliothek und auch keine WordPress Emojis oder Dashicons mehr nötig, so dass ich diese in Perfmatters abgeschaltet habe. Wieder ein Tick mehr Performance. Nun messen wird man das vermutlich nicht können :-). Egal.





Artikelautor Horst Schulte

Mein Bloggerleben reicht bis ins Jahr 2004 zurück. Damals habe ich dieses schöne Hobby für mich entdeckt. Ich bin jetzt 66 Jahre alt und lebe seit meiner Geburt in der schönen Stadt Bedburg, nicht weit von Köln entfernt. Das mit dem Schreiben ist zwar weniger geworden. Aber ab und zu schreibe ich hier und anderswo. Die sozialen Netzwerke haben die Welt verändert - nicht zum Guten!

Kommentieren


Es werden keine IP-Adressen gespeichert! Sie können, falls Sie dies möchten, auch anonym kommentieren.