WordPress 在悬停时发布图像更改（ACF？）答案

【问题标题】：WordPress post image change on hover (ACF?)WordPress 在悬停时发布图像更改（ACF？）
【发布时间】：2016-08-05 09:30:41
【问题描述】：

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

我现在需要的是获得我的第二张图片，“悬停”作为悬停...

【问题讨论】：

标签： wordpress hover advanced-custom-fields

【解决方案1】：

是的，您可以使用 Advance 自定义字段插件上传第二张图片以进行发布。

【讨论】：

感谢您的评论。但是我需要在哪里将此图像指定为悬停？我可以用 PHP 做吗？我的知识有点有限。

【解决方案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 + ')');
});

【讨论】：

感谢您的回答。我收到一条错误消息：“background-image: url('
Warning: Illegal string offset 'url' in C:\xampp\htdocs\wuest\wp- content\themes\wuest\header.php 在第 44 行
我的第 44 行：
schema.org/WPHeader" style="background-image: url('')" >
在 the_field();功能你不会得到图片的网址请按照我的回答中描述的那样尝试 $imagehover = get_field('imagehover'); $imagehover['url'];

【解决方案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>

【讨论】：