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个名为“normal”和“hover”的自定义字段。如果帖子有帖子图片，那么它是一个“静态”标题，如果没有帖子图片，我会“正常”和“悬停”。我创造了一个区分这两种类型的条件：

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

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

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>

WordPress在悬停时发布图片更改（ACF？）

3 个答案: