在WordPress中并排显示图片，可使用区块编辑器：添加“图库”区块并设置列数；或使用“栏目”区块，在每个栏目中单独插入图片，经典编辑器则需插入表格或使用HTML/CSS代码控制布局。
在WordPress中并排显示图片是美化内容布局的常见需求，以下是5种详细方法，按操作难度从低到高排列,兼顾不同用户的技术水平：
古腾堡区块（新手首选）
-
新建区块组
编辑文章时 → 点击「+」添加区块 → 选择「组」（Group）→ 在右侧面板设置「布局」为「行」（Row）。 -
插入图片
在组内添加「图片」区块 → 上传或选择图片 → 重复添加多张图片（每张图独立区块）。 -
调整宽度比例
选中单个图片区块 → 右侧「区块设置」→「宽度」输入百分比（如两图各设50%，三图各33%）。 -
添加间距
在组区块设置中 →「高级」→ 添加「CSS类」如image-row→ 在主题自定义器的「额外CSS」中添加：.image-row { gap: 15px; } /* 控制图片间距 */
经典编辑器+表格法（兼容旧版）
-
插入表格
在经典编辑器中 → 点击「添加表格」→ 设置列数（如2列）→ 行数=1。 -
嵌入图片
点击表格单元格 → 插入图片 → 调整每张图尺寸一致（建议统一宽度如500px）。
-
优化显示
表格设置中 → 边框=0 → 在「文本」模式添加代码消除默认边距：<table style="border:none; border-collapse: collapse;"> <td style="padding:0 10px 0 0;">图片1</td>
插件方案（适合多图库）
推荐 Envira Gallery 或 Final Tiles Grid：
- 安装插件后 → 创建新相册 → 上传图片。
- 在「布局设置」中选择：
- 列数：桌面端设2-4列
- 间距：10-20px
- 启用「响应式」确保移动端自动堆叠
- 插入短代码到文章 → 自动生成自适应并排图库。
✅ 插件优势：一键批量处理，支持灯箱特效
❌ 注意：避免安装过多插件影响速度
CSS Flexbox（精准控制）
- 将图片插入同一段落 → 切换「文本」编辑模式 → 包裹div并添加class：
<div class="image-row-flex"> <img src="图1地址" alt="描述1"> <img src="图2地址" alt="描述2"> </div>
- 在 外观→自定义→额外CSS 添加代码：
.image-row-flex { display: flex; gap: 20px; /* 图片间距 */ flex-wrap: wrap; /* 小屏幕自动换行 */ } .image-row-flex img { width: calc(50% - 10px); /* 两图宽度计算 */ height: auto; /* 保持比例 */ }
高级技巧：CSS Grid布局
适合复杂网格（如主图+辅图）：
.image-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
grid-gap: 15px;
}
/* 移动端优化 */
@media (max-width: 768px) {
.image-grid { grid-template-columns: 1fr; }
}
关键优化建议
-
SEO必备操作
- 每张图添加
alt描述（如「红色跑车侧面照」） - 文件名用英文短横线分隔（例：
red-sports-car.jpg）
- 每张图添加
-
性能优化
- 压缩图片：工具TinyPNG（网页版免费）
- 尺寸统一：避免并排图片高度不一致
-
移动端适配
所有方法需测试手机显示：- Flex/Grid布局默认响应式
- 表格法需添加媒体查询（小屏幕转为纵向）
-
访问性要求
- 焦点顺序：从左到右符合阅读逻辑
- 禁用纯装饰性图片的alt标签（留空）
引用说明：CSS布局方案参考MDN Web文档（Flexbox指南），插件数据测试基于WordPress 6.5环境，性能建议遵循Google Core Web Vitals标准。
选择建议
- 临时需求 → 古腾堡区块
- 定期发布图集 → Envira Gallery插件
- 自定义样式 → CSS Flexbox/Grid
- 旧版网站 → 表格过渡方案
实操中遇到代码冲突时，可用浏览器检查工具（F12）调试元素间距，定期清除缓存查看效果，并优先保证图片加载速度（超过3秒将影响SEO评分）。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/45576.html
