Ein Grafiklogo per Text-Widget mal schnell auf einer WordPress-Seite einblenden

Manchmal benötigt man einfach mal schnell eine Hinweisgrafik auf seiner WordPress-Seite. Ein Szenario könnte zum Beispiel sein, das man seine Kunden auf eine bestimmte Situation wie die anstehenden Betriebsferien hinweisen möchte. Jetzt kann man natürlich das vorhandene Layout überarbeiten und sich viel Arbeit machen. Aber dass es auch deutlich einfacher geht, möchte ich Ihnen nachfolgend kurz zeigen.

1. Schritt
Sie benötigen eine entsprechende Grafikdatei mit transparentem Hintergrund. Dafür eignet sich entweder eine GIF Datei oder eine PNG Datei wenn eine höhere Qualität der Grafik erwünscht ist. PNG kann besonders dann sinnvoll sein, wenn die Grafik mit Farbverläufen versehen ist. Diese Verläufe sehen in einer GIF Datei meist nicht mehr so schön aus. Allerdings ist eine PNG Datei beim Speicherbedarf etwa 2-3-mal so groß wie eine GIF Datei. Am besten ausprobieren und schauen welche Datei am Ende besser aussieht.

2. Schritt
Jetzt laden Sie die Grafikdatei, zum Beispiel mit FileZilla, in Ihr WordPress-Verzeichnis. Dafür nutze ich in der Regel den schon vorhandenen Ordner „uploads“. Wenn die Grafikdatei kopiert ist, dann sollte diese Grafik über einen Browser mit der Adresse http://www.IhreDomain.de/uploads/IhreGrafik.png abrufbar sein. Wenn das funktioniert, dann geht’s weiter. Wenn es nicht funktioniert, dann unbedingt die Schreibweise überprüfen. Gerade bei Dateinamen unterscheidet der Browser ganzgenau zwischen Groß- und Kleinschreibung.

3. Schritt
Jetzt gehen Sie in Ihr WordPress-Dashboard und wählen dort die Widgets aus. Anschließend ziehen Sie ein Text-Widget in eine Seitenleiste die beim laden Ihrer Seite angezeigt wird. Auf manchen Themes von WordPress eignet sich auch der Fußbereich der Seite um das Text-Widget einzubinden.

4. Schritt
Fügen Sie jetzt bitte den folgenden Text in die TextBox ein.

<div style=“position:absolute; top:150px; left:150px“> <img src=“/uploads/IhreGrafik.png“ width=“300″ height=“300″ alt=“Hinweisbild“> </div>

Passen Sie noch die Pfadinformation, Dateinamen und die beiden Größenangaben an. Den Titel der TextBox lassen Sie bitte leer.

Jetzt noch speichern und nach einem aktualisieren der Internetseite sollte die Grafik nun sichtbar sein. Über die Angaben „top“ und „left“ können Sie die Position steuern an der die Grafik auf Ihrer Seite eingeblendet wird. Die Grafik wird immer solange angezeigt, wie die ausgewählte Seitenleiste sichtbar ist. Sollten Sie ein Theme nutzen, wo es extra für die Startseite eine eigene Seitenleiste gibt, dann könnten Sie die Grafik auch nur auf der Startseite anzeigen lassen.

Lediglich zu beachten gilt, dass es natürlich etwas Ladezeit kosten kann, wenn eine zusätzliche Grafik geladen wird. Und man sollte berücksichtigen, dass die Grafik immer fix an der vorgegeben Stelle steht auch wenn sich das Browserfenster in der Größe ändert. Deshalb sollte man möglichst die Grafik im linken oberen Bereich der Internetseite platzieren. Dadurch ist die Grafik auch bei kleineren Auflösungen bzw. Displays jederzeit gut erkennbar.

Fazit
Gerade wenn es mal schnell gehen soll oder die Einblendung nur für einen kurzen Zeitraum benötigt wird, kann diese Methode sehr hilfreich sein. Man erspart sich so zumeist die aufwendige Anpassung  irgendwelcher Kopf- oder Seitengrafiken und benötigt dafür kein zusätzliches Plugin. Und wenn die Grafik dann nicht mehr benötigt wird, einfach das Widget aus der Seitenleiste entfernen und schon ist die Grafik wieder von der Internetseite verschwunden.