WordPress地图插件标题添加HTML标签实现样式修改求助

核心思路 #

插件会转义你输入的HTML标签，所以只能通过前端JavaScript动态识别标题里的括号内容，给它包裹样式类，再用CSS调整尺寸。以下是两种适合新手的可行方案：

方案1：静态加载地图的处理方法 #

如果地图是页面加载时直接渲染的，用这段代码即可：

1. 添加JavaScript代码
   你可以通过WordPress后台的「自定义HTML」区块（放在页面底部），或者主题的「自定义JavaScript」功能添加：

   jQuery(document).ready(function($) {
     // 替换成你实际的地图标题选择器（用F12开发者工具查看）
     $('.map-location-title').each(function() {
       var titleText = $(this).text();
       // 匹配所有()或[]包裹的内容，替换为带样式类的span
       var formattedText = titleText.replace(/(\([^)]+\)|\[[^\]]+\])/g, '<span class="small-bracket">$1</span>');
       $(this).html(formattedText);
     });
   });
   

2. 添加CSS样式
   进入「外观」→「自定义」→「额外CSS」，粘贴以下代码调整尺寸：

   .small-bracket {
     font-size: 0.8em; /* 可根据需求修改数值 */
     /* 可选：添加颜色增强区分度 */
     color: #777;
   }
   

3. 确认标题选择器
   按F12打开浏览器开发者工具，找到地图上的标题元素，查看它的class属性。比如标题是<div class="wp-map-location-title">XX餐厅(XX路店)</div>，就把代码里的.map-location-title改成.wp-map-location-title。

方案2：动态加载地图的处理方法 #

如果地图是通过AJAX异步加载的（比如滚动加载、切换标签显示），把JS代码改成下面的版本，确保内容加载完成后再执行：

jQuery(document).on('DOMContentLoaded ajaxComplete', function() {
  $('.map-location-title').each(function() {
    var titleText = $(this).text();
    var formattedText = titleText.replace(/(\([^)]+\)|\[[^\]]+\])/g, '<span class="small-bracket">$1</span>');
    $(this).html(formattedText);
  });
});

注意事项 #

• 修改主题文件前建议备份，或者使用子主题，避免主题更新导致代码丢失。
• 如果不确定选择器，直接在开发者工具里右键标题元素→「复制」→「复制选择器」，粘贴到代码里即可。

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