ACF 为 background-image 悬停

Question

在一个页面上，我想显示一个包含所有相关 child 页面的列表。在 child 页面上，我为图像添加了 2 个自定义字段。 "normal" 为正常状态，"hover" 为悬停状态。

这是我的代码：

<?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(); ?>

我的问题是，所有 child 页面都显示了自己的标题，但都具有相同的背景图像（最后一个 child）。如何实现每个 child 页面都有正确的背景图片？我想这是循环中的一些失败。

当我以常规 img-tag 显示图像时，它们显示正确。

更新：这是一个测试链接，您可以在其中看到原理，但始终是最后child页面的2张图片：http://dev.communicaziun.ch/wuest/jetzt-bei-wuest/

Answer 1

发生这种情况是因为循环中的每个标记都覆盖了前一个标记中的样式。尝试这样的事情：

<?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(); ?>

这会将 class 预览页面的每个项目设置为具有唯一标识符。该唯一标识符也会出现在您的标签中，这样样式就不会被覆盖。

因此您的第一个将如下所示：

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

你的第二个将是相同的，但 class 名称末尾有一个“2”而不是 1。

ACF 为 background-image 悬停

ACF as background-image with hover

wordpress

background

hover

advanced-custom-fields