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

【问题标题】：how to use geocomplete jquery plugin in wordpress?如何在 wordpress 中使用 geocomplete jquery 插件？
【发布时间】：2014-08-02 20:12:18
【问题描述】：

我有 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>

【问题讨论】：

你知道如何创建wordpress模板吗？
是的..我知道如何创建模板

标签： wordpress geocoding

【解决方案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]”添加到您的帖子或页面。

另外，将 shorcode 添加到您的模板文件中

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

将你的其他 js 文件放在你的 theme_folder/js 文件夹中

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

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

【讨论】：