搜索

首页  >  问答  >  正文

ACF - 展示多个重复器图像

我的最终目标是创建一个图像库,单击该库即可链接到外部网站。这需要通过高级自定义字段来完成,因此我制作了一个中继器,其图像和链接位于同一行:

link1 | cover_image1 
link2 | cover_image2

现在我正在将此代码插入网页内的文本编辑器中。我还从这里导入了一些短代码,这允许我使用 %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]

网页呈现如下:

损坏的图像包含以下代码:

<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>

P粉885562567P粉885562567241 天前454

全部回复(1)我来回复

  • P粉842215006

    P粉8422150062024-03-27 20:00:18

    不是 WordPress 人员,但似乎 WordPress 会阻止使用 html 属性中的参数扩展/执行短代码,如果您可以将 php 代码放在那里,也许这可以作为解决方法:

    
    
    
    
    

    实际上我发现了对此的评论:

    此处

    所以这也可能有效:

    
    
    

    或者没有短代码引号:

    
    
    

    我能想到的最后一个选择是创建无参数的短代码,如下所示:

    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');

    然后在编辑器中使用,例如:

    
    
    

    回复
    0
  • 取消回复