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

https://wordpress.stackexchange.com/questions/556

16-10-2019
|

题

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

是否有插入外部或自定义JS文件的首选方法？
如何将JS文件绑定到单页？（我有主页）

解决方案

利用 `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" );
}

那是基础。

预定义和多个依赖脚本

但是，假设您想在 WordPress包含的默认脚本列表和您希望您的脚本取决于它们吗？简单，只需使用前两个脚本预定义的手柄在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中的QUERY参数中输出到脚本中，并迫使浏览器重新下载，如果版本更改，则可能会缓存文件。

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

这网络性能的第一条规则说 最小化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 );
}

将您的脚本加载到页脚中

如果您的脚本是需要加载到页脚的脚本之一，则有第5个参数 wp_enqueue_script() 这告诉WordPress延迟它并将其放在页脚中（假设您的主题并没有行为不当，并且确实确实如此像所有好的WordPress主题一样，调用WP_FOOTER挂钩):

<?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 );
}

更细的颗粒控制

如果您需要比这更好的控制奥兹有一篇很棒的文章如何：使用WordPress插件加载JavaScript 详细说明。

禁用脚本以获得控制

贾斯汀·塔德洛克有一篇不错的文章题为如何禁用脚本和样式如果您想：

将多个文件组合到单个文件中（里程可能会随着JavaScript而变化）。
仅在我们使用脚本或样式的页面上加载文件。
不要再使用！在我们的style.css文件中进行重要的！进行简单的CSS调整。

通过PHP传递值 `wp_localize_script()`

在他的博客上，弗拉基米尔·普雷洛瓦克（Vladimir Prelovac）有一篇很棒的文章题为将JavaScript代码添加到WordPress插件的最佳实践他在哪里讨论 wp_localize_script() 为了允许您设置服务器端PHP中的变量值，以后在客户端JavaScript中使用。

真的很好地控制了 `wp_print_scripts()`

最后，如果您需要真正细粒度的控制，您可以研究 wp_print_scripts() 如上所述啤酒星球在标题的帖子中如何有条件地包含CSS和JavaScript，并且仅在帖子需要时才需要.

Epiloque

这就是关于其中的最佳实践，其中包括JavaScript文件和WordPress。如果我错过了一些东西（我可能有），请务必在评论中告诉我，以便我可以为未来的旅行者添加更新。

其他提示

为了补充Mikes的精彩例证，我只想指出，依赖性包含的脚本不需要被启用...

我将在 插件中的脚本 迈克的回答。

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。

例如，对于您可能不想在单独文件中包含的小脚本，因为它们是动态生成的，WordPress 4.5，并且进一步报价 wp_add_inline_script. 。此功能基本上将脚本锁定到另一个脚本。

例如，假设您正在开发一个主题，并希望您的客户能够通过选项页面插入自己的脚本（例如Google Analytics（例如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);

我最喜欢的方法是实现良好的表现，而不是使用 wp_enqueue_script 我将Heredoc与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}";
}

导致看起来像这样的瀑布，立即加载所有东西，但控制执行顺序：

笔记： 这需要使用Fetch API，所有浏览器都不可用。

许可以下： CC-BY-SA 和归因

不隶属于 wordpress.stackexchange