如何将谷歌地图脚本添加到WordPress的帖子？

Question

我想插入一段javascript到WordPress的帖子页面，插入这段代码的最佳方式是什么？

<style type="text/css"> 
    #map-canvas { height: 100%; margin: 0; padding: 0;} 
    </style> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=api"> 
    </script> 
    <script type="text/javascript"> 
     function initialize() { 
     var mapOptions = { 
      center: { lat: -34.397, lng: 150.644}, 
      zoom: 8 
     }; 
     var map = new google.maps.Map(document.getElementById('map-canvas'), 
      mapOptions); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
<div id="map-canvas"></div> 

我该如何修正这个问题？如何正确插入div元素到我的文章？

Answer 1

的最好的办法就是使用wp_enqueue_script和wp_register_script功能，包括使用wp_enqueue_Scripts钩

我会做以下JavaScript文件：

在的functions.php：

add_action('wp_enqueue_scripts', 'add_my_scripts'); 
function add_my_scripts(){ 
    // register the scripts 
    wp_register_script('gmap', 'https://maps.googleapis.com/maps/api/js?key=api'); 
    wp_register_script('theme-js', get_stylesheet_directory_uri() . '/js/my-script.js', array('gmap')); 

    // enqueue only if needed 
    if(is_page('your-map-page')) { 
     wp_enqueue_script('gmap'); 
     wp_enqueue_script('theme-js'); 
    } 
} 
// register a shortcode to use like [google-map] 
add_shortcode('google-map', 'google_map_func'); 
function google_map_func() { 
    return '<div id="map-canvas" style="height: 100%; margin: 0;padding: 0;"></div>'; 
} 

在您的my-script.js：

function initialize() { 
    var mapOptions = { 
     center: { lat: -34.397, lng: 150.644}, 
     zoom: 8 
    }; 
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize);