19. September 2017 - 19:07 Uhr
Start » Neues » WordPress – Grafik im Widget Header hinzufügen

WordPress – Grafik im Widget Header hinzufügen

Ihr möchtet gerne eine Grafik (Bild/Icon) in eurer Widget oder Text-Widget (wie in dem Beispiel) implementieren, am besten vor dem Titel, also der Überschrift vom Widget.
Wigdet Header Icon Grafik wuuza.de

Zuvor müsst ihr natürlich noch in der WordPress Admin Oberfläche unter Widgets ein Text Widget erstellt solltet ihr es nicht bereit gemacht haben.

Das hinzufügen einer Grafik ist eigentlich ganz einfach und geht ohne das ihr weitere WordPress Erweiterungen benötigt oder Ähnliches.
Dafür benutzt ihr einfach euren Browser besucht eure Seite und drückt die F12 Taste auf eurer Tastatur.
Nun öffnet sich die die Entwicklungsumgebung (Developer Tool) von eurem Browser (mit Firefox und Google Chrome getestet)
Unten rechts in der Leiste von der Entwicklungsumgebung habt ihr ein „Untersuchungswerkzeug“ mit dem ihr einzelne Elemente auf eurer Seite inspizieren könnt.

In Firefox ist ein kleines Quadrat mit einem Mauszeiger (Bild 1), bei Google Chrome ist es die Lupe (Bild 2), alles andere ist fast identisch.

Wir wählen also das Objekt auf unserer Seite aus und gucken es uns an.

Firefox
Widget Header Icon Grafik 1 wuuza.de

Google Chrome
Widget Header Icon Grafik 2 wuuza.de

< div id="text-2" class="widget widget-text">
Das haben wir gesucht und dem möchten wir nun gerne noch das RSS Icon vor den Titel verpassen.
Jedes Widget wird mit einer eignen id=“*“ versehen, so ist es uns also möglich direkt dieses Widget anzusteuern.

Nun geht ihr in euere WordPress Admin Oberfläche unter -> Design -> anpassen und fügt den folgenden Code in eure „style.css“ ein oder je nachdem welches Design ihr nutzt, viele Designs haben eine Option um zusätzlichen CSS Code im Headerbereich hinzuzufügen.
Solltet ihr Jetpack nutzen geht in -> Design -> CSS bearbeiten

In meinem Fall nutzen wir diesen Code:

#text-2 h4 {
background: url("http://wuuza.de/wp-content/plugins/wp-rss-multi-importer/images/rss.png") no-repeat scroll left transparent;
padding-left: 20px;
}

Das #text-2 spricht genau dieses Widget an,
h4 steht für die Formatierung der Überschrift,
background: url definiert wo ich das Icon auf meinem Server habe damit es auch angezeigt werden kann inklusive einige weitere kleine CSS Deklarationen,
padding-left: steht für den Innenabstand vom Rahmen links

Hier sind eurer Kreatitiät keine Grenzen gesetzt denn es lässt sich alles per CSS umsetzen.

Viel Spaß damit

 

Siehe auch

wuuza.d Dia de Los Muertos_1

Día de los Muertos – Der Tag der Toten

Día de los Muertos – Der Tag der Toten In wenigen Monaten neigt sich das ...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.