如何在wordpress中使用geocomplete jquery插件？

Question

我有jquery geocomplete插件，但我不知道如何在Wordpress中使用它。我知道如何在普通的php中使用。所以谁能告诉我如何在Wordpress中使用它？？这是我的代码..

 <form>
  <input id="geocomplete" type="text" placeholder="Type in an address" size="90" />
</form>

<div class="map_canvas"></div>

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="../jquery.geocomplete.js"></script>
<script src="logger.js"></script>

<script>
  $(function(){

    var options = {
      map: ".map_canvas",
      location: "NYC"
    };

    $("#geocomplete").geocomplete(options);

  });
</script>

Answer 1

add_action( 'wp_head', 'add_geocomplete_script' );

function add_geocomplete_script() {
   ?>
   <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
   <script src="<?php echo get_template_directory_uri() ?>/js/jquery.geocomplete.js"></script>
   <script src="<?php echo get_template_directory_uri() ?>/js/logger.js"></script>
   ?>
}


add_shortcode('show_my_geocomplete', 'show_my_geocomplete_func');

function show_my_geocomplete_func(){
   ?>
   <form>
  <input id="geocomplete" type="text" placeholder="Type in an address" size="90" />
</form>

<div class="map_canvas"></div>
   <script>
   jQuery(document).ready(function(){ 
    var options = {
      map: ".map_canvas",
      location: "NYC"
    };

    jQuery("#geocomplete").geocomplete(options);

  });
</script>
   <?php
}

将上面的代码放在function.php中

然后在你的帖子或页面上添加短码"show_my_gocomplete“。

否则，将短码添加到模板文件中

<?php do_shortcode('[show_my_gocomplete]'); ?>

将其他js文件放在主题文件夹/js文件夹中

我没有在这里添加jquery lib，因为它已经在wordpress中可用了。

有一些很好的方法来实现它，比如让你的脚本入队。