html ACF -显示多个中继器图像

hfyxw5xn 于 2022-12-09 发布在其他

关注(0)|答案(2)|浏览(145)

我的最终目标是创建一个图片库，当点击链接到一个外部网站。这需要通过高级自定义字段完成，所以我做了一个中继器，有图像和链接在同一行：

link1 | cover_image1 
link2 | cover_image2

现在我正在把这段代码插入网页的文本编辑器中，我还从here导入了一些短代码，这样我就可以使用%ROW%作为迭代器。
“attachments”是父重复控件，“link”和“cover_image”是子重复控件。

[acf_repeater field="attachments"]

external url = [acf field ='attachments_%ROW%_link']
image url = [acf field ='attachments_%ROW%_cover_image'] 

<a href =[acf field ='attachments_%ROW%_link'] >
<img src = [acf field ='attachments_%ROW%_cover_image'] width="300" height="214" />
</a>

[/acf_repeater]

网页呈现为：x1c 0d1x
如果损坏的图像包含此代码：

<img src="[acf" field="attachments_0_cover_image" &#093;="" width="300" height="214">

我认为<img>中的[acf field ='attachments_%ROW%_cover_image']并没有完全解析到url，因为external url =和image url =都呈现了正确的url。
WordPress在保存后也将我的代码转换为这个，所以它可能是一个语法错误？

[acf_repeater field="attachments"]

external url = [acf field = attachments_%ROW%_link]
image url = [acf field = attachments_%ROW%_cover_image]

<a href="[acf">
<img src="[acf" width="300" height="214" />
</a>

[/acf_repeater]

我不知道如何正确地将[acf field ='attachments_%ROW%_cover_image']转换为<img>中的url，我需要一些关于正确语法的帮助。非常感谢你的帮助！
每个Arian的属性的html：

<div class="fl-module fl-module-rich-text fl-node-5d4926759d7aa" 

data-node="5d4926759d7aa">
    <div class="fl-module-content fl-node-content">
        <div class="fl-rich-text">
    <p>Agenda: <a href="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/cute-cat-photos-1593441022.jpg?crop=0.669xw:1.00xh;0.166xw,0&amp;resize=640:*">https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/cute-cat-photos-1593441022.jpg?crop=0.669xw:1.00xh;0.166xw,0&amp;resize=640:*</a></p>
<p>Video Links: <a href="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/cute-cat-photos-1593441022.jpg?crop=0.669xw:1.00xh;0.166xw,0&amp;resize=640:*"></a></p>
<p>Thumbnails: <a href=""></a></p>
<p></p>
<p>external url = https://www.youtube.com/watch?v=uHKfrz65KSU<br>
image url = http://wordpress.local/wp-content/uploads/Thumbnail_1.png</p>
<p><a href="[acf" field="attachments_0_link" &#093;=""><br>
<img src="[acf" field="attachments_0_cover_image" &#093;="" width="300" height="214"><br>
</a></p>
<p><br></p>
<p>external url = https://www.youtube.com/watch?v=X2lIovmNsUY<br>
image url = http://wordpress.local/wp-content/uploads/Thumbnail_2-1.png</p>
<p><a href="[acf" field="attachments_1_link" &#093;=""><br>
<img src="[acf" field="attachments_1_cover_image" &#093;="" width="300" height="214"><br>
</a></p>
<p><br></p>
<p>external url = https://www.youtube.com/watch?v=hDJkFLnmFHU<br>
image url = http://wordpress.local/wp-content/uploads/Thumbnail_3-1.png</p>
<p><a href="[acf" field="attachments_2_link" &#093;=""><br>
<img src="[acf" field="attachments_2_cover_image" &#093;="" width="300" height="214"><br>
</a></p>
<p><br></p>
</div>
    </div>
</div>

Html

来源：https://stackoverflow.com/questions/71880084/acf-display-multiple-repeater-images

2条答案

按热度按时间

njthzxwz1#

不是一个wordpress的家伙，但似乎wordpress防止扩展/执行短代码与参数在html属性，也许这可以作为变通办法，如果你可以把php代码：

<?php
$link = do_shortcode("[acf field ='attachments_%ROW%_link']");
$cover_img = do_shortcode("[acf field ='attachments_%ROW%_cover_image']");
?>

<a href="<?= $link ?>">
<img src="<?= $cover_img ?>" width="300" height="214" />
</a>

实际上我找到了关于这一点的评论：
看起来它对HTML属性和shortcode属性使用了相同的引号，这会产生问题。
位于here
因此，这也可能起作用：

<a href="[acf field ='attachments_%ROW%_link']">
<img src="[acf field ='attachments_%ROW%_cover_image']" width="300" height="214" />
</a>

或不带短代码引号：

<a href="[acf field=attachments_%ROW%_link]">
<img src="[acf field=attachments_%ROW%_cover_image]" width="300" height="214" />
</a>

我能想到的最后一个选项是创建如下的无参数短代码：

function acflink_shortcode() {
    return do_shortcode("[acf field ='attachments_%ROW%_link']");
}
add_shortcode('acflink', 'acflink_shortcode');

function acfimage_shortcode() {
    return do_shortcode("[acf field ='attachments_%ROW%_cover_image']");
}
add_shortcode('acfimage', 'acfimage_shortcode');

然后在编辑器中使用，如：

<a href="[acflink]">
<img src="[acfimage]" width="300" height="214" />
</a>

赞(0）回复(0）举报 2022-12-09

gc0ot86w2#

你的案子有几个问题。
1.短代码的错误插入--短代码是为在Classic/ gutenberg 编辑器中使用而开发的，而不是直接在PHP代码中使用。要在PHP代码中使用短代码，您需要将短代码放在do_shortcode函数中，如下所示：do_shortcode("[your-shortcode]");

ACF短代码不会自动为您创建一个循环，如果您再次检查your forum link，您可以看到它是为在自定义PHP循环[acf field="{$repeater_name}_{$row}_{$sub_field_name}"]中使用而提供的，因为它应该是由您自己定义的自定义PHP变量。
我建议使用ACF Views plugin来显示ACF字段，完全不需要编码。这是一个免费的插件，你只需要在那里创建一个视图，选择要显示的字段，复制它们的简码并在任何地方使用它，插件会自动生成标记并显示所选的字段。
这里有一个他们官方网站的链接-ACF Views: Display ACF fields and Posts。更多的信息沿着他们的YouTube教程和文档的链接可以在那里找到。

赞(0）回复(0）举报 2022-12-09

我来回答

html ACF -显示多个中继器图像

2条答案

相关问题

热门标签

最新问答