调整WP Swiper分页指示器位置：适配有无figcaption场景

我刚好碰到过类似的场景，咱们可以通过CSS条件判断来完美搞定这个问题——核心思路就是让分页指示器的边距根据轮播里是否存在图片标题（figcaption）自动调整。

方案一：用CSS :has()伪类自动识别（推荐，无需手动操作） #

这个方法能让浏览器自动检测轮播容器里有没有带figcaption的图片，自动切换对应的边距样式：

/* 默认：无figcaption时的分页边距，可根据你的视觉需求调整数值 */
.swiper-pagination-bullets {
    margin-bottom: 10px;
}

/* 当轮播中存在带figcaption的图片时，使用原来适配标题的边距 */
.wp-swiper:has(.wp-element-caption) .swiper-pagination-bullets {
    margin-bottom: 40px;
}

/* 保留你原有的其他CSS样式 */
.swiper-pagination-bullets span {
    background: white;
}

.swiper-pagination-bullet {
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

.swiper-button-prev, .swiper-button-next {
    color: #FFFFFFCC;
    background-image: none;
}

.wp-swiper, .location-map, .gallery-slider, .gb-block-image, .wp-block-gallery {
    margin-bottom: 1.5em;
}

.gb-block-image img {
    max-height: 436px;
}

.wp-swiper__slide-content .wp-block-image .wp-element-caption {
    margin-top: 13px;
    padding-bottom: 12px;
    padding-top: 12px;
}

小提示 #

• :has()是CSS的实用新特性，目前Chrome、Edge、Safari都原生支持；如果需要兼容旧版Firefox，只需在浏览器设置里开启「layout.css.has-selector.enabled」选项即可。
• 你可以把10px改成更贴合你设计的数值，确保无标题时分页指示器刚好贴在图片底部边缘上方。

方案二：手动添加自定义类（兼容性拉满） #

如果担心部分老浏览器的兼容性，咱们可以给WP Swiper区块手动加类区分：

1. 在Gutenberg编辑器中选中目标WP Swiper区块，打开右侧「设置」面板，找到「高级」选项，在「附加CSS类」里输入has-figcaptions（仅当轮播里的图片都带figcaption时添加）。
2. 然后使用以下CSS：

/* 默认：无figcaption时的分页边距 */
.swiper-pagination-bullets {
    margin-bottom: 10px;
}

/* 当区块添加了has-figcaptions类时，使用适配标题的边距 */
.wp-swiper.has-figcaptions .swiper-pagination-bullets {
    margin-bottom: 40px;
}

/* 保留你原有的其他CSS样式 */
...

两种方案都能完美适配有无figcaption的场景，你可以根据自己的需求选就行~

内容的提问来源于stack exchange，提问作者David Mallis