开发含Google Maps API的WordPress插件：JS加载失败及合规性问题求助

你之前依赖第三方插件嵌入代码的方式，确实违反了WordPress插件开发的官方规范——这正是导致JS加载失败、无法提交到WP插件平台的核心原因。下面是一套完整的合规重构方案，一步步帮你解决问题：

1. 用WordPress官方函数注册/加载JS和CSS #

WordPress提供了wp_enqueue_script()和wp_enqueue_style()函数来管理前端资源，这是唯一合规的资源加载方式，能避免冲突、确保依赖顺序正确。

步骤1：在插件主文件中添加资源加载钩子 #

假设你的插件主文件是google-maps-locations.php，添加以下代码：

/**
 * 注册并加载前端资源
 */
function gmaps_locations_enqueue_assets() {
    // 注册自定义JS文件，依赖Google Maps API
    wp_enqueue_script(
        'gmaps-locations-script',
        plugin_dir_url( __FILE__ ) . 'js/map-script.js', // 你的JS文件路径
        array( 'google-maps-api' ), // 依赖Google Maps API
        '1.0.0',
        true // 在footer加载，优化性能
    );

    // 注册自定义CSS文件
    wp_enqueue_style(
        'gmaps-locations-style',
        plugin_dir_url( __FILE__ ) . 'css/map-style.css', // 你的CSS文件路径
        array(),
        '1.0.0'
    );

    // 注册Google Maps JavaScript API（替换成你的API密钥）
    wp_register_script(
        'google-maps-api',
        'https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&callback=initMap',
        array(),
        null,
        true
    );

    // 通过本地化脚本传递PHP数据到JS（比如地点信息、API密钥）
    $locations_data = array(
        'locations' => array(
            array( 'lat' => 40.7128, 'lng' => -74.0060, 'title' => 'New York' ),
            array( 'lat' => 34.0522, 'lng' => -118.2437, 'title' => 'Los Angeles' )
            // 这里可以从数据库或插件设置中动态获取地点
        ),
        'apiKey' => 'YOUR_GOOGLE_MAPS_API_KEY'
    );
    wp_localize_script( 'gmaps-locations-script', 'GmapsLocationsData', $locations_data );
}
// 前端页面加载资源
add_action( 'wp_enqueue_scripts', 'gmaps_locations_enqueue_assets' );

步骤2：编写地图初始化的JS代码 #

在js/map-script.js中编写地图逻辑：

// 初始化地图函数
function initMap() {
    // 创建地图实例
    const map = new google.maps.Map(document.getElementById('gmaps-locations-container'), {
        zoom: 4,
        center: { lat: 37.0902, lng: -95.7129 } // 可自定义地图初始中心点
    });

    // 遍历地点添加标记
    GmapsLocationsData.locations.forEach(location => {
        new google.maps.Marker({
            position: { lat: location.lat, lng: location.lng },
            map: map,
            title: location.title
        });
    });
}

2. 用短代码替代页面嵌入PHP #

之前用Insert PHP插件嵌入代码的方式非常不规范，应该用WordPress短代码让用户轻松插入地图：

在插件主文件中注册短代码 #

/**
 * 注册地图短代码
 */
function gmaps_locations_shortcode() {
    // 输出地图容器（可自定义样式）
    return '<div id="gmaps-locations-container" style="width: 100%; height: 500px;"></div>';
}
add_shortcode( 'google_maps_locations', 'gmaps_locations_shortcode' );

现在用户只需要在WordPress页面/文章中添加[google_maps_locations]短代码，就能显示地图，完全不需要嵌入PHP。

3. 符合WordPress插件平台提交规范的注意事项 #

• 移除第三方插件依赖：确保你的插件不依赖Insert PHP、Scripts 'n Styles这类工具，所有功能通过自身代码实现。
• 添加标准插件头注释：在插件主文件开头添加规范注释，示例：

/*
Plugin Name: Google Maps Locations
Plugin URI: https://your-plugin-url.com/
Description: Display multiple locations on Google Maps
Version: 1.0.0
Author: Your Name
Author URI: https://your-author-url.com/
License: GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: google-maps-locations
*/

• 避免硬编码敏感信息：不要把Google Maps API密钥硬编码在代码里，最好做一个插件设置页面让用户自行配置（用get_option()和update_option()实现）。
• 遵循WP编码规范：使用WordPress提供的安全函数（比如esc_js()、esc_attr()），避免直接输出未过滤的内容。

按照这套流程重构后，你的插件就能正常加载JS、符合WP规范，也可以顺利提交到WordPress插件平台了。

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