wie durch divs in WordPress

Question

Ich konnte die DB durchlaufen und Ergebnisse, die ich wollte. Wie das Ergebnis angezeigt wird, versuche ich zu erreichen. Hier ist der Code mein Ergebnis aus der DB in Wordpress result of the page when i implemented the code below This what i really want to achieve

<?php $loop = new WP_Query(array('post_type' => 'education_detail', 'orderby' => 'post_id', 'order' => 'ASC'));?> 

       <?php while($loop->have_posts()) : $loop->the_post();?> 


        <div class="resume"> 
        <ul class="timeline"> 
         <li class="timeline timeline-inverted"> 
          <div class="posted-date"> 
           <span class="month"><?php the_field('resume_year')?></span> 
          </div><!-- /posted-date --> 
          <div class="timeline-panel wow fadeInUp"> 
           <div class="timeline-content"> 
            <div class="timeline-heading"> 
             <h3><?php the_field('school_name')?></h3> 
             <span><?php the_field('course_study')?></span> 
            </div><!-- /timeline-heading --> 

            <div class="timeline-body"> 
             <p><?php the_field('course_description')?></p> 
            </div><!-- /timeline-body --> 
           </div> <!-- /timeline-content --> 
          </div><!-- /timeline-panel --> 
         </li> 
        </ul> 
       </div> 


       <?php endwhile;?> 

Nevertheles Anzeigen, hier ist der Code für die HTML-Version der gleichen Website

<ul class="timeline"> 
         <li> 
          <div class="posted-date"> 
           <span class="month">2007-2011</span> 
          </div><!-- /posted-date --> 

          <div class="timeline-panel wow fadeInUp"> 
           <div class="timeline-content"> 
            <div class="timeline-heading"> 
             <h3>Bachelor degree certificate</h3> 
             <span>BA(Hons) in UI Engineering, Arts University, Pabna, USA</span> 
            </div><!-- /timeline-heading --> 

            <div class="timeline-body"> 
             <p>I have completed UI Engineering degree from ABC University, Boston, USA at feel the charm of existence in this spot, which was creat.</p> 
            </div><!-- /timeline-body --> 
           </div> <!-- /timeline-content --> 
          </div><!-- /timeline-panel --> 
         </li> 

         <li class="timeline-inverted"> 
          <div class="posted-date"> 
           <span class="month">2004-2006</span> 
          </div><!-- /posted-date --> 

          <div class="timeline-panel wow fadeInUp"> 
           <div class="timeline-content"> 
            <div class="timeline-heading"> 
             <h3>Higher Secondary certificate</h3> 
             <span>Typography Arts, FA College, New York, USA</span> 
            </div><!-- /timeline-heading --> 

            <div class="timeline-body"> 
             <p>From this college of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend.</p> 
            </div><!-- /timeline-body --> 
           </div> <!-- /timeline-content --> 
          </div> <!-- /timeline-panel --> 
         </li> 

Meine Frage ist, wie kann ich erreichen Sie die zweite Klasse in meiner WordPress-Version, so dass ich die gleiche Schnittstelle wie meine HTML

Answer 1

haben

Sie müssen einen Zähler machen, um zu überprüfen, ob Ihr Beitrag ungerade oder gerade ist. Wenn Sie Ihren Zähler haben, tun Sie ein wenig, wenn Sie überprüfen, ob der Beitrag gerade oder ungerade ist, wenn Sie eine ungerade hinzufügen, fügen Sie eine Klasse hinzu.

<?php while($loop->have_posts()) : $loop->the_post();?> 
        <div class="resume"> 
        <ul class="timeline"> 
         <?php 
         $postcount++; 
         if(($postcount % 2) == 0){ 
          echo '<li class="timeline">'; 
         }else{ 
          echo '<li class="timeline-inverted">'; 
         } 
         ?> 
          <div class="posted-date"> 
           <span class="month"><?php the_field('resume_year')?></span> 
          </div><!-- /posted-date --> 
          <div class="timeline-panel wow fadeInUp"> 
           <div class="timeline-content"> 
            <div class="timeline-heading"> 
             <h3><?php the_field('school_name')?></h3> 
             <span><?php the_field('course_study')?></span> 
            </div><!-- /timeline-heading --> 

            <div class="timeline-body"> 
             <p><?php the_field('course_description')?></p> 
            </div><!-- /timeline-body --> 
           </div> <!-- /timeline-content --> 
          </div><!-- /timeline-panel --> 
         </li> 
        </ul> 
       </div> 
<?php endwhile;?> 

So etwas vielleicht.