ワードプレスでdivを調べる方法

Question

私はDBをループして、私が望む結果を得ることができました。しかし、結果が表示される方法は、私が達成しようとしているものです。ここでは、ワードプレス result of the page when i implemented the code below This what i really want to achieveにDBから

<?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を私の結果を表示するコードで、ここでは同じウェブサイトのHTMLバージョンのコードです

<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> 

私の質問は、私がどのようにできています私のHTMLと同じインターフェースを持つことができるように私のワードプレスバージョンで2番目のクラスを達成してください。

Answer 1

あなたの投稿が奇妙か偶数かをチェックする必要があります。 カウンターを持っているときに、投稿が偶数か奇数かどうかを確認するには、クラスを追加するのが奇妙なときに少しします。

<?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;?> 

このようなものが多分あります。