0

Wordpress で Boostrap を有効にするために、Roots テーマを使用しています。ただし、記事をグリッド形式で複数の行に表示しようとすると、問題が発生します。

たとえば、4 番目の div の 4 つのインスタンスをループする<div class="span4>と、次の行にきちんと折り返されません。<div class="row">ループが 3 回実行されたら、Wordpress ループを使用して呼び出すにはどうすればよいですか

4

1 に答える 1

1

これを行うには、いくつかの良い方法があります。個人的には、Zurb Foundation のBlock Gridなどを使用することをお勧めします。このマークアップにより<ul>、投稿に通常の順序付けられていないリストを使用するだけで、将来の任意の時点で列の数を簡単に変更できるだけでなく、異なる数の列が使用されるブレークポイントを設定できるようになります。

この機能を CSS で自分で作成することもできますが、ブートストラップ クラスを保持し、テーマ内で常に 3 行にハード コードするだけの場合は、次のようにすることができます。基本的に、変数を使用してポスト ループの反復を追跡し、3 つのポストごとにリセットして、行 div を作成し、必要に応じて閉じます。

 <?php
    if ( have_posts() ) :
       $postCount = 0;
       $rowOpen = false;
       while ( have_posts() ) :
          the_post(); 
          if ($postCount == 0) :
             if ($rowOpen) : ?>
               </div> <!-- close the div for the row -->
             <?php endif; ?>
             <div class="row">
             <?php $rowOpen = true; 
          endif; ?>
          <div class="col-lg-4">
            <!-- here's where your post content goes, i.e.: -->
              <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
              <div class="entry">
               <?php the_content(); ?>
              </div>
          </div>
          <?php $postCount++;
          if ($postCount == 3) : # 3 because we've already incremented it
            $postCount = 0; # reset post count every third item
          endif;
        endwhile;
        if ($rowOpen) : ?>
          </div> <!-- close the div for the row -->
        <?php endif; 
      else : ?>
      <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
      <?php endif; ?>

私が目にする問題は、通常のブートストラップ グリッドと通常の基盤グリッドでは、行クラスに列を含める必要があるため、量に基づく何らかの条件なしで投稿を一覧表示する簡単な方法はないと思います。行ごとの列数、プログラムによる。CSS のみのソリューションは素晴らしいですが、独自のグリッドを作成したり、Foundations ブロック グリッドを使用したりしないソリューションは知りません。

于 2013-10-17T17:56:12.047 に答える