Loop Problem

Gripsart

Hey Leute!
Ich möchte gerne meinen Blog als Timeline gestalten.
Das Theme habe ich soweit selber geschrieben und mir einen Bootstrap Snippet für eine Timeline rausgesucht.
Nun ist mein Problem das ich sich bei jedem Post die Class ändern muss.
Kann mir jemand sagen wie ich das am besten mache?

HTML

<li>          <div class="timeline-image">            <img class="img-circle img-responsive" src="<?php echo get_template_directory_uri(); ?>/img/blog.jpg" alt="">          </div>          <div class="timeline-panel">            <div class="timeline-heading">              <a href="<?php the_permalink() ?>" style="color: #1e71b8" rel="bookmark" class="title"></h3>                  <h3><?php the_title(); ?></h3></a>              <h4 class="subheading"><?php the_date(); ?> | <?php the_time(); ?></h4>            </div>            <div class="timeline-body">              <p class="text-muted">                <?php the_excerpt(); ?>               </p>            </div>          </div>          <div class="line"></div></li>

(Beim nächsten <li> muss dan die eine class hinzugefügt werden, beim übernächsten dann wieder nicht usw...)

Danke schonmal!

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

alchymyth

wie sieht der vollstaendige code vom ganzen loop aus?

wie soll die <li> struktur aussehen?

maxe

Ich würde dafür die post id/class nehmen: https://codex.wordpress.org/Function_Reference/post_class

Gripsart · Bildschirmfoto 2015-07-12 um 17.17.29.webp

Zitat von alchymyth

wie sieht der vollstaendige code vom ganzen loop aus?
wie soll die <li> struktur aussehen?

Die Struktur von <li> soll so aussehen:

PHP

<li>
          <div class="timeline-image">
            <img class="img-circle img-responsive" src="<?php echo get_template_directory_uri(); ?>/img/blog.jpg" alt="">
          </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <a href="<?php the_permalink() ?>" style="color: #1e71b8" rel="bookmark" class="title"></h3>
                  <h3><?php the_title(); ?></h3></a>
              <h4 class="subheading"><?php the_date(); ?> | <?php the_time(); ?></h4>
            </div>
            <div class="timeline-body">
              <p class="text-muted">
                <?php the_excerpt(); ?> 
              </p>
            </div>
          </div>
          <div class="line"></div>
</li>
<li class="timeline-inverse">
          <div class="timeline-image">
            <img class="img-circle img-responsive" src="<?php echo get_template_directory_uri(); ?>/img/blog.jpg" alt="">
          </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <a href="<?php the_permalink() ?>" style="color: #1e71b8" rel="bookmark" class="title"></h3>
                  <h3><?php the_title(); ?></h3></a>
              <h4 class="subheading"><?php the_date(); ?> | <?php the_time(); ?></h4>
            </div>
            <div class="timeline-body">
              <p class="text-muted">
                <?php the_excerpt(); ?> 
              </p>
            </div>
          </div>
          <div class="line"></div>
</li>

Alles anzeigen

Ich muss also bei jedem zweiten <li> eine Klasse hinzufügen.

Zitat von maxe

Ich würde dafür die post id/class nehmen: https://codex.wordpress.org/Function_Reference/post_class

Und dann jedem neuen Beitrag manuell die Klasse hinzufügen?
Das wäre nicht so toll ;-)

maxe

arbeite doch dann direkt mit den css Pseudoklassen: http://wiki.selfhtml.org/wiki/CSS/Selek…lasse/nth-child

Gripsart

Habe es jetzt mit PHP gelöst....

PHP

<li class="<?php $i++; if ($i % 2 !=1){echo "timeline-inverted";}?>">

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Loop Problem

Jetzt mitmachen!