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

中

然后添加短代码＆＃34; [show_my_gocomplete]＆＃34;到你的帖子或页面。

另外明智地将shorcode添加到模板文件

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

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

中

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

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

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

1 个答案: