the_post_thumbnail mal links mal rechts

MacTV

N´bend
Das mit der neuen Funktion the_post_thumbnail habe ich soweit verstanden
und auch in mein Theme eingebaut.

<?php the_post_thumbnail('thumbnail', array('class' => 'alignright')); ?>

<?php the_post_thumbnail('thumbnail', array('class' => 'alignleft')); ?>

Nun möchte ich gerne, dass das "the_post_thumbnail" mal links und mal rechts erscheint.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

kaiser

Na dann musst Du jedem 2ten Post eine zusätzlich andere class mitgeben, weil Du dem Thumbnail nicht einmal links und dann rechts zuweisen kann, sondern nur eine Definition:

PHP

<?php the_post_thumbnail('thumbnail', array('class' => 'thumb')); ?>

du würdest den artikel-container-div dann vermutlich mit soetwas wie einer "left" und den folgenden mit einer "right"-class versehen und in deiner zB style.css dann ungefähr folgendes schreiben:

Code

div.[COLOR=Red]left[/COLOR] img.thumb { position: relative; top: 0; [COLOR=Red]left[/COLOR]: 0; }
div.[COLOR=DeepSkyBlue]right[/COLOR] img.thumb { position: relative; top: 0; [COLOR=DeepSkyBlue]right[/COLOR]: 0; }

MacTV

Ok ... und wie lautet der Befehl für jeden zweiten Post ?

Momentan ist ja nur

PHP

<?php the_post_thumbnail('thumbnail', array('class' => 'alignleft')); ?></a>

bzw. in meiner CSS

Code

.wp-post-image {
    padding:2px;
    margin-right: 10px;
    margin-top: 1px;
    margin-left: 0px;
       background-color:#eee;
    }

drin .

kaiser

Dafür gibt´s keinen Befehl. Da musst Du durchzählen. Such einmal im Forum. Dazu gibt´s einige Artikel

MacTV

Hallo kaiser,
nochmal Danke für den Tip ... aber ich suche seit 20:00 Uhr das Forum durch.

und habe nur das gefunden...

Sorry.

kaiser

Kein Problem. Du hast schon das Richtige gefunden. Würde aber noch einfach gehen, als das hier:

PHP

