WordPress如何添加轮播图

1. 先整明白，WordPress搞轮播图其实路子挺多。最简单的招儿就是装个插件，比如"Smart Slider 3"或者"MetaSlider"。你进到后台插件那儿，直接搜名字，安装激活一气呵成。完事儿就能在左边菜单栏看见新选项，点进去传图片调顺序，最后短代码往文章里一贴齐活——但咱程序员一般不这么整，嫌太重。

2. 要是想轻量点儿，自己手搓也行。先往主题文件夹里怼个新模板，比如取名"carousel.php"，开头加上：

<?php
/*
Template Name: 轮播模板
*/
get_header();
?>

3. 接着在里头写HTML结构，用flex布局或者grid都行。重点是要塞个
   包住所有图片，CSS里给设成overflow: hidden，再让图片们横着飘起来。比如：

.slides {
  display: flex;
  transition: transform 0.5s ease;
}
.slide {
  min-width: 100%;
}

4. 然后搞点JavaScript让图动起来。不用jQuery也行，现在原生JS就能搞：

let index = 0;
setInterval(() => {
  index = (index + 1) % slides.length;
  document.querySelector('.slides').style.transform = 
    `translateX(-${index * 100}%)`;
}, 3000);

5. 最后记得把图片用WP自带的媒体管理器接上。用wp_get_attachment_image()函数调图，比直接写img标签高级：

<?php 
$images = get_posts(array('post_type' => 'attachment', 'numberposts' => 5));
foreach($images as $image) {
  echo wp_get_attachment_image($image->ID, 'full');
}
?>

6. 其实到这儿该动了，但你可能发现切换时图片会跳。得在CSS里加个.slides{overflow: hidden}藏住溢出的部分，再给容器设position: relative。就像收拾屋子，东西塞柜子里看着就整齐了。

7. 最后琢磨下，其实轮播图就是个无限循环的队列。每张图站100%宽度，靠translateX来回拉。JS里算索引值取余数，就跟时钟转圈似的，到12又回1。WordPress好处是媒体库都现成的，不用重新上传。

8. 要是老板非要加指示点，就在底下叠一排小圆点。click事件里把index改成对应下标，再触发一次位移。记住用transition做缓动，别用jQuery的animate，现在谁还用那玩意儿。

9. 完工前手机屏上试试，响应式断点不能少。@media (max-width: 768px)里把图片高度调小，不然移动端流量撑不住。用户体验和性能得兼顾，毕竟用户跑了咱代码给谁看。

10. 其实最省事的是用Gutenberg编辑器自带的轮播块，但那样显示不出咱的技术含量不是？自己写的好处是能加lazy loading，首屏加载快那么零点几秒。SEO也友好，蜘蛛爬文字不爬JS，比用插件堆出来的强多了。

Tags：

文章版权声明：除非注明，否则均为WP集市原创文章，转载或复制请以超链接形式并注明出处。