正文 

当前位置： 首页 > 问答 >

如何在 Wordpress 中实现 javascript

     2023-02-19     161

关键词：

【中文标题】如何在 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 使用入队脚本将脚本加载到正确的位置

如何在 WordPress 中实现自定义标头的引导小部件代码？

】如何在WordPress中实现自定义标头的引导小部件代码？【英文标题】：HowtocanimplementbootstrapwidgetcodeforcustomheaderinWordPress?【发布时间】：2019-07-1703:22:25【问题描述】：我在网站上工作，我不是引导程序的专业人士。这是我的主题标... 查看详情

如何在 Laravel 网站中实现主题选项？

...址、联系页面的Google地图代码、版权文本……就像我们在WordPress中一样。最佳做法是什么？【问题讨论】：有很多方法 查看详情

尝试在 wordpress 自定义页面中实现 jQuery 以进行搜索自动完成但不工作

】尝试在wordpress自定义页面中实现jQuery以进行搜索自动完成但不工作【英文标题】：TryingtoimplementjQueryinwordpresscustompageforsearchautocompletebutisnotworking【发布时间】：2017-04-1818:55:01【问题描述】：大家好，我刚开始开发网站，我是word... 查看详情

如何在wordpress中实现不同页面隐藏或者显示侧边栏？

参考技术A调用侧栏的是sidebar.php和页脚footer.php这两个文件!\\x0d\\x0a不管是首页的index.php还是单篇日志页面的single.php，在文件的最后面，总是有这么两行代码：\\x0d\\x0a\\x0d\\x0a\\x0d\\x0a我们需要分两种情况说明:\\x0d\\x0a\\x0d\\x0a第一... 查看详情

如何在 laravel 中实现 vuetify？

】如何在laravel中实现vuetify？【英文标题】：Howtoimplementvuetifyinlaravel?【发布时间】：2018-07-2123:32:58【问题描述】：我是vuetify的新手，我试图在laravel中实现它。有人已经在laravel中实现了vuetify，可以告诉我怎么做吗？我已经安装... 查看详情

如何在android中实现BottomAppBar？

】如何在android中实现BottomAppBar？【英文标题】：howtoimplementBottomAppBarinandroid?【发布时间】：2020-12-2823:06:46【问题描述】：如何在android中实现BottomAppBar。build.gradleimplementation\'com.google.android.material:material:1.0.0-beta01\'activity_main 查看详情

如何在android中实现svm模型？

】如何在android中实现svm模型？【英文标题】：Howtoimplementsvmmodelinandroid?【发布时间】：2014-05-3121:47:13【问题描述】：我在Matlab中使用svmtrain训练了分类器，现在我不知道如何在android中实现模型。甚至没有一个例子来展示如何使用... 查看详情

如何在 Gson 中实现 TypeAdapterFactory？

】如何在Gson中实现TypeAdapterFactory？【英文标题】：HowdoIimplementTypeAdapterFactoryinGson?【发布时间】：2014-04-1323:34:16【问题描述】：如何在Gson中实现TypeAdapterFactory类型？create的主要方法是泛型的。为什么？注册方法registerTypeAdapterFacto... 查看详情

如何在 Fragments 中实现 onBackPressed()？

】如何在Fragments中实现onBackPressed()？【英文标题】：HowtoimplementonBackPressed()inFragments?【发布时间】：2011-07-2320:22:18【问题描述】：有没有一种方法可以在AndroidFragment中实现onBackPressed()，类似于我们在AndroidActivity中的实现方式？由... 查看详情

如何在 exoplayer 中实现 OkHttpDataSourceFactory？

】如何在exoplayer中实现OkHttpDataSourceFactory？【英文标题】：HowdoyouimplementOkHttpDataSourceFactoryinexoplayer?【发布时间】：2020-12-0714:51:40【问题描述】：在exoplayer中如何实现OkHttpDataSourceFactory？【问题讨论】：【参考方案1】：我翻遍了，... 查看详情

如何在 Swift 中实现 NSWindowRestoration？

】如何在Swift中实现NSWindowRestoration？【英文标题】：HowtoimplementNSWindowRestorationinSwift?【发布时间】：2014-06-1000:50:12【问题描述】：我尝试在非基于文档的应用程序中在Swift中实现NSWindowRestoration协议。然而，restoreWindowWithIdentifier方... 查看详情

如何在 Scala 中实现 DAO？

】如何在Scala中实现DAO？【英文标题】：HowtoimplementDAOinScala?【发布时间】：2011-07-1819:24:50【问题描述】：我想在Scala中实现DAO，如下所示：traitDAO[PK,-T,-Q]//Tisa"valueobject",PKisaprimarykey,andQisqueryparameters.defcreate(t:T):Unitdefupdate(t:T):Unitdefr... 查看详情

如何在 Swift 中实现单例类

】如何在Swift中实现单例类【英文标题】：HowtoImplementSingletonclassinSwift[duplicate]【发布时间】：2016-02-1822:01:56【问题描述】：我是swift编程新手，请告诉我如何使用代码在swift中实现单例类。在obj-c中我知道+(id)sharedManagerstaticMediaMode... 查看详情

如何在 JavaScript 中实现锁

】如何在JavaScript中实现锁【英文标题】：HowtoimplementalockinJavaScript【发布时间】：2011-07-1719:55:47【问题描述】：如何在JavaScript中实现与C#中的lock等效的东西？所以，为了解释我的想法，一个简单的用例是：用户点击按钮B。B引发o... 查看详情

如何在矢量中实现按钮

】如何在矢量中实现按钮【英文标题】：Howtoimplementbuttoninavector【发布时间】：2012-12-0915:42:18【问题描述】：在我的桌子上。我想在我可以按下的每一行中放置一些按钮。但我不知道该怎么做publicstaticDefaultTableModelbuildTableModel(Resu... 查看详情

如何在颤动中实现这种效果/布局？

】如何在颤动中实现这种效果/布局？【英文标题】：Howtoachievethiseffect/layoutinflutter?【发布时间】：2021-10-0520:29:18【问题描述】：我发现，这种搜索效果是内置在ios框架中的。但是这种布局如何在Flutter中实现呢？【问题讨论】：... 查看详情

这是如何在 swift 4 中实现的？

】这是如何在swift4中实现的？【英文标题】：Howisthisimplementedinswift4?【发布时间】：2018-08-0413:25:33【问题描述】：我有这个link用于表格视图中的下拉搜索栏。我能够使用此代码在tableview中实现搜索栏searchController.searchResultsUpdater=s... 查看详情

如何在 RecyclerView 中实现 StartActivityForResult

】如何在RecyclerView中实现StartActivityForResult【英文标题】：HowtoimplementStartActivityForResultinRecyclerView【发布时间】：2018-07-1916:07:21【问题描述】：我正在尝试在我的RecyclerView中使用startActivityForResult并且不知道如何...尝试了这种方式... 查看详情