WordPress 게시 이미지 변경시 호버 (ACF?)

Question

WordPress 페이지에서 헤더의 배경 이미지로 게시물 이미지가 있습니다. 여기가 해결 방법은 다음과 같습니다

<?php if (has_post_thumbnail($post->ID)): ?> 
     <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full'); ?> 
     <?php else : ?> 
     <?php endif; ?>   

     <header class="header" role="banner" itemscope itemtype="http://schema.org/WPHeader" style="background-image: url('<?php echo $image[0]; ?>')">...</div> 

은 내가 지금 원하는 것은 호버에 표시해야한다 포스트 (고급 사용자 정의 필드 ??)에 두 번째 이미지를 추가 할 수 있습니다. 이것을 어떻게 할 수 있습니까?

하지 모든 헤더 이미지가 호버에 대한 두 번째 이미지를 가지고 있기 때문에

편집, 나는 "정상"및 "가져가"라고 2 개 사용자 정의 필드를 만들었습니다. 게시물에 게시 이미지가있는 경우 '정적'헤더이고, 게시 이미지가없는 경우 '정상'및 '마우스 오버'가 표시됩니다.

<?php if (has_post_thumbnail($post->ID)): ?> 
    <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full'); ?> 
    <header class="header" role="banner" itemscope itemtype="http://schema.org/WPHeader" style="background-image: url('<?php echo $image[0]; ?>')"> 
<?php else : ?> 
    <header class="header" role="banner" itemscope itemtype="http://schema.org/WPHeader" style="background-image: url('<?php the_field('normal'); ?>');"> 
<?php endif; ?> 

내가 지금 필요한 것은 호버 나의 두 번째 이미지, "가져가"를 얻을 것입니다 ...

Answer 1

예는 미리 정의 필드 플러그인을 사용할 수 있습니다 : 나는 그 2 개 종류를 구분하는 조건을 creted 게시물에 대한 두 번째 이미지를 업로드하십시오. 이 같은 이미지의 호버에

Answer 2

<?php if (has_post_thumbnail($post->ID)): ?> 
    <?php $image = get_field('image'); 
      $imagehover = get_field('imagehover'); 
      ?> 
    <?php else : ?> 
    <?php endif; ?>   

    <header class="header" role="banner" data-alt-src="<?php echo $hoverimage['url']; ?>" itemscope itemtype="http://schema.org/WPHeader" style="background-image: url('<?php echo $image['url']; ?>')"> 

및 사용 JQuery와,

$(.header).hover(function(){ 
    var hoversrc = $(this).data('alt-src'); 
    $(this).css('background-image','url(' + hoversrc + ')'); 
}); 

Answer 3

나는 해결책을 발견했다. 관심있는 사람 :

<?php if (has_post_thumbnail($post->ID)): ?>   
<?php $thumb = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full'); ?> 
<style type="text/css"> 
    .header { 
     background-image: url('<?php echo $thumb[0]; ?>'); 
    } 
</style> 
<?php else : ?> 
    <?php $image = get_field('normal'); ?> 
<?php $imagehover = get_field('hover'); ?> 
<style type="text/css"> 
    .header { 
     background-image: url('<?php echo $image['url']; ?>'); 
    } 
    .header:hover { 
     background-image: url('<?php echo $imagehover['url']; ?>'); 
    } 
</style> 
<?php endif; ?> 

<header class="header"> ..</div>