Как создать с помощью ацф добавления двух пунктов?

Question

[Evij21]

Был вариант сделать с помощью репитора, но в голову не приходит как это реализовать(код снизу и картинка тоже) Буду очень благодарен.

<div class="container">
                <h2 class="subtitle subtitle_mb">услуги</h2>
                <h2 class="title services__title">
                    Берем на себя заботу<br>
                    о вашей недвижимости
                </h2>
                <div class="services-slider">
                    <nav class="services-slider__nav">
                        <ul class="services-slider__list">
                            <li data-nav="0" class="services-slider__item">
                                <div class="services-slider__num">01</div>
                                <div class="services-slider__text">
                                    Содержание внутренних помещений и территорий
                                </div>
                            </li>
                            <li data-nav="1" class="services-slider__item">
                                <div class="services-slider__num">02</div>
                                <div class="services-slider__text">
                                    Управление и эксплуатация коммерческой недвижимости и в сфере ЖКХ
                                </div>
                            </li>
                            <li data-nav="2" class="services-slider__item">
                                <div class="services-slider__num">03</div>
                                <div class="services-slider__text">
                                    Хозяйственное<br>
                                    обслуживание
                                </div>
                            </li>
                            <li data-nav="3" class="services-slider__item">
                                <div class="services-slider__num">04</div>
                                <div class="services-slider__text">
                                    Техническое обслуживание инженерных систем
                                </div>
                            </li>
                            <li data-nav="4" class="services-slider__item services-slider__item_active">
                                <div class="services-slider__num">05</div>
                                <div class="services-slider__text">
                                    Поддержка материально-технической базы
                                </div>
                            </li>
							 
                        </ul>
                    </nav>
                    <div class="services-slider-info services-slider-info_territory">  <div class="services-slider-info__item"> <h3 class="services-slider-info__title">Ежедневная уборка</h3> <span class="services-slider-info__text"> Внутренние помещения<br> и прилегающие территории </span> </div>  <div class="services-slider-info__item"> <h3 class="services-slider-info__title">Генеральная уборка</h3> <span class="services-slider-info__text"> После строительства, ремонта,<br>пожара, затопления </span> </div>  <div class="services-slider-info__item"> <h3 class="services-slider-info__title">Химчистка</h3> <span class="services-slider-info__text"> Мягкой мебели, ковров, жалюзи </span> </div>  <div class="services-slider-info__item"> <h3 class="services-slider-info__title">2424</h3> <span class="services-slider-info__text"> 2424 </span> </div>  </div>
                    <div class="services-slider-info services-slider-info_jkh">
                        <div class="services-slider-info__crash">
                               
								    							                            <div class="services-slider-info__jkh-item">

							<div class="services-slider-info__item"> <h3 class="services-slider-info__title">Аварийно-восстановительные работы</h3> <span class="services-slider-info__text"> Восстановим работу ваших объектов в случае аварий </span> </div>                             </div>
							                            <div class="services-slider-info__jkh-item">

							<div class="services-slider-info__item"> <h3 class="services-slider-info__title">Уборка внутренних помещений</h3> <span class="services-slider-info__text"> Ежедневная, генеральная уборка, химчистка </span> </div>                             </div>
							                            <div class="services-slider-info__jkh-item">

							<div class="services-slider-info__item"> <h3 class="services-slider-info__title">Уборка прилегающих территорий</h3> <span class="services-slider-info__text"> Уборка прилегающих территорий </span> </div>                             </div>
 
							
                        </div>
                        <div class="services-slider-info__img">
						


	<img src="http://cf09705.tmweb.ru/wp-content/uploads/2022/02/1.jpg">

                        </div>
                    </div>
                    <div class="services-slider-info services-slider-info_jkh">
                        <div class="services-slider-info__crash">
                         			    							                            <div class="services-slider-info__jkh-item">

							<div class="services-slider-info__item"> <h3 class="services-slider-info__title">Комплексное эксплуатационно- техническое обслуживание</h3> <span class="services-slider-info__text">  </span> </div>                             </div>
							                            <div class="services-slider-info__jkh-item">

							<div class="services-slider-info__item"> <h3 class="services-slider-info__title">Текущий ремонт жилых домов, инженерных систем, оборудования</h3> <span class="services-slider-info__text">  </span> </div>                             </div>
							                            <div class="services-slider-info__jkh-item">

							<div class="services-slider-info__item"> <h3 class="services-slider-info__title">Озеленение и благоустройство территории</h3> <span class="services-slider-info__text"> Клумбы, газоны, посадки, детские и спортивные площадки, парковки, дорожки, малые архитектурные формы, земляные работы, асфальтирование, освещение. </span> </div>                             </div>
 
                        </div>
                        <div class="services-slider-info__img">
                            <img src="http://cf09705.tmweb.ru/wp-content/uploads/2022/02/2.jpg" alt="image">
                        </div>
                    </div>
                    <div class="services-slider-info services-slider-system">
                        <div class="services-slider-system__left">
                            
                            <div class="services-slider-system__category">
                                
                                  								                                <div class="services-slider-system__item">

                                <img src=" " alt="heating">

								 <span class="services-slider-info__text">
									 242424                                </span>

								 </div>                          
								                                <div class="services-slider-system__item">

                                <img src=" " alt="heating">

								 <span class="services-slider-info__text">
									 24242424                                </span>

								 </div>                          
 
                            </div>
                        </div>
                        <div class="services-slider-system__right">
                            <h3 class="services-slider-info__title">
                                Услуги
                            </h3>
                            <ul class="services-slider-system__list">
                                
                                         
                            </ul>
                        </div>
                    </div>
                    <div class="services-slider-info services-slider-info_jkh services-slider-info_active">
                        <div class="services-slider-info__crash">
                            
                                                          <div class="services-slider-info__parts">
                                <img src=" http://cf09705.tmweb.ru/wp-content/uploads/2022/02/parts.svg" alt="parts">

								 <div class="services-slider-info__title services-slider-info__title_mb-0">
									 Запчасти;								</div> </div>                          
                            <div class="services-slider-info__parts">
                                <img src=" http://cf09705.tmweb.ru/wp-content/uploads/2022/02/materials.svg" alt="parts">

								 <div class="services-slider-info__title services-slider-info__title_mb-0">
									 Расходные материалы;								</div> </div>                          
                            <div class="services-slider-info__parts">
                                <img src=" http://cf09705.tmweb.ru/wp-content/uploads/2022/02/equipment.svg" alt="parts">

								 <div class="services-slider-info__title services-slider-info__title_mb-0">
									 Оборудование и монтаж;								</div> </div>                          
                            <div class="services-slider-info__parts">
                                <img src=" http://cf09705.tmweb.ru/wp-content/uploads/2022/02/office.svg" alt="parts">

								 <div class="services-slider-info__title services-slider-info__title_mb-0">
									 Общее офисное снабжение.								</div> </div>                          
 
						</div>
                        <div class="services-slider-info__img">
                            <img src=" http://cf09705.tmweb.ru/wp-content/uploads/2022/02/3.jpg " alt="image">
                        </div>
                    </div>
                </div>
            </div>

