如何在 Wordpress 中实现 javascript

Posted 2023-02-19

【中文标题】如何在 Wordpress 中实现 javascript

【英文标题】：How to implement javascript into Wordpress

【发布时间】：2015-04-09 15:44:20

【问题描述】：

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

我知道我必须保存这个 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”文件夹中？

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

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

（javascript用于下拉联系人框）

【参考方案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。

【讨论】：

如果你在问题中展示的是你需要的，那么你可以直接把它原样放在JS文件中。 WordPress 将在 jQuery 中加载，然后在您的脚本中加载。然后你的脚本将运行，你应该被设置。

保存的时候需要把函数代码放到

不，您不需要脚本标签。只需将您的代码原样放入文件中即可。

然后我将这个入队脚本添加到 functions.php 中，对吗？因为当我这样做并更改指向我的文件的链接时，它会出现错误

错误是什么？并确保网址正确。 get_stylesheet_uri() 返回主题目录的 URL。我上面给出的示例脚本假定您的脚本文件位于：example.com/wp-content/themes/yourtheme/js/scripts.js。如果您的脚本在其他地方，则需要更改它。

【参考方案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，您可能希望将其创建为自己的文件并加入队列。

【讨论】：

我必须将该代码放在

是的，放入 标签

好的确实保存了带有脚本标签的函数并将其添加到 js 文件夹中，当我使用@bobdye 建议的链接将其排入队列时，它出现了一个错误，所以我无法将其排入队列

你能把确切的错误贴在这里让我看到吗？

我实际上摆脱了错误！但不幸的是，javascript 无法在我的网站上运行

【参考方案3】：

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

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

【讨论】：

不要这样做...这确实是一种不好的做法。这不是您在 wordpress 中加载脚本的方式

你有什么建议吗@w3bMak3r？

我在下面发布了一个答案。 Wordpress 使用入队脚本将脚本加载到正确的位置