【问题标题】:How to show the picture of a post when it's link is hovered in WordPress当链接悬停在WordPress中时如何显示帖子的图片
【发布时间】:2017-04-10 13:03:18
【问题描述】:

我的网站中有一个部分是对最后 6 篇文章的审核,这是它的 HTML 代码:

<div class="latest-posts">
      <div id="latest-posts-title">
    <p>My Website's latest posts</p>
  </div>
      <div id="latest-posts-pictures"> <img src=""width="190px" height="190px" alt="latest-posts-pictures"> </div>
      <ul>
    <li><a href="#">Post1</a></li>
    <li><a href="#">Post2</a></li>
    <li><a href="#">Post3</a></li>
    <li><a href="#">Post4</a></li>
    <li><a href="#">Post5</a></li>
    <li><a href="#">Post6</a></li>
  </ul>

我想添加一个功能,让用户在上面的代码中悬停帖子链接时能够看到帖子的图片。

我用过这个 PHP 代码,效果很好:

<ul>
<?php
$my_query = new WP_Query('showposts=6&cat=my_category');
while ($my_query->have_posts()):
$my_query->the_post();
$do_not_duplicate = $post->ID;?>

<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

<?php endwhile; ?>
</ul>

但是这段代码不包含我想要的图片部分。 您知道如何让我的用户可以使用此功能吗?

请注意,使用 PHP 或 JavaScript 对我来说并不重要,我只是 希望是让用户可以看到帖子的图片 当他悬停它的链接时。

【问题讨论】:

  • 这是否会在您的 php 代码中获取图像: $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full', false, '' ); echo '';
  • @mikeg542 它没有,但我认为有一些变化它会。谢谢。
  • 你可以用一百万种不同的方式来做到这一点 - 但你需要首先获得特色图片 - if ( has_post_thumbnail() ) { // 检查帖子是否分配了帖子缩略图。 the_post_thumbnail_url('无论你在这里有什么尺寸'); }

标签: javascript php html css wordpress


【解决方案1】:

您可以使用以下代码显示帖子的特色图片:

// Check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
    the_post_thumbnail();
}

您可以查看此链接以获取更多信息。 https://developer.wordpress.org/reference/functions/the_post_thumbnail/

【讨论】:

  • 谢谢,但我想在用户悬停链接时添加此功能。我该如何实施?我认为必须使用 CSS 或 JS 来完成。你有什么想法吗?
  • 为此,您需要有一些CSS或JS知识。例如,您可以在隐藏的div 中打印图像,并在用户悬停帖子元素时显示div。类似于以下内容:.parent-class:hover .image-class{display: block}
  • 加载页面时执行 php - 您需要在悬停之前已经加载它 - 所以这是正确的方法 - 将其放在隐藏的 div 中,并在悬停时淡入。
  • 谢谢,这是个好主意。它也对我有用??
猜你喜欢
  • 2021-03-27
  • 2017-03-06
  • 1970-01-01
  • 2015-04-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-04-22
相关资源
最近更新 更多