向站点添加自定义的javascript文件的首选方式是什么?

时间:2010-08-19 作者:naugtur

我已经添加了脚本,但我想知道首选的方式<我只是放了一个<script> 直接在header.php 我的模板的。

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

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 );
}
对脚本进行版本控制还要注意above 我们给插件一个版本号,并将其作为第四个参数传递给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 );
}
在页脚中加载脚本

如果脚本是需要加载到页脚中的脚本之一,则第5个参数为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 );
}
如果需要更细粒度的控制Ozh 有一篇题为How To: Load Javascript With Your WordPress Plugin 这更详细。

禁用脚本以获得控制

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);
}
当您设置依赖项时,WordPress将为您的脚本找到并将其排队,因此您不需要对这些脚本进行任何独立调用。

此外,有些人可能想知道设置多个依赖项是否会导致脚本以错误的顺序输出,下面让我举个例子

wp_enqueue_script( \'first-script\', \'example/path/example_script_1.js\', array(\'second-script\',\'third-script\') );
如果脚本二依赖于脚本三(即脚本三应首先加载),这无关紧要,WordPress将确定这些脚本的排队优先级并以正确的顺序输出它们,简而言之,WordPress会自动为您解决所有问题。

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}";
}
结果形成了如下瀑布,一次加载所有内容,但控制执行顺序:

enter image description here

Note: 这需要使用Fetch API,这在所有浏览器中都不可用。

结束

相关推荐

如何将外部jQuery/Javascript文件与WordPress链接

因此,我使用Starkers作为我下一个WP主题的基础,我遇到了一个小问题,我在header.php 但是当我使用Firebug检查我的网站时,我注意到jquery被下载了两次,我做了一些挖掘,并注意到我不仅包括了文件,还包括了wp_head() 作用在尝试修复该问题时,我注意到头文件中有一条注释,该注释源于“210”主题:/* Always have wp_head() just before the closing </head> * tag of your theme, or