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

Question

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

<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 文件的函数钩子(Hook)

我会执行以下操作:

在你的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);