ACF作爲具有懸停功能的背景圖像

在頁面上，我想顯示包含所有關聯的子頁面的列表。在子頁面上，我爲圖像添加了2個自定義字段。正常狀態爲「正常」，懸停狀態爲「懸停」。ACF作爲具有懸停功能的背景圖像

這裏是我的代碼：

<?php 
$args = array(
'post_type'  => 'page', 
'posts_per_page' => -1, 
'post_parent' => $post->ID, 
'order'   => 'ASC', 
'orderby'  => 'menu_order' 
);                
$parent = new WP_Query($args);          
if ($parent->have_posts()) : ?>         
    <?php while ($parent->have_posts()) : $parent->the_post(); ?> 
     <?php 
      $image = get_field('normal'); 
      $hover = get_field('hover'); 
      if(!empty($image)): ?>             
       <style type="text/css"> 
        .preview-page { 
         background-image: url('<?php echo $image['url']; ?>'); 
        } 
        .preview-page:hover { 
         background-image: url('<?php echo $hover['url']; ?>'); 
        }  
       </style>            
     <?php endif; ?> 
     <a class="preview-page" href="<?php the_permalink() ?>">            
      <span><?php the_title(); ?></span> 
     </a><!-- end #category-name -->       

    <?php endwhile; ?>         
<?php endif; wp_reset_query(); ?>

我的問題是，所有的子頁面顯示自己的冠軍，但都具有相同的背景圖像（最後一個孩子的一個）。我怎樣才能實現每個子頁面都有正確的背景圖像？我想這是循環內的一些失敗。

當我在常規的img-tag中顯示圖像時，它們顯示正確。

UPDATE：這裏的TestLink的，你可以看到的原則，但總是最後一個子頁面的2個圖像：http://dev.communicaziun.ch/wuest/jetzt-bei-wuest/

來源

2016-08-05 Irene

您獲得的父母圖像是圖像嗎？ 'post_parent'=> $ post-> ID， – Mike

我不確定你的意思。在父頁面上，我試圖獲取子頁面的圖像。 – Irene

發生這種情況，因爲你的循環內的每個標籤覆蓋的樣式在前面標籤。試試這樣：

<?php 
$args = array(
'post_type'  => 'page', 
'posts_per_page' => -1, 
'post_parent' => $post->ID, 
'order'   => 'ASC', 
'orderby'  => 'menu_order' 
);                
$parent = new WP_Query($args);          
if ($parent->have_posts()) : 
    $i=0; ?>         
    <?php while ($parent->have_posts()) : $parent->the_post(); ?> 
     <?php 
      $i++; 
      $image = get_field('normal'); 
      $hover = get_field('hover'); 
      if(!empty($image)): ?>             
       <style type="text/css"> 
        .preview-page<?php echo $i; ?> { 
         background-image: url('<?php echo $image['url']; ?>'); 
        } 
        .preview-page<?php echo $i; ?>:hover { 
         background-image: url('<?php echo $hover['url']; ?>'); 
        }  
       </style>            
     <?php endif; ?> 
     <a class="preview-page preview-page<?php echo $i; ?>" href="<?php the_permalink() ?>">            
      <span><?php the_title(); ?></span> 
     </a><!-- end #category-name -->       

    <?php endwhile; ?>         
<?php endif; wp_reset_query(); ?>

這將設置您的每個項目與類預覽頁面有一個唯一的標識符。這個唯一的標識符也會出現在你的標籤中，這樣樣式就不會被覆蓋。

所以，你首先會出現這樣的：

<a class="preview-page preview-page1" href="MY LINK HERE">            
    <span>MY TITLE HERE</span> 
</a>

，第二個會出現這樣的：

<a class="preview-page preview-page2" href="MY LINK HERE">            
    <span>MY TITLE HERE</span> 
</a>

等等...

那麼你的第一個元素將是：

<style type="text/css"> 
    .preview-page1 { 
     background-image: url('MY IMAGE URL'); 
    } 
    .preview-page1:hover { 
     background-image: url('MY OTHER IMAGE URL'); 
    }  
</style>

和你的第二個將是相同的，但在類名稱的末尾加上「2」而不是1.

來源

2016-08-12 20:25:12 Joe

ACF作爲具有懸停功能的背景圖像

回答

相關問題