使用jQuery/JavaScript移除WordPress页面指定CSS类的方法

你不需要修改主题或WordPress核心文件，直接在前端注入JS代码即可完成指定类的移除，以下是两种可直接复用的实现方式：

方案一：原生JavaScript（无依赖，所有环境通用） #

代码会在页面DOM加载完成后自动查找目标元素并移除对应类，不会出现元素未加载导致的执行失效问题：

// DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function () {
  // 匹配目标页面标题section，可根据实际页面结构调整选择器精度
  const targetSection = document.querySelector('section.page__title-area.page__title-wrapper');
  if (targetSection) {
    targetSection.classList.remove('page__title-overlay');
  }
});

如果站点内多个页面都存在带该类的section需要批量处理，用遍历写法即可：

document.addEventListener('DOMContentLoaded', function () {
  const allTargetSections = document.querySelectorAll('section.page__title-area');
  allTargetSections.forEach(section => {
    section.classList.remove('page__title-overlay');
  });
});

方案二：jQuery写法（适用于已默认加载jQuery的WordPress主题） #

绝大多数WordPress主题都会默认加载jQuery，这种写法代码更简洁：

jQuery(document).ready(function($) {
  // 自动匹配所有符合条件的元素并移除类，无需手动遍历
  $('section.page__title-area').removeClass('page__title-overlay');
});

代码部署方式（无需修改文件权限） #

• 优先进入WordPress后台「外观-自定义」面板，找到主题自带的「自定义脚本/额外JS」输入框，粘贴选好的代码保存，刷新前端缓存即可生效
• 如果主题没有自定义JS入口，可以添加一个「自定义HTML」小工具到全站页脚位置，把JS代码包裹在<script>标签中放入即可，示例：

<script>
document.addEventListener('DOMContentLoaded', function () {
  const targetSection = document.querySelector('section.page__title-area.page__title-wrapper');
  if (targetSection) {
    targetSection.classList.remove('page__title-overlay');
  }
});
</script>

• 也可以使用轻量的自定义代码插入插件，将代码设置为前端页脚位置加载，避免影响页面首屏加载速度

注意：不要把代码直接写到文章/页面的正文编辑器中，WordPress的内容过滤机制会自动转义代码导致失效。

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