如何在自定义文章类型模板头部随机加载多张背景图片?
实现随机加载多张背景图的方案
嘿,这个需求用PHP就能轻松搞定,咱们直接在模板里处理就行,步骤很简单:
1. 准备背景图数组
把你想要随机显示的所有背景图URL放到一个PHP数组里。这里推荐用WordPress的get_template_directory_uri()函数来拼接路径,比相对路径更靠谱,不会因为页面层级变化导致图片加载失败。
2. 随机选择一张图
用PHP的array_rand()函数从数组里随机挑一个元素的键,再拿到对应的图片URL。
3. 输出带随机背景的div
把随机选中的URL插入到div的style属性里,记得用esc_url()做安全处理,这是WordPress开发的最佳实践哦。
下面是完整的代码示例:
<?php // 替换成你自己的背景图路径,想加多少就加多少 $header_bg_images = [ get_template_directory_uri() . '/content/uploads/2018/04/fundings-header.jpg', get_template_directory_uri() . '/content/uploads/2018/04/second-header.jpg', get_template_directory_uri() . '/content/uploads/2018/04/third-header.jpg' ]; // 随机选一张图 $random_bg_image = $header_bg_images[array_rand($header_bg_images)]; ?> <div class="single__header" style="background-image: url(<?php echo esc_url($random_bg_image); ?>); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"> <!-- 这里放你的头部区域内容 --> </div>
扩展:如果用自定义字段存储背景图
要是你的背景图是通过自定义字段上传的(比如字段名是header_bg_images,存储的是图片ID数组),可以稍微改一下代码,从自定义字段里获取图片URL:
<?php // 从自定义字段获取图片ID数组 $header_bg_ids = get_post_meta(get_the_ID(), 'header_bg_images', true); $header_bg_images = []; // 把图片ID转换成完整的URL if (!empty($header_bg_ids)) { foreach ($header_bg_ids as $image_id) { $header_bg_images[] = wp_get_attachment_image_url($image_id, 'full'); // 'full'可以换成你需要的图片尺寸,比如'large' } } // 防止数组为空,设置一张默认图 if (empty($header_bg_images)) { $header_bg_images[] = get_template_directory_uri() . '/content/uploads/2018/04/fundings-header.jpg'; } // 随机选图 $random_bg_image = $header_bg_images[array_rand($header_bg_images)]; ?> <div class="single__header" style="background-image: url(<?php echo esc_url($random_bg_image); ?>); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"> <!-- 头部内容 --> </div>
这样每次刷新页面,都会随机加载你数组里的一张背景图啦~
内容的提问来源于stack exchange,提问作者Prodefu




