Online Marketing

WordPress ist ein Blog-System für das es viele Layout-Templates gibt. Sie lassen sich leicht austauschen und es gibt sie in einer grossen Anzahl. Leider werden viele von den kostenlosen Layout-Templates nicht vor Veröffentlichung geprüft. Deshalb stellen viele User erst nach Einführung ihrer Webseite mit WordPress und einem kostenlosen Template fest, dass es erhebliche Probleme mit der Darstellung gibt. Dann beginnt ein verzweifeltes Suchen nach Lösungen, denn die Webseite ist ja schon online und der veröffentlichte Artikel wird schon verlinkt und kommentiert. Den Artikel “offline” zu nehmen wäre jetzt auch blöd. Also was tun.

Hier will ich auf eines dieser Probleme hinweisen und eine Lösung anbieten, welches ich bereits in mehreren Projekten erlebt habe. In WordPress, gerade den neueren Version, kann man sehr gut Bilder “floatend” in den Text einbauen. “Floatend” heisst, dass der Text, wie in der Zeitung um das Bild fliesst (float). Das sieht professionell aus und spart Platz. Leider sind viele Templates darauf aber nicht oder nicht richtig eingerichtet. Die Formatierung der Templates bei WordPress geschieht durch die PHP-Templates in denen HTML und PHP gemischt ist und durch CSS (cascading style sheets) in denen die Formatierungsangaben geschrieben sind. Wenn eine WordPress – Seite geladen wird, wird das Grundgerüst für die Seite von WordPress geladen, die dann das PHP-Template läd und welches die CSS-Datei läd. Dann werden die Datenbankabfragen gemacht und die Platzhalter mit den Inhalten aus der Datenbank gefüllt. Alles zusammen gibt das dann eine HTML-Seite mit Formatierung und Inhalten.

Die einzelnen Bereiche der Seite sind meist in so genannte “div-ebenen” aufgeteilt. Diesen Ebenen werden über “classes” Formateigenschaften zugeordnet. Wenn also im HTML-Code steht <div class=”haupt”> bedeutet das, dass der Bereich zwischen dem öffnenden Tag <div class=”haupt”> und dem schliessenden Tag </div> nach der Klasse “haupt” in der CSS-Datei definiert ist und deren Formatangaben folgt. Wenn also in der CSS für die Klasse “haupt” definiert ist das der Text 12 Punkt gross ist, so wird er auch in dem Bereich so dargestellt.

So funktioniert es auch mit Bildern die in den Text eingesetzt werden. Ihnen werden CSS-Klassen als Formatierung mitgegeben, die z.B. einen Rahmen um das Bild zeigen oder das Bild links “floatend” vom Text darstellen.

Manchmal aber passiert es, dass ein Bild “floatend” am Ende eines Artikels gezeigt wird und es dann in den nächsten Bereich übergeht. Das sieht dann nicht schön aus. Siehe das Bild oben.

Meist wird dabei nämlich der “clear:both;” Befehl vergessen, der den “float:right/left” Befehl zurücksetzt. Dieser muss in den den “float” Befehl folgenden Bereich eingebaut werden. Dann bleibt das Bild schön in seinem Bereich, floated und der nächste Artikel wird sauber abgegrenzt.

Beispiel:

<div class=”haupt”>
<div class=”post”>
<div class=”meta”> Gespeichert am … </div>
<div class=”text”> Der Text des Artikels <img src=”http://www…..” class=”alingleft”> mit floatendem Bild
</div>
</div>
</div>

Die Klasse “alignleft” ist in der css-Datei wie folgt definiert “.alignleft { float:left; }”. Damit das Bild aber nicht über den Rand dieses Artikels in den nächsten Artikel fliesst, muss in der einschliessenden Ebene, also “<div class=”post”> definiert werdn, dass “float” beendet wird. Das wird in der css-Datei mit dem Befehl “clear:both” gemacht. Also bei der Klasse “post” wird folgendes geschrieben: “.post { clear:both;}”. Damit weiss der Browser, dass das Bild nicht über diese Ebene weiter floaten soll. Sollte das nicht funktionieren, kann man auch noch einen “div”-Bereich extra für “clear:both” einbauen, denn man unter den Bereich, in dem sich das Bild befindet, setzt. Also “<div class=”clear”></div>” ohne Text dazwischen und in der css-Datei “.clear {clear:both;}”. Dann sollte das Ergebnis so aussehen wie hier.