如何将Codepen实现的可点击地图部署到WordPress页面

问题描述 #

我在Codepen制作了一个用于墓地调查的可点击地图，目前仅完成1号墓穴的点击功能验证，代码在Codepen中可正常运行。但将HTML粘贴到WordPress文本编辑器、通过页眉页脚插件添加CSS与JS后，功能无法正常实现，现寻求HTML、CSS和JS在WordPress中的正确放置位置以实现该功能。

完整代码 #

HTML代码 #

<div style="width: 1000px; height: 993.73px;">
    <img src="https://www.dyfedarchaeology.org.uk/wp/wp-content/uploads/Testmap.svg" 
         alt="可点击墓穴地图" usemap="#image-map" style="max-width: 100%; height: auto;">
</div>

<map name="image-map">
    <area class="hoverable-area" shape="circle" coords="670, 772, 50" onclick="openOverlay('https://www.dyfedarchaeology.org.uk/wp/wp-content/uploads/244385201_1048371782579748_121321210670771508_n.jpg',
        `<table>
            <tr>
                <th>姓氏</th>
                <th>名字</th>
                <th>地址</th>
                <th>月份</th>
                <th>年份</th>
                <th>年龄</th>
                <th>墓穴ID</th>
            </tr>
            <tr>
                <td>John</td>
                <td>Sarah</td>
                <td></td>
                <td>Chwefror</td>
                <td>1912</td>
                <td>81</td>
                <td>1</td>
            </tr>
            </table>`);" alt="1号墓穴"/>
</map>

<div id="overlay" class="overlay" onclick="closeOverlay()">
    <div id="popup" class="popup">
        <img id="popup-image" src="" alt="墓穴照片">
        <div id="popup-text"></div>
    </div>
</div>

CSS代码 #

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 80%;
    max-height: 80%;
    overflow-y: auto;
    position: relative;
}

#popup-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

#popup-text table {
    width: 100%;
    border-collapse: collapse;
}

#popup-text th, #popup-text td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

#popup-text th {
    background-color: #f2f2f2;
}

JavaScript代码 #

function openOverlay(imageUrl, textContent) {
    document.getElementById('popup-image').src = imageUrl;
    document.getElementById('popup-text').innerHTML = textContent;
    document.getElementById('overlay').style.display = 'flex';
}

function closeOverlay() {
    document.getElementById('overlay').style.display = 'none';
}

// 确保DOM加载完成后再执行
document.addEventListener('DOMContentLoaded', function() {
    // 可在此添加额外事件绑定
});

WordPress部署步骤 #

1. HTML内容放置 #

• 不要用可视化编辑器粘贴，改用自定义HTML区块（Gutenberg编辑器）：
  1. 编辑目标页面/文章，点击添加区块，搜索「自定义HTML」。
  2. 将上述HTML代码粘贴到区块中，保存页面。

2. CSS样式放置 #

两种可靠方式：

• 方式一：主题自定义CSS
  1. 进入WordPress后台 → 外观 → 自定义 → 额外CSS。
  2. 粘贴全部CSS代码，点击「发布」保存。
• 方式二：页眉页脚插件
  1. 打开插件设置，找到「页脚」或「自定义CSS」区域。
  2. 将CSS代码包裹在<style>标签中（<style>/* CSS代码 */</style>），粘贴到页脚区域后保存。

3. JavaScript代码放置 #

关键：必须在DOM加载完成后执行，优先放页脚：

• 方式一：页眉页脚插件
  1. 打开插件设置，找到「页脚」区域。
  2. 将JS代码包裹在<script>标签中（<script>/* JS代码 */</script>），粘贴到页脚区域后保存。
• 方式二：主题functions.php（进阶）
  若不想用插件，可通过主题函数注册脚本：

  function enqueue_grave_map_script() {
      wp_enqueue_script( 'grave-map-script', get_stylesheet_directory_uri() . '/js/grave-map.js', array(), '1.0', true );
  }
  add_action( 'wp_enqueue_scripts', 'enqueue_grave_map_script' );
  

  然后将JS代码保存为grave-map.js，上传到主题的js目录（无则新建）。

常见问题排查 #

• 按F12打开浏览器控制台，检查是否有路径错误、函数未定义等报错。
• 确认WordPress未过滤map、area等标签（自定义HTML区块不会过滤）。
• 排查是否存在主题或其他插件的样式/脚本冲突。

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