ACF 作为背景图像与悬停答案

【问题标题】：ACF as background-image with hoverACF 作为背景图像与悬停
【发布时间】：2016-12-11 22:56:54
【问题描述】：

在一个页面上，我想显示一个包含所有相关子页面的列表。在子页面上，我为图像添加了 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(); ?>

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

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

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

【问题讨论】：

你得到的图片是post parent image吗？ 'post_parent' => $post->ID,
我不确定你的意思。在父页面上，我正在尝试获取子页面的图像。

标签： wordpress background hover advanced-custom-fields

【解决方案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(); ?>

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

所以你的第一个将如下所示：

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

【讨论】：