WordPress代替ポストスタイリングとブートストラップcol-offsetを使用したカスタムコンテンツショートコード

Question

カスタムコンテンツショートコードプラグインを使用して、代替スタイリングでポストをループ内にスタイルしようとしています。このようなものがいくつかあります。

Example image of post styling using bootstrap col-offset

これは私が私が表示したい何

<?php start_short(); ?> 
    [loop type=service orderby=date order=ASC] 
    <div class="jumbo" style="background-image: url([field image-url]);"> 
     <div class="blackBG row"> 
      <div class="col-md-5 col-md-offset-7 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s"> 
       <h1><b class="square BGsec">1</b><small>[field title]</small></h1> 
       <p>[content more=true more=... length=200]</p> 
       <a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a> 
      </div> 
     </div> 
    </div> 
    [/loop] 
    <?php end_short(); ?> 

をしようとしているものですです：

<div class="jumbo" style="background-image: url([field image-url]);"> 
     <div class="blackBG row"> 
      <div class="col-md-5 col-md-offset-7 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s"> 
       <h1><b class="square BGsec">1</b><small>[field title]</small></h1> 
       <p>[content more=true more=... length=200]</p> 
       <a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a> 
      </div> 
     </div> 
    </div> 
    <div class="jumbo" style="background-image: url([field image-url]);"> 
     <div class="blackBG row"> 
      <div class="col-md-5 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s"> 
       <h1><b class="square BGsec">1</b><small>[field title]</small></h1> 
       <p>[content more=true more=... length=200]</p> 
       <a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a> 
      </div> 
     </div> 
    </div> 
    <div class="jumbo" style="background-image: url([field image-url]);"> 
     <div class="blackBG row"> 
      <div class="col-md-5 col-md-offset-7 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s"> 
       <h1><b class="square BGsec">1</b><small>[field title]</small></h1> 
       <p>[content more=true more=... length=200]</p> 
       <a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a> 
      </div> 
     </div> 
    </div> 

どのように私はこれを達成することができますか？

Answer 1

上記のコードは、すべての投稿にcol-md-offset-7の単一のクラスでWordPressで投稿のループを生成していました。

jQueryを使用しても、別の投稿からクラスを削除する機能がありました。

$("div.service-post:even").removeClass("col-md-offset-7");