懸停後的WordPress post image變化（ACF？）

在WordPress頁面上，我將post圖像作爲標題中的背景圖像。下面是它是如何解決：懸停後的WordPress post image變化（ACF？）

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

我現在要的是第二圖像添加到它應該可以懸停顯示後（高級自定義字段??）。我怎樣才能做到這一點？

EDIT

由於不是每個標題圖片具有用於懸停的第二圖像，我已經創建2個稱爲「正常」和「懸停」自定義字段。如果帖子有帖子圖片，那麼這是一個「靜態」標題，如果沒有帖子圖片，我會變得「正常」和「懸停」。我creted條件區分這些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; ?>

我現在需要的是讓我的第二個形象，「懸停」作爲懸停......

來源

2016-08-05 Irene

是的，你可以使用高級自定義字段插件上傳第二張圖片。

來源

2016-08-05 11:07:08 khushi

感謝您的評論。但是，我需要將此圖像指定爲懸停？我可以在PHP中執行嗎？我的知識有一點限制。 – Irene

<?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 + ')'); 
});

來源

2016-08-05 11:55:53 khushi

謝謝你的回答。我收到一條錯誤消息：「background-image：url（'
Warning：中的非法字符串偏移'url'C：\ xampp \ htdocs \ wuest \ wp-content \ themes \ wuest \ header.php on line
我的第44行：

查看上面的編輯... – Irene

在the_field（） ;函數你不會得到圖像的url請嘗試描述在我的回答$ imagehover = get_field（'imagehover'）; $ imagehover ['url']; – khushi

我找到了解決辦法。如果有人有興趣：

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

來源

2016-08-05 12:59:30 Irene

懸停後的WordPress post image變化（ACF？）

回答

相關問題