如何显示一个帖子的特征图像时,悬停在文章链接(WordPress)?

9gm1akwq  于 2022-11-22  发布在  WordPress
关注(0)|答案(3)|浏览(142)

我想让我的网站的第一页,这样你就有文章列出只有标题和 meta(读者友好,易于加载...)。
当你发现一些有趣的东西时,你可以把光标放在标题上(链接到帖子),旁边会显示一个特色图片(要么在网站的特定位置,要么偏移到不覆盖任何文本或替换光标)。
以前有人这样做过,下面是一个例子:

我假设我必须使用这个来获得特征图像:get_the_post_thumbnail_url( int|WP_Post $post = null, string|array $size = 'post-thumbnail' )。问题是我只知道HTML和CSS,一些非常基本的JS,对PHP一无所知。我在网上找到了几个例子,但没有任何工作。
你能告诉我如何从帖子链接中获取图片并显示它(动态地,这样它就可以用于网站上的任何帖子链接)吗?

  • 谢谢-谢谢
rjjhvcjd

rjjhvcjd1#

你可以把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;
}
vsnjm48y

vsnjm48y3#

这是第一个链接时,我谷歌它,所以我会张贴在这里的解决方案。
我使用 AJAX 实现了这个效果:
AJAX 是Asynchronous JavaScript和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' );

于飞:

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

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

相关问题