WordPress: Bild in Widget einbauen

widget-mit-bild

Bild in Widget einbinden

Wie du vielleicht schon bemerkt hast, habe ich rechts in meiner Seitenleiste ein Bild in ein Widget eingebunden.

Das ginge zwar theoretisch mit einem Plugin, aber zu viele Plugins beeinträchtigen die Sicherheit und die Performance von WordPress.

Alles, was du brauchst: Ein Text-Widget und ein bisschen HTML-Code.

Textwidget einbauen

widget-textwidget

Das Textwidget zur Verlinkung von Bildern nutzen

Um das Bild einzubauen, zieht du zunächst ein ganz normales Textwidget in die Seitenleiste. Eingegeben wird dann aber kein Text, sondern ein Link zum entsprechenden Bild. Als Quelle kannst du theoretisch ein Bild von jeder beliebigen Webseite verwenden, aber das ist aus diversen Gründen nicht empfehlenswert:

  • Urheberrecht
  • Suchmaschinenoptimierung
  • Wenn die Quellseite das Bild löscht oder verschiebt, ist es auch in deinem Widget verschwunden

Besser ist es, das Bild in die eigene Mediathek zu laden, und dann aus dem Widget eine Verknüpfung anzulegen. Was du dazu brauchst: Den Pfad zum Bild und den passenden HTML-Code.

Pfad zum Bild herausfinden

widget-bild-url

Pfad zum Bild herausfinden

In der Mediathek klickst du auf Medium Bearbeiten. Es öffnet sich dann ein Fenster, das diese Informationen liefert:

  1. Datei-URL
  2. Dateityp
  3. Dateigröße
  4. Abmessungen

Am wichtigsten ist die Datei URL. Die brauchst du, um das Bild zu verknüpfen. Kopiere den Code und füge ihn dann in das Text-Widget ein. Beispiel:
<img src="http://wp-content/uploads/2016/11/name.jpg" alt="Beschreibung" />
Der Code lässt sich leicht auseinander pflücken: Die Jahreszahl und die zwei Ziffern danach werden je nach Datum des Uploads vergeben.

Auf Dateityp, Dateigröße und Abmessungen solltest du einen kurzen Blick werfen, um diese Fehler zu vermeiden:

  • Vertipper bei der Endung
  • Datei zu groß
  • Abmessungen zu groß

Das Bild als Link einfügen

Nun ist es ja schön, wenn da ein Bild im Widget strahlt, aber in der Regel soll damit irgendwas verlinkt werden, und der Besucher auf eine bestimmte Seite klicken. Dazu muss der obige HTML-Code mit einem Link ergänzt werden. Als Beispiel zeige ich dir hier den Code für das Widget auf meiner Seite. Der Link auf die Zielseite umschließt dabei das Bild wie ein Sandwich. Erst kommt das öffnende a-href-Tag, dann das Bild, dann das schließende </a>.

widget-textwidget-bearbeitet

Das Bild optimieren

onlineshops-mit-wordpress-breite240
Falls jetzt alles passt, kannst du noch ein bisschen Feintuning betreiben, und zwar in deinem Bildbearbeitungsprogramm. Da ein Bild innerhalb eines Widget auf allen Seiten angezeigt wird, sollte die Dateigröße so klein wie möglich sein. Die Bildgröße kann zumeist reduziert werden. Probiere es mal mit einer Breite von 240 Pixel.

Kompression optimieren

bildkompression
Auch mit einer stärkeren JPG-Komprimierung kann das Bild noch einen Tick schneller geladen werden. Lade dann das Bild noch einmal hoch. Achtung: Dabei musst du einen neuen Namen eingeben, und die URL noch einmal im Widget anpassen.

Schreibe einen Kommentar

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