如何在 Wordpress 中实现 javascript

Question

我在理解如何将 javascript 放入 wordpress 主题时遇到了一些麻烦。

1. 我知道我必须保存这个 javascript：

http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js

并将其放在服务器上“js”下的文件夹中，但是我该如何处理 javascript 函数？

 $(document).ready(function(){
                $('#contactButton').click(function(){
                    $('#contactDropDown').show("fast");
                    $('#contactDropDown').animate({height:'500px'}, 200);
                });

                $('#closeBox').click(function(){
                    $('#contactDropDown').hide("fast");
                    $('#contactDropDown').animate({height:'0px'}, 200);
                });
            });

我是否将其保存为不同的文档，但将其保存到同一个“js”文件夹中？

1. 我需要放入主题的functions.php 的确切代码是什么？

我还创建了一个 fiddle 以获得更多理解：http://jsfiddle.net/ptemyw52/

（javascript用于下拉联系人框）

Answer 1

您使用 WordPress wp_enqueue_script 函数来告诉 WordPress 加载什么。

它内置了 jQuery，所以你可以告诉它：

wp_enqueue_script('jquery');

得到那个。对于您自己的代码，将其放在某个文件中（例如 js/scripts.js），然后告诉 WordPress 加载它：

wp_enqueue_script(
    'myscript',
     get_stylesheet_directory_uri() . '/js/scripts.js',
     array('jquery')
);

最后一个参数 array('jquery') 告诉 WP 你的脚本依赖于 jquery。

Answer 2

Wordpress 已经包含了 JQuery。

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

您必须确保它是否在某个地方排队。如果 JQuery 没有在你的 functions.php 或你的 head.php 中运行，像这样将它排入队列：

wp_enqueue_script('jquery');

Wordpress 以无冲突模式加载 JQuery，因此 bling ($) 不起作用，您需要最终输入 jQuery。实际上，您可以直接将其输入并通过准备好的文档传递，如下所示：

<script>
jQuery(document).ready(function($){
     $('#contactButton').click(function(){
         $('#contactDropDown').show("fast");
         $('#contactDropDown').animate({height:'500px'}, 200);
     });

     $('#closeBox').click(function(){
         $('#contactDropDown').hide("fast");
         $('#contactDropDown').animate({height:'0px'}, 200);
     });
});
</script>

如果这是您唯一的代码，您实际上可以将其添加到您的 footer.php。如果您最终拥有更多的 javascript，您可能希望将其创建为自己的文件并加入队列。

Answer 3

在：wp-content/themes/your-template/js 你把你的js文件。 然后在文档的头部（可能是标题、索引等）

<script src="<?php echo get_template_directory_uri(); ?>/js/your.js"></script>