Sich selber auf der eigenen Webseite vorzustellen ist natürlich Pflicht. Nur wie kann man dies auf einfache Weise und ohne besondere HTML-Kenntnisse bewerkstelligen? Klar, einige Themes (z.B. mein Theme ‚ACHTZEHN‘) haben dafür eigens vorbereitete Theme-Optionen, in die lediglich noch Überschrift und Text eingegeben und ein Bild oder Logo per Dialog eingebunden werden muss. Was aber, wenn das WordPress-Theme diese Möglichkeit nicht bietet?

Wie wäre es, wenn wir das „Text“-Sidebar-Widget dazu nutzen und die Vorstellung in die Sidebar einbinden? Coole Idee, oder? Und eventuell noch ein Bild oder Logo dazu? Okay, kommt sofort.

Wie ich in diesem Artikel bereits gezeigt habe, ist es möglich das „Text“-Sidebar-Widget nicht nur mit reinem Text, sondern auch mit HTML-Code zu füttern.

Jedes halbwegs moderne WordPress-Theme sollte über mindestens eine Sidebar verfügen, die mit dem „Text“-Widget bestückt werden kann.

Setzen wir voraus, dass auch euer Theme über diese Möglichkeit verfügt, öffnet ihr die Widgets über das „Design“-Menü und klickt auf den Punkt „Widgets“. Zieht nun per Drag & Drop das „Text“-Widget in die entsprechende Sidebar.

Das Eingabefeld „Titel“ bestückt ihr mit einer aussagekräftigen Überschrift und darunter ist dann massig Platz für eure kurze (oder auch lange) Vorstellung.

Speichern nicht vergessen.

Um das ganze noch etwas aufzupeppen wollen wir noch ein Bild oder Logo in das Widget einfügen. Wie bereits erwähnt können wir in das „Text“-Widget auch HTML-Code einfügen und Inline-Styles nutzen.

Ladet die Datei mit eurem Bild oder Logo über den Menüpunkt „Medien“ -> „Datei hinzufügen“ auf euren Webserver hoch. Ist der Upload beendet, klickt ihr auf den Button „Bearbeiten“. Ihr findet nun auf der rechten Seite einen Bereich der mit „Speichern“ überschrieben ist. Hier findet ihr unter anderem den Link zur Bilddatei (Datei URL), die wir gleich noch benötigen. Markiert den Link mit der Maus und kopiert ihn in die Zwischenablage.

Wechselt nun wieder zum Text-Widget und fügt an der Stelle, an der das Bild erscheinen soll, folgendes hinzu:

<img src="http://deinedomain.de/deinbild.jpg" style="float: right; margin: 0 0 20px 20px" alt="Meine Bildbeschreibung">

Kurz zur Erlärung: mittels des img-Tags binden wir die Bilddatei in den HTML-Code ein. Das Attribut src bestimmt die URL zu unserer Bilddatei, also wo die Datei auf dem Webserver gespeichert ist. Hier fügt ihr die Datei URL ein, die wir zuvor in die Zwischenablage kopiert haben.

Es folgen mit dem Attribut style einige Deklarationen, sogenannte Inline-styles. In diesem Fall reihen wir das Bild mittels float rechts in den Textfluss ein und geben dem Bild mit margin einen Außenabstand nach unten und nach links, damit es einen gleichmäßigen Abstand zum Text erhält.

Das Attribut alt ist eine Pflichtangabe bei Bildern und wird angezeigt, wenn das Bild nicht geladen werden kann.

Und so sieht das Ganze dann in der Sidebar, hier am Beispiels meines kommenden Themes ‚ZWANZIG‘, aus: