ACF - 展示多個重複器影像
P粉885562567
P粉885562567 2024-03-26 22:15:20
0
1
463

我的最終目標是建立一個圖像庫,點擊該庫即可連結到外部網站。這需要透過高級自訂欄位來完成,因此我製作了一個中繼器,其圖像和連結位於同一行:

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粉885562567
P粉885562567

全部回覆(1)
P粉842215006

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

然後在編輯器中使用,例如:



熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板