호버가있는 배경 이미지로 ACF가 있습니다.

Question

페이지에서 관련된 모든 하위 페이지가있는 목록을 표시하려고합니다. 하위 페이지에서 이미지 용 사용자 정의 필드 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 태그로 표시하면 이미지가 올바르게 표시됩니다.

UPDATE : 여기에 당신이 원리를 볼 수있는 testLink하지만 마지막 자식 페이지의 항상 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-page2" href="MY LINK HERE">            
    <span>MY TITLE HERE</span> 
</a> 

등등 ...

그런 다음을 :

<a class="preview-page preview-page1" 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"가 붙어 있습니다.