PHPとブートストラップを使用してACFコンテンツのコラムを作成

Question

投稿することを決定する前に、私は同じ問題の人とこのサイトでできることすべてを読みました。何も動作していないようです...私はそれをできる限り最高に説明します、私はACF + Repeaterアドオンを使ってレストランメニューを作っています。私はブートストラップを使って物事をより簡単にするためにロードしました。私は3つの列を横切って行きたいと思っています。これはHTMLとPHP側のものです。私はBridge Themeを使用しているので、代わりにBridgeスタイルに移っていたので、Bootstrapコンテナクラスをcontainer-acfに変更しなければなりませんでした。私の目的目標もしそれのためLook Similar To Thisすべての助けに感謝します。

私の推測では、Foreachループが必要です。

`<?php 
/* 
Template Name: Restaurant Menu Template 
*/ 
get_header(); ?> 
<div class="content-fill-in-menu">HERE</div> 

    <div id="primary" class="content-area"> 

     <main id="main" class="site-main" role="main"> 

     <?php 
     // Start the loop. 
     while (have_posts()) : the_post(); ?> 


     <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 

      <header class="entry-header"> 
       <?php the_title('<h1 class="entry-title">', '</h1>'); ?> 
      </header><!-- .entry-header --> 

      <div class="entry-content wpb_wrapper container-acf"> 


      <?php if (have_rows('menu_sections')): 
       while (have_rows('menu_sections')): the_row(); ?> 

        <h2 class="section_desc"><?php the_sub_field('section_title'); ?></h2> 

        <?php if (have_rows('section_items')): ?> 

         <?php while (have_rows('section_items')): the_row(); ?> 
        <article class="lmenu"> 
         <ul> 
        <li> 
        <div class="container-acf"> 
         <div class="row"> 
          <div class="col-md-3 item_info"> 

           <img class="dish_pic" src="<?php the_sub_field('dish_pic'); ?>" alt="<?php the_sub_field('dish_name'); ?>"> 
           <h3 class="item_name"><?php the_sub_field('dish_name'); ?></h3> 
           <p class="item_desc"><?php the_sub_field('dish_description'); ?></p> 
           <h4 class="price">$<?php the_sub_field('dish_price'); ?></h4> 
           <span class="separator"></span> 
          </div> 
         </div> 
        </div> 
          </li> 
         </ul> 
        </article> 
         <?php endwhile; ?> 

         </table> 

        <?php endif; ?> 

       <?php endwhile; 
      endif; ?> 


      </div><!-- .entry-content --> 

     </article><!-- #post-## --> 



     <?php endwhile; // End the loop. ?> 

     </main><!-- .site-main --> 

    </div><!-- .content-area --> 
    <div class="content-fill-in-menu">HERE</div> 

<?php get_footer(); ?>` 

Answer 1

あなたの問題の多くは、 "section_items"リピーターフィールドにループしていると思います。 "while"ループでは、コンテナと各アイテムの行を開いたり閉じたりするので、列にレンダリングされません。

ここでは変更の考え方で、ループの開始前に行を開く必要があります。私は問題を防ぐために、行に各4つの項目を再起動するカウンター（$ i）を置く：

<?php if (have_rows('menu_sections')): ?> 
     <?php while (have_rows('menu_sections')): the_row(); ?> 

     <h2 class="section_desc"><?php the_sub_field('section_title'); ?></h2> 
     <?php if (have_rows('section_items')): ?> 

      <?php $i = 1; ?> 
      <div class="row"> 

      <?php while (have_rows('section_items')): the_row(); ?> 
       <div class="col-md-3 item_info"> 
       <article class="lmenu"> 
        <img class="dish_pic" src="<?php the_sub_field('dish_pic'); ?>" alt="<?php the_sub_field('dish_name'); ?>"> 
        <h3 class="item_name"><?php the_sub_field('dish_name'); ?></h3> 
        <p class="item_desc"><?php the_sub_field('dish_description'); ?></p> 
        <h4 class="price">$<?php the_sub_field('dish_price'); ?></h4> 
        <span class="separator"></span> 
       </article> 
       </div><!-- /.col --> 

       <?php 
       if($i == 4){ 
       echo '</div><div class="row">'; 
       $i = 0; 
       } 
       $i++; 
       ?> 
      <?php endwhile; ?> 

      </div><!-- /.row --> 

     <?php endif; ?> 

     <?php endwhile; ?> 
    <?php endif; ?>