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作为具有悬停功能的背景图像

回答

相关问题