[COLOR=#000000]<div class="post" id="post-[COLOR=#0000BB]<?php $i[/COLOR][COLOR=#007700]++; echo [/COLOR][COLOR=#0000BB]$i [/COLOR][COLOR=#007700];[/COLOR][COLOR=#0000BB]?>[/COLOR]">
....
</div>[/COLOR]

...indem Du wie hier beschrieben ist zuerst herausfindest, ob es sich um einen Artikel mit gerader oder ungerader Zahl handelt (in der Zählreihe) und das dann in eine $variable abspeicherst. Dann machst Du etwas wie das hier:

PHP

<?php $var = usw.sieheLink;
foreach ($var as $v) { ?>
<div class="<?php if ( $v == "gerade" ) { echo "odd"; } else { echo "even"; } ?>">
<p> Hier_kommt_der_Inhalt_Deines_Artikels </p>
</div>

... und in Deiner Style.css definierst Du bloß noch ...

Code

.odd { background: (zB)#ccc; }
.even { background: (zB)#009ee0; }

P.s: (zB) gehört nicht zum Code, sondern markiert bloß das die Farbe ein Beispiel ist.

kaiser

Kein Problem. Du hast schon das Richtige gefunden. Würde aber noch eleganter gehen, als das hier:

PHP

[COLOR=#000000]<div class="post" id="post-[COLOR=#0000bb]<?php $i[/COLOR][COLOR=#007700]++; echo [/COLOR][COLOR=#0000bb]$i [/COLOR][COLOR=#007700];[/COLOR][COLOR=#0000bb]?>[/COLOR]">
....
</div>[/COLOR]

...indem Du wie hier beschrieben ist zuerst herausfindest, ob es sich um einen Artikel mit gerader oder ungerader Zahl handelt (in der Zählreihe) und das dann mit "gerade" "ungerade" belegst. Das spart etwas Css. Du machst dann also etwas wie das hier:

PHP

[COLOR=#B1B100]
[/COLOR]<?php 
[COLOR=#B1B100][/COLOR][COLOR=Black][COLOR=#B1B100][/COLOR][/COLOR]$i = 0;
[COLOR=#000000][COLOR=#007700]while ([/COLOR][COLOR=#0000BB]have_posts[/COLOR][COLOR=#007700]()) : [/COLOR][COLOR=#0000BB]the_post[/COLOR][COLOR=#007700]();[/COLOR][/COLOR]
?>
<div class="<?php $i++; if ([COLOR=Black][COLOR=#B1B100]if[/COLOR][COLOR=#009900]([/COLOR][COLOR=#000088]$i[/COLOR][COLOR=#339933]%[/COLOR][COLOR=#800080]2[/COLOR][COLOR=#009900])) { echo [/COLOR][/COLOR]"even"; } else { echo "odd"; } ?>">
<p> Hier_kommt_der_Inhalt_Deines_Artikels </p>
</div>


<?php } ?>

Alles anzeigen

... und in Deiner Style.css definierst Du bloß noch ...

Code

.odd { background: (zB)#ccc; }
.even { background: (zB)#009ee0; }

P.s: (zB) gehört nicht zum Code, sondern markiert bloß das die Farbe ein Beispiel ist.

MacTV

Ja Wunderbar ! 1000 Dank Herr Kaiser :-)
Jetzt ist der Groschen gefallen.
Ich fasse mal zusammen.

Am Anfang des Loops baue ich einen Zähler ein:

PHP

<?php while (have_posts()) : the_post(); ?>

in

PHP

<?php [FONT=Arial Black][COLOR=Red][B]$i = 0;[/B][/COLOR][/FONT] while (have_posts()) : the_post(); ?>

Die Variante [FONT=Arial Black][COLOR=SeaGreen]$i[/COLOR][/FONT] hat nun einen Wert von 0.

Nun kann man dies als Klasse abfangen:

"Ist die Zahl gerade mach das"
"Ist die Zahl ungerade dann mach das"

Das wird erreicht, indem man bei der Variante [FONT=Arial Black][COLOR=SeaGreen]$i[/COLOR][/FONT] prüft ob die aktuelle Zahl durch 2 teilbar ist.

Also [FONT=Arial Black][COLOR=SeaGreen]$i%2[/COLOR][/FONT]

"Ist die Zahl gerade dann nimm [FONT=Arial Black][COLOR=Red]post color1[/COLOR][/FONT]"
"Ist die Zahl ungerade dann nimm [FONT=Arial Black]post color2[/FONT]"

Jetzt ist aber die Variante [FONT=Arial Black][COLOR=SeaGreen]$i[/COLOR][/FONT] immer auf 0. Deswegen muss man
am Ende der Abfrage ein [FONT=Arial Black][COLOR=Magenta]$i++[/COLOR][/FONT] setzen. Dadurch wird die Variante bei jeden
Loop um eins erhöht. Und so wird jeder Beitrag, nummeriert.

Code

<div class=<?=([B][FONT=Arial Black][COLOR=SeaGreen]$i%2[/COLOR][/FONT][/B])?"[FONT=Arial Black][COLOR=Red][B]post color1[/B][/COLOR][/FONT]":"[B][FONT=Arial Black]post color2[/FONT][/B]";[FONT=Arial Black][B][COLOR=Magenta]$i++[/COLOR][/B][/FONT];?>">

Mit dem passenden Eintrag in der CSS Datei kann man dann die Klassen steuern.

Code

.color1{background-color:red;}
.color2{background-color:green;}

oder (so hab ich es nun gemacht)

PHP

<?php 
$i++;
if ($i%2) {
    the_post_thumbnail('thumbnail', array('class' => 'thumbn1'));
}else{
    the_post_thumbnail('thumbnail', array('class' => 'thumbn2'));
}
?>

Und im CSS

Code

.thumbn1 {
    float:left;
    padding:2px;
    margin-right: 10px;
    margin-top: 0px;
    margin-left: 0px;
        background-color:#eee;
    }


.thumbn2 {
    float:right;
    padding:2px;
    margin-right: 0px;
    margin-top: 0px;
    margin-left: 10px;
        background-color:#eee;
    }

Alles anzeigen

kaiser

Ziemlich kool. Gratuliere!

Ps. Gut zusammen gefasst. Was glaubst wie sehr sich der Nächste, der das sucht, freuen wird :mrgreen:

MacTV

und so sieht das ganze dann aus: http://www.kreuznach-blog.de/blog/

http://www.kreuznach-blog.de/blog/
Wobei ich noch nicht alle Beiträge mit der neuen Funktion "the_post_thumbnail" versehen habe....

:)

kaiser

ein paar kleinigkeiten zum code noch im nachhinein:

* Shortcodes vermeiden. zB <?php statt <? Das erhöht nicht nur die Lesbarkeit

Code

<div class=<?=([B][FONT=Arial Black][COLOR=SeaGreen]$i%2[/COLOR][/FONT][/B])?"[FONT=Arial Black][COLOR=Red][B]post color1[/B][/COLOR][/FONT]":"[B][FONT=Arial Black]post color2[/FONT][/B]";[FONT=Arial Black][B][COLOR=Magenta]$i++[/COLOR][/B][/FONT];?>">

* Namen immer möglichst deutlich vergeben, weil man bei späteren änderungen den code selten noch allzu genau kennt und sonst immer alle parameter durch gehen muss. man arbeitet auch irgendwie fehlersicherer. also statt:

Code

.thumbn1 { background-color:#eee; }
.thumbn2 { background-color:#eee; }

besser class-namen wie .thumb-links und .thumb-rechts vergeben.

Schaut übrigens gut aus, deine seite.
Weiterhin noch gutes Gelingen.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

the_post_thumbnail mal links mal rechts

Jetzt mitmachen!