Comments

[godsplan]

Типа чтобы к каждому пункуты еще были присвоены какие то элементы?

[Evij21]

еп@godsplane,

Answer 1

[Антон Литвиненко]

Как я понял это вертикальные табы, вот упрощенный код из проекта, табы на репитере

<div class="row service-products">
  <div class="col-md-5 d-none d-md-block">
    <?php if ( have_rows( 'service_products' ) ) : ?>
      <div class="service-product-tabs">
        <?php while ( have_rows( 'service_products' ) ) : the_row();
          $product_tab      = get_sub_field( 'product_tab' );
          $product_tab_icon = get_sub_field( 'product_tab_icon' );
        ?>
          <button type="button" class="product-tab">
            <?php if ( $product_tab_icon ) : ?>
              <span class="img-wrapper"><img class="img-svg" src="<?php echo esc_html( $product_tab_icon ); ?>" alt="<?php echo esc_html( $product_tab ); ?>"></span>
            <?php endif; ?>
            <?php if ( $product_tab ) : ?>
              <span class="text-wrapper"><?php echo esc_html( $product_tab ); ?></span>
            <?php endif; ?>
          </button>
        <?php endwhile; ?>
      </div>
    <?php endif; ?>
  </div>

  <div class="col-md-7">
    <?php if ( have_rows( 'service_products' ) ) : ?>
      <div class="service-product-content resp-tabs-container">
      <?php while ( have_rows( 'service_products' ) ) : the_row();
        $product_title          = get_sub_field( 'product_title' );
        $product_image          = get_sub_field( 'product_image' );
        $product_content        = get_sub_field( 'product_content' );
      ?>
      <div class="product-tab-item">
        <?php if ( $product_image ) : ?>
          <div class="img-wrapper">
            <img src="<?php echo esc_url( $product_image['url'] ); ?>" alt="<?php echo esc_attr( $product_image['alt'] ); ?>" />
          </div>
        <?php endif; ?>
        <?php if ( $product_title ) : ?>
          <h3 class="product-tab-title"><?php echo esc_html( $product_title ); ?></h3>
        <?php endif; ?>
        <?php if ( $product_content ) : ?>
          <div class="product-tab-content"><?php echo wp_kses_post( $product_content ); ?></div>
        <?php endif; ?>
      </div>
      <?php endwhile; ?>
      </div>
    <?php endif; ?>
  </div>

</div>

Comments

[Evij21]

Спасибо!

[Evij21]

У меня еще один у меня есть , но оно почему-то выводит из субповторителя, с чем это свзязано? вот код:

<?php $sources = get_field('dob1'); echo ''; foreach ($sources as $src){ ?>
					<div class="services-slider-info services-slider-info_jkh">
                        <div class="services-slider-info__crash">

                               
	 <?php $sources = $src['tem6']; echo ''; foreach ($sources as $src){ ?>
							
							                            <div class="services-slider-info__jkh-item">

							<div class="services-slider-info__item"> <h3 class="services-slider-info__title"><?=$src['tittle']?></h3> <span class="services-slider-info__text"> <?=$src['text']?> </span> </div>     
							</div>
						


							                      
<?php }  echo '';?> 
																					 </div>

							<div class="services-slider-info__img">
						


	<img src="<?=$src['imgs']?>" />
						</div>

											</div>


							<?php } echo '';?>

[Антон Литвиненко]

Evij21, я этот код вообще не понял, но как минимум во вложенности я бы использовал другие переменные на всякий случай

[Evij21]

Антон Литвиненко, А как внутри репитора вывести еще один репитор например

[Антон Литвиненко]

Evij21, https://www.advancedcustomfields.com/resources/wor...

if (have_rows('repeater')) {
  while (have_rows('repeater')) {
    // show field from first repeater
    
    // nested repeater
    if (have_rows('nested_repeater')) {
      while (have_rows('nested_repeater')) {
        // show fields from nested repeater
      } // end while nested repeater
    } // end if nested repeater

  } // end while repeater
} // end if repeater

[Evij21]

Антон Литвиненко, Спасибо!