我發現這個資源,我已經成功地落實到我自己的安裝,因爲我有同樣的問題,因爲你:
https://bitbucket.org/Bobadevv/acf-flexible-content-fishpig
基本上,這教會了我通過使用如下條件語句:
if ($flexLayout["acf_fc_layout"] == "fct_text_image") {
您可以過濾掉靈活的內容並相應地顯示內容。
編輯:在這方面做了更多的工作後,我可以確認它完美的工作,並應該按照您的需求做同樣的工作。
讓我們開始靈活的內容:
if ($post->getMetaValue('content')):
$flex = $post->getMetaValue('content');
$pos = 0;
foreach ($flex as $flexLayout) {
所以在這裏我們主要治療flex內容作爲中繼器領域。我通過添加一個循環計數器來做一些改動,這樣你就可以擁有動態ID(如果你需要多個js實例)
在那個循環中,你需要加載你希望與flex塊關聯的每個HTML塊。首先,我們需要定義塊Magento的方式(在wordpress.xml
佈局文件):
<reference name="flexible_content">
<block name="fct_cta_carousel" template="wordpress/fct/fct_cta_carousel.phtml" type="core/template"/>
然後在上述範圍內的循環:
$this->getChild('fct_cta_carousel')->setData("flex_layout", $flexLayout)->setData('pos',$pos);
echo $this->getChildHtml('fct_cta_carousel', false);
塊PHTML應該是這樣的:
<?php
$flexLayout = $this->getFlexLayout();
if ($flexLayout[acf_fc_layout] == "cta_carousel") {
if ($flexLayout[carousel_visibility] == 1) {
$carouID = "homepage-carousel-" . $this->getPos(); //To enable multiple carousels, we need a dynamic ID, based on position in flex content.
echo '<div class="featured-products featured-products-alt featured-products-visible">';
echo '<h2>' . $flexLayout[cta_row_title_carousel] . '</h2>';
echo '<div id="'. $carouID .'" class="featured-carousel">';
foreach($flexLayout[cta_rows_carousel] as $row){
echo '<div class="carousel-prod">';
echo '<div class="col">';
echo '<div class="img-overlay">';
echo '<img src="'.$row[cta_row_image].'" alt="'. $row['cta_row_title'] .'">';
echo '</div>';
echo '<h3>' . $row['cta_row_title'] . '</h3>';
echo '<a href="'.$row['cta_row_url'].'" class="cover-link"><span class="hide">'.$row['cta_row_title'] . '</span></a>';
echo '</div>';
echo '</div>';
}
echo '</div>';
echo '</div>';
所以基本上是這樣做的:
- 啓動柔性佈局
- 檢查循環中的柔性內容是否與ACF中指定的標識匹配。
- 處理flex內容字段就好像它是普通的ACF中繼器。
您可以沖洗並根據需要重複。
很顯然,整個結構都在我跟你聯繫的回購協議上,我只是握着你的手,因爲那裏沒有太多的文檔。