如何为WordPress图片外层<div>添加类？嵌入两张图时自动包裹<div>

不用jQuery也能搞定的图片容器定位与类添加 #

• 纯CSS直接定位：用div:has(img)选择器就能选中所有包含图片的div，直接写样式即可，示例：

  div:has(img) {
    margin: 1.5rem 0;
    padding: 0.5rem;
    border: 1px solid #eee;
  }
  

  注：该选择器支持现代浏览器，若需兼容旧版本，可考虑修改主题图片嵌入模板默认加类，或用下面的JS方案。
• 纯JS批量加类：如果必须给容器加自定义类，无需jQuery也能实现：

  document.addEventListener('DOMContentLoaded', () => {
    // 选中所有包含img的div
    const imgWrappers = document.querySelectorAll('div:has(img)');
    imgWrappers.forEach(wrap => {
      wrap.classList.add('single-img-wrapper');
    });
  });
  

两张图片自动套sideBySide容器 #

用纯JS处理连续图片组，代码可直接放到主题自定义JS中：

document.addEventListener('DOMContentLoaded', () => {
  // 替换为你文章内容的容器选择器，比如主题里的.entry-content
  const postContent = document.querySelector('.entry-content');
  if (!postContent) return;

  const allImgs = postContent.querySelectorAll('img');
  let imgGroup = [];

  allImgs.forEach((img, idx) => {
    // 找到图片的直接父容器，根据主题结构调整，比如有的是figure
    const parentWrap = img.closest('div');
    if (!parentWrap) return;

    imgGroup.push(parentWrap);
    // 检查是否到组末尾（下一张不存在，或下一张父容器不连续）
    const nextImg = allImgs[idx + 1];
    const nextParent = nextImg ? nextImg.closest('div') : null;

    if (!nextImg || nextParent !== parentWrap.nextElementSibling) {
      // 刚好两张图片时，套外层容器
      if (imgGroup.length === 2) {
        const sideBySide = document.createElement('div');
        sideBySide.classList.add('sideBySide');
        // 将两个容器移入新容器
        imgGroup.forEach(wrap => sideBySide.appendChild(wrap));
        // 插回原位置
        imgGroup[0].parentNode.insertBefore(sideBySide, imgGroup[0]);
      }
      // 重置分组
      imgGroup = [];
    }
  });
});

配套样式参考 #

/* 单张图片容器样式 */
.single-img-wrapper {
  margin: 1.5rem 0;
}

/* 并排图片容器 */
.sideBySide {
  display: flex;
  gap: 1.2rem;
  margin: 1.5rem 0;
}

.sideBySide > div {
  flex: 1;
}

.sideBySide img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

注意事项 #

• 代码中的选择器（如.entry-content、div）需根据你的WordPress主题实际结构调整，比如部分主题用figure包裹图片，需将closest('div')改为closest('figure')。
• 若能修改主题的图片嵌入模板（如修改主题inc目录下的图片处理函数，或使用WordPress钩子），可从根源上为单张/多张图片添加类，比前端JS方案更稳定。

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