将自定义 javascript 文件添加到网站的首选方法是什么？

问题描述

我已经添加了我的脚本，但是我想知道首选方法。我刚刚把<script> 标签直接放在我的模板的 header.php 中。

有没有插入外部或自定义 js 文件的首选方法？如何将 js 文件绑定到单个页面？ (我有主页)

最佳解决方案

在您的主题中使用 `wp_enqueue_script()`

基本的答案是使用 wp_enqueue_script() 在一个 wp_enqueue_scripts 钩子中为 admin 的前端 admin_enqueue_scripts 。它可能看起来像这样 (假设你正在从你的主题的 functions.php 文件中调用; 注意我如何引用 stylesheet 目录)：

<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );

function mysite_enqueue() {
  $ss_url = get_stylesheet_directory_uri();
  wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js" );
}

这是基础。

Pre-defined 和多个相关脚本

但是让我们假设您要从 list of default scripts included with WordPress 中添加 jQuery 和 jQuery UI Sortable，并希望您的脚本依赖于它们？容易，只包括使用 WordPress 中定义的 pre-defined 句柄的前两个脚本，并且您的脚本为 wp_enqueue_script()提供了第三个参数，它是每个脚本使用的脚本句柄的数组，如下所示：

<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );

function mysite_enqueue() {
  $ss_url = get_stylesheet_directory_uri();
  wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js", array( 'jquery', 'jquery-ui-sortable' ) );
}

插件中的脚本

如果你想在插件中做这个怎么办？使用 plugins_url()函数指定您的 Javascript 文件的 URL：

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue' );

function my_plugin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url('/js/my-script.js',__FILE__), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION );
}

版本化您的脚本

另外请注意，我们给插件一个版本号，并将其作为第四个参数传递给 wp_enqueue_script()。版本号作为 URL 中的查询参数以脚本的形式输出，如果版本已更改，则强制浏览器可能会将缓存文件加载到 re-download 。

仅在需要的页面上加载脚本

Web Performance 的第一条规则说，为了尽量减少 HTTP 请求，因此只要可能，您应该将脚本限制在仅需要的地方加载。例如，如果您只需要使用脚本在管理员限制它到管理页面使用 admin_enqueue_scripts 钩代替：

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );

function my_plugin_admin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION );
}

在页脚中加载脚本

如果您的脚本是需要加载到页脚中的脚本之一，则会出现 wp_enqueue_script()的第 5 个参数，该参数告诉 WordPress 将其拖放到页脚中 (假定您的主题没有被错误地移动，并且确实是 calls the wp_footer hook like all good WordPress themes should)：

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );

function my_plugin_admin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION, true );
}

更精细的控制

如果您需要比 Ozh 更精细的粒度控制有一篇很棒的文章，标题为 How To: Load Javascript With Your WordPress Plugin，详细说明。

禁用脚本以获得控制

Justin Tadlock 有一篇很好的文章，标题为 How to disable scripts and styles，以防您想：

将多个文件合并成单个文件 (里程可能因 JavaScript 而异) 。
仅在我们使用脚本或样式的页面上加载文件。
停止不得不使用！在我们的 style.css 文件中重要的是进行简单的 CSS 调整。

通过 `wp_localize_script()`将值传递到 PHP

在他的博客上，Vladimir Prelovac 有一篇很棒的文章，题目是 Best practice for adding JavaScript code to WordPress plugins，他讨论了使用 wp_localize_script()来设置您的 server-side PHP 中的变量值，以便以后在您的 client-side Javascript 中使用。

使用 `wp_print_scripts()`进行精细粒度控制

最后，如果您需要真正的 fine-grained 控件，您可以查看 wp_print_scripts()，如 Beer Planet 在题为 How To Include CSS and JavaScript Conditionally And Only When Needed By The Posts 的文章中所讨论的。

Epiloque

这是关于包含 WordPress 的 Javascript 文件的最佳实践。如果我错过了某些东西 (我可能有)，请务必在评论中通知我，以便我们为未来旅客添加更新。

次佳解决方案

为了补充 Mikes 使用入口的精彩插图，我只是想指出，作为依赖的脚本不需要排入…

我将使用 Mike 的答案中的插件标题下的脚本中的示例。

define('MY_PLUGIN_VERSION','2.0.1');

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-sortable');
    wp_enqueue_script('my-script',plugins_url('/js/my-script.js',__FILE__),array('jquery','jquery-ui-sortable'),MY_PLUGIN_VERSION);
}

这可以修剪下来看..

define('MY_PLUGIN_VERSION','2.0.1');

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('my-script', plugins_url( '/js/my-script.js', __FILE__ ), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION);
}

当您设置依赖关系时，WordPress 会发现并将其排队准备好您的脚本，因此您不需要对这些脚本进行任何独立调用。

另外，有些人可能会想知道如果设置多个依赖关系可能会导致脚本以错误的顺序输出，这里让我举个例子

wp_enqueue_script( 'first-script', 'example/path/example_script_1.js', array('second-script','third-script') );

如果脚本二依赖于脚本三 (即脚本三应该首先加载)，这并不重要，WordPress 将确定这些脚本的排队优先级，并以正确的顺序输出它们，简而言之，这一切都被自动化为您提供 WordPress

参考文献

What is the preferred way to add custom javascript files to the site?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

将自定义 javascript 文件添加到网站的首选方法是什么？