悬停在帖子链接（WordPress）上时如何显示帖子的特色图片？

Posted 2023-03-25

【中文标题】悬停在帖子链接（WordPress）上时如何显示帖子的特色图片？

【英文标题】：How to display feautured image of a post when hovering on the posts link (WordPress)?

【发布时间】：2021-03-27 04:10:05

【问题描述】：

我想制作我网站的首页，以便您列出仅包含标题和元数据的帖子（易于阅读，易于加载...）。

当您发现有趣的内容时，您会将光标放在标题上（链接到帖子），然后会在旁边显示一张特色图片（在网站上的特定位置或刚好足以不覆盖任何内容的偏移量）文本或替换光标）。

以前做过，这里是一个例子：

我假设我必须使用它来获取特色图片： get_the_post_thumbnail_url( int|WP_Post $post = null, string|array $size = 'post-thumbnail' )。 问题是我只知道 html 和 CSS，一些非常基本的 JS，而对 php 却一无所知。我在网上找到了几个示例，但都无法使用。

你能告诉我如何从帖子链接中获取图像并显示它（动态地使其适用于网站上的任何帖子链接）吗？

谢谢。

【参考方案1】：

尝试使用这个the_post_thumbnail();，它应该会显示帖子的图片。

检查那些：

https://developer.wordpress.org/reference/functions/get_the_post_thumbnail/

https://codex.wordpress.org/Post_Thumbnails

https://smartwp.com/wordpress-get-featured-image/

【讨论】：

谢谢回复 :)

【参考方案2】：

您可以将the_post_thumbnail 的输出添加到隐藏的<div></div> 标记中，然后您可以在鼠标悬停发生时显示它。 结构是这样的：

<div class="featured-image">
   <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
   <php the_post_thumbnail( 'full' );   ?>
</div>

在css文件中你应该设置：

div.featured-image img
    display:none;

当鼠标悬停时，您应该显示特色图片，代码将是这样的：

div.featured-image a:hover +  img
    display: inline-block;

【讨论】：

Ty 回复它会派上用场的。

【参考方案3】：

这是我google时的第一个链接，所以我会在这里发布解决方案。

所以我通过使用Ajax实现了这个效果：

AJAX 是 Asynchronous javascript and XML 的缩写，这项技术帮助我们从服务器加载数据而无需刷新浏览器页面。

详情：https://api.jquery.com/jquery.ajax/

图表有助于理解：https://i.stack.imgur.com/Zqyrn.gif

我创建了 jQuery，它从悬停的链接获取 url 并通过 Ajax 将其发送到服务器，如果处理成功，它会呈现 data 返回：

var hrefValue;

jQuery(document).ready(function($) 
    $('#bio-box').find('a').mouseover(function() 
        hrefValue = ($(this).attr('href'))
        //console.log(hrefValue)
        $.ajax(
            url: frontendajax.ajaxurl,
            type: 'POST', 
            data: 
                'action': 'image',
                'php_test': hrefValue
            ,
            success: function(data)
                $('#featured-image').html(data);
                //console.log(data);
            
        );
    );
); 

这个函数生成data:

function fimg() 
    if ( isset( $_POST['php_test'] ) ) 
        $testing = sanitize_text_field( wp_unslash( $_POST['php_test'] ) );
        $post_id = url_to_postid( $testing );
        echo get_the_post_thumbnail( $post_id );
    
    die();

add_action( 'wp_ajax_image', 'fimg' );
add_action( 'wp_ajax_nopriv_image', 'fimg' );

HTML：

<div id="featured-image”>
</div>

它正在工作，并解决了问题。我希望它会帮助某人。请注意，整个事情仍然需要一些卫生。