Hat da keiner ne Idee wo man da was abändern muss?! :oops:
Och, naja, jede Menge Ideen. Aber "mal eben so" ein Theme anpassen …
Also, nehmen wir mal an, Du möchtest folgendes Layout: Artikel-Überschrift, darunter links ein Bild und rechts der Text. Dann hast Du (vereinfacht) innerhalb der Loop folgendes PHP:
<h2 class="entry-title"> <!-- Titel des Artikels -->
<a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a>
</h2>
<div class="entry-content"> <!-- Inhalt des Artikels, ggf. mit Bild-->
<?php the_content(); ?>
</div>
Gehen wir nun davon aus, dass der (im Editor eingegebene und dann mit Hilfe des obigen PHP-Codes aus der Datenbank abgerufenen) Inhalt aus einem Absatz besteht, der ein Bild enthält:
<p>
<img src="bild.jpg">
Hier steht noch ganz viel Text der ein bisschen beschreibt, was im Bild zu sehen ist und was der Sinn des Lebens ist und überhaupt ...
</p>
Nun war Deine Frage zunächst: "Wie bekomme ich es hin, daß der Text fein rechts vom Bild dargestellt wird?" Hierfür könnte man das Bild mit float:left nach links setzen:
.links {float: left;}
(...)
<p>
<img src="bild.jpg" class="links">
Hier steht noch ganz viel Text der ein bisschen beschreibt, was im Bild zu sehen ist und was der Sinn des Lebens ist und überhaupt ...
</p>
Hierdurch wird das Bild nach links geschoben und der Text des Absatzes "umfliesst" das Bild. Leider ist das aber nur ein Teil der Lösung, denn
- ist der Text kürzer als das Bild, umfließt auch die Überschrift des nächsten Absatz das Bild (was Dein Layout ziemlich durcheinander bringt)
- ist der Text länger als das Bild, werden die Zeilen unterhalb (und nicht neben) dem Bild fortgeführt, was auch nicht so richtig prickelnd aussieht. Hübscher wäre jedenfalls eine spaltenweise Darstellung: linke Spalte Bild, rechte Spalte Text.
Das erste Problem bekommt man recht einfach in den Griff, indem man unter dem Content "einen Schlussstrich" unter die Anordnung zieht:
<div class="entry-content"> <!-- Inhalt des Artikels, ggf. mit Bild-->
<?php the_content(); ?>
</div>
<div style="clear:both"></div>
Kniffeliger wird es beim zweiten Problem, der Anordnung in Spalten. Erste Idee wäre, z.B. festzulegen:
.links {float: left; width: 150px;}
.rechts{float: right; width: 350px;}
(...)
<p class="rechts">
<img src="bild.jpg" class="links">
Hier steht noch ganz viel Text der ein bisschen beschreibt, was im Bild zu sehen ist und was der Sinn des Lebens ist und überhaupt ...
</p>
Das haut ja nun leider gar nicht hin! Das Bild ist Bestandteil des Absatzes (der WordPress-Editor packt jedes <img>-Tag in einen Absatz!) und deshalb würde mit diesem Code erst einmal ein Absatz mit einer Breite von 350px rechts schwebend ausgegeben, in dem dann das Bild links schwebend mit einer Breite von 150px ausgegeben wird. Kurz: Das wollen wir ja nun gar nicht!
Kann man denn den Text irgendwie direkt ansprechen, etwa mit einem <span>-Tag? Nein, denn wir haben im PHP-Skript nur die Zeile
(Erfahrene PHP-Anwender würden sich an dieser Stelle vielleicht überlegen, wie man den Inhalt in seine Bestandteile zerlegt und diesen unterschiedliche Klassen zuweist. Immerhin kann man den Inhalt "content" mit <?php $content = get_the_content(); ?> einer Variablen zuordnen, die sich dann weiter bearbeiten lässt … Soviel dazu, wir wollen es nicht unnötig kompliziert machen.)
Eine weitere Lösung wäre die Eingabe von Tabellen im WordPress-Editor, bei der in der linken Spalte das Bild und in der rechten Spalte der Text steht:
<table>
<tr>
<td width="150">
<img src="bild.jpg">
</td>
<td>
<p>Hier steht noch ganz viel Text der ein bisschen beschreibt, was im Bild zu sehen ist und was der Sinn des Lebens ist und überhaupt ...</p>
</td>
</tr>
</table>
Hurra, das Layout sieht ja toll aus. Ist das die Lösung? Wohl kaum. Wer will bei jedem Artikel Tabellen anlegen? Das wäre extrem mühsam.
Deshalb hier noch ein weiterer Lösungsansatz:
In der functions.php fügen wir folgende Zeile ein:
add_theme_support( 'post-thumbnails' );
Dies ermöglicht, dass wir im Editor beim Erstellen eines Artikels ein "Artikelbild" angeben. Dieses Artikelbild kann separat vom Inhalt ausgegeben werden:
<h2 class="entry-title"> <!-- Titel des Artikels -->
<a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a>
</h2>
<div class="bild-links"> <!-- Artikelbild -->
<?php the_post_thumbnail(); ?>
</div>
<div class="entry-content"> <!-- Inhalt des Artikels -->
<?php the_content(); ?>
</div>
<div class="clear"></div>
Alles anzeigen
Hierzu fügen wir noch ein paar Zeilen im Stylesheet ein:
.bild-links{float:left; width:150px;}
.entry-content {float:left; width: 350px;}
.clear{clear:both;}
Nun sollten Bild und Text sauber voneinander getrennt in zwei Spalten stehen. (Das bei Bild und Text float:left; steht, ist ürbigens kein Tippfehler. Vielmehr werden damit die Elemente von links anfangend nebeneinander gereiht "bis kein Platz mehr ist" oder mit clear:both die Aufreihung abgeschlossen wird.)
Leider hat auch diese Methode einen Haken: kommt im Text zusätzlich ein Bild vor, steht es in der rechten Textspalte. Das Leben kann echt gemein sein.