我目前正在将ACF字段添加到”
猫头鹰轮播”
中。在使图像显示的同时。我遇到了一个问题, 我的代码将所有来自中继器的结果分散到每张幻灯片中, 而不是一张一张地吐出来。下面是代码(所有内容均正确链接到Wordpress ACF字段), 并且我附加了一张有关滑块外观的图像。
关于如何解决此问题的任何建议?
<
div class="owl-carousel" id="owl-single-example">
<
?php foreach ($homepage_slideshow_gallery as $homepage_slideshow_gallery):?>
<
div class="slide" style="background-image: url('<
?php echo $homepage_slideshow_gallery['url'];
?>
')" />
<
div class="container caption">
<
?php if( have_rows('homepage_slideshow_repeater') ): ?>
<
?php while( have_rows('homepage_slideshow_repeater') ): the_row();
?>
<
p>
<
?php the_sub_field('homepage_slideshow_repeater_company');
?>
<
/p>
<
h1 class="textblock">
<
span>
<
?php the_sub_field('homepage_slideshow_repeater_title');
?>
<
/h1>
<
a class="btn" href="http://www.srcmini.com/<
?php the_sub_field('homepage_slideshow_repeater_url');
?>
">
View Work<
/a>
<
?php endwhile;
?>
<
?php endif;
?>
<
/div>
<
/div>
<
?php endforeach;
?>
文章图片
#1 【ACF库中的ACF中继器渲染不正确】图像和标题之间没有直接关系, 因为它们位于单独的ACF字段中, 因此, 使循环正确创建正确的关联变得非常困难。
我的建议是将图像字段直接添加到你的homepage_slideshow_repeater中继器字段中, 而不要使用单独的图库字段。
1:编辑具有中继器的字段组, 并使用以下设置为其添加图像的另一个子字段:
- 字段类型:内容:图片
- 返回值:图片网址
2:接下来, 编辑你的主页, 并将相应的滑块图像直接添加到中继器的标题, 标题等旁边
3:现在在你的代码中, 你只需循环一次, 因为所有相关信息都在同一中继器行中。你将使用类似以下内容的图片(对于图片使用字段名称” slide_image” ):
<
?php if( have_rows('homepage_slideshow_repeater') ): ?>
<
div class="owl-carousel" id="owl-single-example">
<
?php while( have_rows('homepage_slideshow_repeater') ): the_row();
?>
/* get the image from the repeater - the content will be just the url so we can use it directly */
<
div class="slide" style="background-image: url('<
?php the_sub_field('slide_image');
?>
')" />
/* now add the caption etc for this image to the slide */
<
div class="container caption">
<
p>
<
?php the_sub_field('homepage_slideshow_repeater_company');
?>
<
/p>
<
h1 class="textblock">
<
span>
<
?php the_sub_field('homepage_slideshow_repeater_title');
?>
<
/h1>
<
a class="btn" href="http://www.srcmini.com/<
?php the_sub_field('homepage_slideshow_repeater_url');
?>
">
View Work<
/a>
<
/div>
<
/div>
<
?php endwhile;
?>
<
/div>
<
?php endif;
?>
请注意, 这只是我的脑袋, 并且未经测试, 但是它应该使你了解所需的内容。
推荐阅读
- bootstrap自定义wordpress菜单的问题
- 中继器字段中的ACF多种图像尺寸
- 500内部服务器错误-WordPress htaccess
- 将类别添加到上传的图像媒体-WordPress
- 你无权访问此资源。服务器无法读取htaccess文件,因此拒绝访问是安全的
- 01|被k8s弃用的docker还值得学吗()
- #yyds干货盘点# linux Apache服务器的安装
- 做一个简单的APP系统软件平台需要多少钱(开发一套APP的价格是多少)
- linux进程和计划任务管理操作题