如何通过自定义CSS将谷歌地图插件的H2标题永久修改为H3

解决方案 #

你修改插件代码不生效的原因 #

你改动的那段代码注册的是插件自带的隐藏侧边栏，仅作用于通过短代码调用的地图。如果你是将谷歌地图小工具拖拽到了主题自带的侧边栏区域（比如页面侧边、页脚），输出时会优先使用主题注册侧边栏时配置的标题标签规则，所以改插件的这段配置不会生效。如果是用短代码调用的地图，修改后需要清空站点缓存、刷新插件设置才会生效。

推荐方案1：通过自定义CSS修改样式（最适合初学者） #

这个方案无需修改任何源代码，升级插件/主题都不会丢失配置：

1. 进入WordPress后台，点击「外观」→「自定义」→「额外CSS」
2. 粘贴以下代码，根据你需要的h3样式调整属性值，保存即可生效：

/* 仅匹配class为widgettitle的h2标题 */
h2.widgettitle {
  /* 以下是h3常用默认样式，可根据实际需求调整 */
  font-size: 1.2em;
  font-weight: 600;
  margin: 12px 0;
  color: #333;
}

你可以直接在浏览器检查器里复制你当前主题h3标签的计算样式，替换上面的内容就能和主题h3效果完全一致。

方案2：动态替换标题标签为h3（无需修改插件代码） #

如果一定要把标签从h2改成h3，可以用WordPress自带钩子实现，避免插件升级覆盖你的改动：
将以下代码添加到你当前主题的functions.php文件末尾，保存即可：

add_filter('dynamic_sidebar_params', function($params) {
  // 仅对谷歌地图小工具生效
  if (strpos($params[0]['widget_name'], 'Google Maps Widget') !== false) {
    $params[0]['before_title'] = str_replace('<h2 class="widgettitle">', '<h3 class="widgettitle">', $params[0]['before_title']);
    $params[0]['after_title'] = str_replace('</h2>', '</h3>', $params[0]['after_title']);
  }
  return $params;
});

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