wordpress - 悬停在帖子链接(WordPress)上时如何显示帖子的特色图片?
问题描述
我想制作我网站的首页,以便您列出仅包含标题和元数据的帖子(易于阅读,易于加载......)。
当您发现有趣的内容时,您会将光标放在标题上(链接到帖子),然后会在旁边显示特色图片(在网站上的特定位置或偏移刚好足以不覆盖任何文本或替换光标)。
以前做过,举个例子:
我假设我必须使用它来获取特色图像:
get_the_post_thumbnail_url( int|WP_Post $post = null, string|array $size = 'post-thumbnail' )
. 问题是我只知道 HTML 和 CSS,一些非常基本的 JS,而对 PHP 却一无所知。我在网上找到了几个例子,但没有任何工作。
你能告诉我如何从帖子链接中获取图像并显示它(动态地,因此它可以用于网站上的任何帖子链接)?
谢谢你。
解决方案
这是我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>
它正在工作,并解决了问题。我希望它会帮助某人。请注意,整个事情仍然需要一些卫生。
推荐阅读
- python - 计算每一列的统计数据并将其添加到空数据框
- php - 如果最后一个查询有评论,我的查询将不起作用。
- node.js - node js从图像序列创建视频流
- ios - Firebase 是否始终保证按顺序添加事件?
- c++ - ''的多重定义首先在这里定义错误
- c# - 创建 MVC Core 应用程序后是否可以更改调试配置文件?
- python-3.x - Python - any() - 检查列表中的元素是否为
- http - 如何在 kotlin 中使用 mockk 和 fuel 模拟 POST 请求?
- excel - 循环遍历不同大小的数据行并返回 MAX 值所需的 VBA 代码
- android - 如何使用phonegap截屏并在手机中分享