假设在一个页面中添加了N张图片,想要从中随机获取不重复的三张图片,形成一个幻灯片的DOM结构。
如下结构:
<div class="slider">
<div class="slide">
<img src="http://10/wp-content/uploads/2060/03/8.jpg" alt="">
</div>
<div class="slide">
<img src="http://10/flamme/wp-content/uploads/2060/03/9.jpg" alt="">
</div>
<div class="slide">
<img src="http://10/flamme/wp-content/uploads/2060/03/4.jpg" alt="">
</div>
</div>
设定页面别名(slug)为: home-featured-images
那么,下面的前端代码即可帮助你生成你想要的东西:
<div class="slider">
<?php $home_gallry_args = array(
'post_type' => 'page',
'pagename' => 'home-featured-images',
);
$home_gallery_query = new WP_Query($home_gallry_args);
if ($home_gallery_query->have_posts()) {
while ($home_gallery_query->have_posts()) {
$home_gallery_query->the_post();
$home_gallery_data = get_the_content();
preg_match_all('/<img .*?(?=src)src=\"([^\"]+)\"/si', $home_gallery_data, $allpics);
$home_gallery_images = array();
foreach ($allpics[1] as $pics) {
array_push($home_gallery_images, $pics);
}
$arr = $arr_history = $home_gallery_images;
$selected_home_gallery_items = array();
for ($i = 0; $i < 3; $i++) {
if (empty($arr_history)) {
$arr_history = $arr;
}
$key = array_rand($arr_history, 1);
$selected = $arr_history[$key];
unset($arr_history[$key]);
array_push($selected_home_gallery_items, $selected . PHP_EOL);
}
foreach ($selected_home_gallery_items as $selected_home_gallery_item) {
?>
<div class="slide">
<img src="<?php echo esc_url($selected_home_gallery_item); ?>" alt="<?php bloginfo('name');?>">
</div>
<?php
}
?>
<?php }} else {?>
<div class="slide">
<img src="<?php bloginfo('template_url');?>/assets/img/f1.jpg" alt="<?php bloginfo('name');?>">
</div>
</div>
<?php }?>
</div>
上列代码结尾处的else是,如果没有该页面,那么默认输出一张存放在主题文件夹中存放的某个图片。
评论区
发表新的留言
您可以留言提出您的疑问或建议。
您的留言得到回复时,会通过您填写的邮箱提醒您。