Question

在页面上，我想显示包含所有相关联的子页面的列表。在子页面上，我为图像添加了2个自定义字段。＆＃34;正常＆＃34;对于正常状态，＆＃34;悬停＆＃34;悬停状态。

这是我的代码：

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

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

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

所以你的第一个会这样：

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

ACF作为背景图像与悬停

1 个答案: