我正在嘗試使用 ACF 和 Flexslider 2 在 Wordpress 中生成一個基本滑塊。我想在左側(cè)顯示文本，在右側(cè)顯示圖像，就像我在所附屏幕截圖中創(chuàng)建的排列一樣。我希望滑塊以完全相同的格式輪換出 2-3 個藝術(shù)家簡介，并以藍色背景作為滑塊容器。我使用 ACF 中繼器成功創(chuàng)建了自定義字段，其中包含名稱、標題、個人簡介文本和圖像的子字段。我遇到的問題是，創(chuàng)建中繼器后，flexslider 根本不顯示，而是我可以一次看到所有中繼器字段，如下所示：?theg8.com/about-the-art/這是我的模板文件中的 PHP：<li class="mason__grid-col col__full artist-highlight-section">?<?php if( have_rows('artist_slider') ): ?>? <div class="col-12 artist-info">? ?<?php while( have_rows('artist_slider') ): the_row(); ?>? ? <div class="artist-info-left col-lg-6 col-md-6 col-sm-12">? ? ? <h2><?php the_sub_field('artist_name'); ?>? ? ? </h2>? ? ? <h3><?php the_sub_field('artist_title'); ?></h3>? ? ? <p><?php the_sub_field('artist_bio'); ?></p>? ? ?</div>? ? <div class="artist-image-right col-lg-4 col-md-6 col-sm-12">? ? ?<figure>? ? ? ?<?php? ? ? ? ?$image = get_sub_field('artist_image');? ? ? ? ?$imageurl = $image['sizes']['slider'];? ? ? ? ??>? ? ? ?<li class="lazy"><img src="<?php echo $imageurl; ?>"></li>? ? ? </figure>? ? ?</div>? ? <?php endwhile; ?>? ?</div><!-- ends col-12 -->?<?php endif; ?></li>有人能幫忙嗎？
1 回答
眼眸繁星
TA貢獻1873條經(jīng)驗 獲得超9個贊
您將所有滑塊信息添加到一張幻燈片中。
FlexSlider 對每張幻燈片使用單獨的幻燈片<li>，但是您的 ACF 循環(huán)位于您的<li>...中，您需要將其移到外部并<li>為您想要的每張幻燈片創(chuàng)建一個新的。
假設(shè)在添加 ACF 字段之前此 html 適用于您的滑塊，您的代碼應(yīng)如下所示（請參閱注釋中的 setps 1 和 2，并且不要忘記更改結(jié)束標記以匹配?。?/p>
<?php /* 1. loop through the ACF rows first... */ ?>
<?php if( have_rows('artist_slider') ): ?>
<?php while( have_rows('artist_slider') ): the_row(); ?>
<?php /* 2. then for each 'artist_slider' row,
create a new <li> and fill it with the details from the ACF row */ ?>
<li class="mason__grid-col col__full artist-highlight-section">
<div class="col-12 artist-info">
<div class="artist-info-left col-lg-6 col-md-6 col-sm-12">
<h2><?php the_sub_field('artist_name'); ?></h2>
<h3><?php the_sub_field('artist_title'); ?></h3>
<p><?php the_sub_field('artist_bio'); ?></p>
</div>
<div class="artist-image-right col-lg-4 col-md-6 col-sm-12">
<figure>
<?php
$image = get_sub_field('artist_image');
$imageurl = $image['sizes']['slider'];
?>
<li class="lazy"><img src="<?php echo $imageurl; ?>"></li>
</figure>
</div>
</div><!-- ends col-12 -->
</li>
<?php endwhile; ?>
<?php endif; ?>
- 1 回答
- 0 關(guān)注
- 127 瀏覽
添加回答
舉報
0/150
提交
取消