在悬停状态下更改帖子特色图像

时间：2019-02-06 作者：ZWPDev

我几乎完成了我的第一个网站自定义主题。我创建了一些自定义的职位类型来管理投资组合和员工部分。代码没有问题，但客户询问当用户悬停在其上时是否可以更改员工图像。有没有办法在wordpress中实现这一点？

下面是我的代码示例

<div class="team-boxed">
<?php
  $args = array(
    \'post_type\' => \'team\'
  );
  $team = new WP_Query($args);
?>
        <div class="intro">
            <h2 class="text-center text-uppercase" id="">Team</h2>
        </div>

        <div class="row people">
<?php if( $team->have_posts() ): while( $team->have_posts() ): $team->the_post(); ?>
            <div class="col-md-6 col-lg-4 item">
                <div class="box">
                    <div class="rounded-circle" style="background-image:url(\'<?php the_post_thumbnail_url(\'full\'); ?>\')" id="staff-pic"></div>
                    <h3 class="team-name"><?php the_title(); ?></h3>
                    <p class="description text-center"><?php echo get_the_content(); ?></p>
                    <div class="social"><a href="#"><i class="fab fa-facebook"></i></a><a href="#"><i class="fab fa-twitter"></i></a><a href="#"><i class="fab fa-instagram"></i></a></div>
                </div>
            </div>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
        </div>
</div>

2 个回复
SO网友:Paul Elrich

您可以将自定义字段添加到团队页面，将其称为“second\\u picture”或任何您想要的内容，然后添加代码

           <div class="box">
                    <div class="rounded-circle" style="background-image:url(\'<?php the_post_thumbnail_url(\'full\'); ?>\')" id="staff-pic">
                        <div class="second-picture" style="background-image:url(<?php the_field(\'second_picture\'); ?>)"></div>
                    </div>
                    <h3 class="team-name"><?php the_title(); ?></h3>
                    <p class="description text-center"><?php echo get_the_content(); ?></p>
                    <div class="social"><a href="#"><i class="fab fa-facebook"></i></a><a href="#"><i class="fab fa-twitter"></i></a><a href="#"><i class="fab fa-instagram"></i></a></div>
                </div>
然后设置悬停状态

.second-picture{
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:.2s;
}
.second-picture:hover{
  opacity:1;
}

SO网友:mrben522

这似乎是一个CSS问题，而不是Wordpress问题。您只需要替换背景图像的悬停样式。类似这样：

.team-boxed .people .rounded-circle::hover {
    background-image:url("whatever");
}
如果您需要从Wordpress获取新的图像URL，那么您可以内联该CSS，只需转储一个PHP变量(background-image:url("\' . $newImageUrl . \'");), 或者使用javascript并通过wp_localize_script

标签： custom-post-types   images   css   post-thumbnails   小码农  

相关推荐

WordPress wp-admin css未加载

以前有SSL现在没有SSL我的word press管理仪表板css未加载，但主页和其他页面工作正常有人知道如何修复此问题吗？没有ssl，只是http已经有人问了同样的问题，但这些答案并不能解决我的问题Wordpress wp-admin suddenly lost its styleWordpress Admin Panel Completely Distorted, no css at all来自其他堆栈交换网络的相同问题Wordpress admin not loading css/jswordpre