我已经添加了脚本，但我想知道首选的方式<我只是放了一个<script> 直接在header.php 我的模板的。
是否有插入外部或自定义js文件的首选方法
如何将js文件绑定到单个页面？（我想到了主页）
向站点添加自定义的javascript文件的首选方式是什么？
4 个回复
最合适的回答,由SO网友:MikeSchinkel 整理而成
使用wp_enqueue_script() 在你的主题中，基本答案是wp_enqueue_script() 在一个wp_enqueue_scripts 前端挂钩admin_enqueue_scripts 对于管理员。它可能看起来像这样（假设您是从主题的functions.php 文件注意我是如何引用样式表目录的）：
<?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" );
}
预定义的和多个相关脚本，但假设您希望包括jQuery和jQuery UI可排序的list of default scripts included with WordPress 和您希望您的脚本依赖于它们吗？简单，只需使用the pre-defined handles defined in WordPress 为您的脚本提供第三个参数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中的查询参数输出到脚本，并用于在版本更改时强制浏览器重新下载可能缓存的文件。仅在需要的页面上加载脚本1st rule of Web Performance says to Minimize HTTP Requests 因此，只要有可能，您应该将脚本限制为仅在需要的地方加载。例如，如果您只需要admin中的脚本，请使用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() 这会告诉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 );
}
禁用脚本以获得控制
Justin Tadlock 有一篇题为How to disable scripts and styles 如果您想：将多个文件合并到单个文件中（里程可能因JavaScript而异）
使用将值从PHP传递到JSwp_localize_script()Best practice for adding JavaScript code to WordPress plugins 他讨论使用wp_localize_script() 允许您在服务器端PHP中设置变量的值，以便稍后在客户端Javascript中使用。
真正细粒度的控制wp_print_scripts()
最后，如果您需要真正细粒度的控制，您可以查看wp_print_scripts() 如上所述Beer Planet 在一篇题为How To Include CSS and JavaScript Conditionally And Only When Needed By The Posts.Epiloque介绍了在WordPress中包含Javascript文件的最佳实践。如果我错过了什么（我可能错过了），请务必在评论中告诉我，以便我可以为未来的旅行者添加更新。
SO网友:t31os
为了称赞Mikes使用排队的精彩说明，我只想指出，作为依赖项包含的脚本不需要排队。。。
我将使用下面的示例Scripts in a Plugin 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);
}
此外，有些人可能想知道设置多个依赖项是否会导致脚本以错误的顺序输出，下面让我举个例子
wp_enqueue_script( \'first-script\', \'example/path/example_script_1.js\', array(\'second-script\',\'third-script\') );
SO网友:cjbj
对于您可能不想包含在单独文件中的小段脚本，例如，因为它们是动态生成的，WordPress 4.5和进一步提供wp_add_inline_script. 此函数基本上将脚本锁定到另一个脚本。
例如，假设您正在开发一个主题，并希望您的客户能够通过选项页面插入自己的脚本（如Google Analytics或AddThis）。然后你可以使用wp_add_inline_script 将该脚本锁定到主js文件（例如mainjs) 像这样：
$custom_script = get_option(\'my-script\')
if (!empty($custom_script)) wp_add_inline_script (\'mainjs\', $custom_script);
SO网友:vhs
我首选的方法是实现良好的性能，因此wp_enqueue_script 我将herdeoc与Fetch API一起使用，以异步方式并行加载所有内容：
$jquery_script_path = \'/wp-includes/js/jquery/jquery.js?ver=1.12.4\';
$jquery_dependent_script_paths = [
get_theme_file_uri( \'/assets/js/global.js\' ),
get_theme_file_uri( \'/assets/js/jquery.scrollTo.js\' ),
get_theme_file_uri( \'/assets/js/skip-link-focus-fix.js\' ),
get_theme_file_uri( \'/assets/js/navigation.js\' )
];
$jquery_dependent_script_paths_json = json_encode($jquery_dependent_script_paths);
$inline_scripts = <<<EOD
<script>
(function () {
\'use strict\';
if (!window.fetch) return;
/**
* Fetch Inject v1.6.8
* Copyright (c) 2017 Josh Habdas
* @licence ISC
*/
var fetchInject=function(){"use strict";const e=function(e,t,n,r,o,i,c){i=t.createElement(n),c=t.getElementsByTagName(n)[0],i.type=r.blob.type,i.appendChild(t.createTextNode(r.text)),i.onload=o(r),c?c.parentNode.insertBefore(i,c):t.head.appendChild(i)},t=function(t,n){if(!t||!Array.isArray(t))return Promise.reject(new Error("`inputs` must be an array"));if(n&&!(n instanceof Promise))return Promise.reject(new Error("`promise` must be a promise"));const r=[],o=n?[].concat(n):[],i=[];return t.forEach(e=>o.push(window.fetch(e).then(e=>{return[e.clone().text(),e.blob()]}).then(e=>{return Promise.all(e).then(e=>{r.push({text:e[0],blob:e[1]})})}))),Promise.all(o).then(()=>{return r.forEach(t=>{i.push({then:n=>{"text/css"===t.blob.type?e(window,document,"style",t,n):e(window,document,"script",t,n)}})}),Promise.all(i)})};return t}();
fetchInject(
$jquery_dependent_script_paths_json
, fetchInject([
"{$jquery_script_path}"
]));
})();
</script>
EOD;
function wc_inline_head() {
global $inline_scripts;
echo "{$inline_scripts}";
global $inline_styles;
echo "{$inline_styles}";
}
结束