的步骤如下:
function custom_scripts() {
wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true );
wp_localize_script( 'custom-script', 'custom_vars', array(
'ajax_url' => admin_url( 'admin-ajax.php' )
));
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );
function load_random_banner() {
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'posts_per_page' => 1,
'orderby' => 'rand'
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
$image_src = wp_get_attachment_image_src( get_the_ID(), 'full' );
echo $image_src[0];
}
}
wp_reset_postdata();
die();
}
add_action( 'wp_ajax_load_random_banner', 'load_random_banner' );
add_action( 'wp_ajax_nopriv_load_random_banner', 'load_random_banner' );
jQuery(document).ready(function($) {
$.ajax({
url: custom_vars.ajax_url,
type: 'POST',
data: {
action: 'load_random_banner'
},
success: function(response) {
$('.banner-container').html('<img src="' + response + '">');
}
});
});
<div class="banner-container"></div>
现在,当用户访问你的WordPress网站时,jQuery将通过AJAX请求调用load_random_banner函数,该函数将随机从媒体库中选择一张图片,并将其插入到横幅容器中显示。
该解决方案的优势是:
适用场景:
该解决方案适用于需要在WordPress网站上展示随机横幅图像的情况,比如博客、新闻、展示等网站。通过动态加载横幅图像,可以为用户提供更好的视觉体验,并增加网站的吸引力。
腾讯云相关产品推荐:
腾讯云对象存储(COS):适用于存储和管理媒体文件,包括横幅图像。它提供高可靠性、低成本和可扩展的对象存储服务。了解更多:腾讯云对象存储(COS)
腾讯云CDN加速:用于加速网站内容分发,提高访问速度和用户体验。可以结合WordPress和jQuery使用CDN加速加载横幅图像,进一步优化网站性能。了解更多:腾讯云CDN加速
请注意,以上产品仅作为参考推荐,并非强制要求使用。你可以根据自己的需求和预算选择适合的云服务提供商和产品。
领取专属 10元无门槛券
手把手带您无忧上云