如何简便命名WordPress元素标签 供导入的jQuery脚本操作

你不需要修改WordPress默认输出的原生标签名，通过给区块挂载自定义类的方式就能精准定位元素，兼容所有默认区块、不会因为主题或插件更新导致选择器失效，具体操作如下：

1. 给画廊区块绑定自定义标识类 #

用古腾堡编辑器自带的自定义类功能即可，不需要额外改代码修改标签输出：

• 插入「组」块作为整个LookBook模块的外层容器，在右侧区块设置的「高级」面板里，给「附加CSS类」字段填入lookbook-gallery
• 在组块内先插入一个「自定义HTML」块作为主图展示容器，给它加类lookbook-main-image，初始写空div即可，脚本会自动加载默认展示图
• 继续在组块内插入「列表」块作为缩略图容器，给列表块加类lookbook-thumb-list
• 把所有搭配图作为列表项插入列表，每个列表项内插入对应图片块，给所有图片块统一加类lookbook-thumb-item

不要尝试修改WordPress原生输出的<div>、<ul>、<img>等标签名，自定义类是兼容性最高的元素定位方式，不会被核心、主题、插件的更新逻辑覆盖。

2. 交互脚本编写 #

你之前用jQuery实现的点击切换逻辑完全可以复用，直接用自定义类作为选择器即可，不需要去匹配WordPress生成的随机类名。把下面的代码通过主题自定义面板的自定义JS功能，或者脚本插入插件加载即可，注意保证jQuery依赖提前加载：

jQuery(document).ready(function($){
  // 初始化：默认加载第一张缩略图作为主图
  const firstThumb = $('.lookbook-thumb-item').first();
  $('.lookbook-main-image').css('background-image', `url(${firstThumb.attr('src')})`);
  firstThumb.addClass('thumb-active');

  // 绑定缩略图点击切换事件
  $('.lookbook-thumb-item').on('click', function(){
    // 清除所有缩略图的选中状态
    $('.lookbook-thumb-item').removeClass('thumb-active');
    // 给当前点击项加选中态
    $(this).addClass('thumb-active');
    // 替换主图背景
    const currentSrc = $(this).attr('src');
    $('.lookbook-main-image').css('background-image', `url(${currentSrc})`);
  })
})

3. 基础参考样式 #

把下面的CSS贴到主题自定义CSS里，就能实现基础的展示和选中态效果，尺寸、配色可以根据你的设计要求调整：

.lookbook-main-image {
  width: 100%;
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  margin-bottom: 24px;
}
.lookbook-thumb-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.lookbook-thumb-item {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.2s ease;
}
.lookbook-thumb-item.thumb-active {
  opacity: 1;
  outline: 2px solid #222;
  outline-offset: 2px;
}

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