使用 Sage WordPress 主题包含 JS 文件的正确方法答案

【问题标题】：Proper way to include JS files with Sage WordPress theme使用 Sage WordPress 主题包含 JS 文件的正确方法
【发布时间】：2016-04-27 11:54:45
【问题描述】：

来自the doc 我无法找到将我的 JS 文件包含到 Sage 主题中的正确方法。正确的程序是什么？

【问题讨论】：

标签： javascript wordpress dependencies

【解决方案1】：

包括自定义脚本（未通过 bower 包管理器安装）

您可以使用scripts/**/* 全局模式。这会将assets/scripts/ 目录中的所有脚本捆绑到dist/scripts/main.js 文件中。

像这样编辑你的assets/manifest.json：

{ 
  "dependencies": {
    "main.js": {
      "vendor": [
        // Your external libs that are not available via bower
      ]
      "files": [
        "scripts/**/*",
        "scripts/main.js"
      ],
      "main": true
    },
    .
    .
    .

vendor - 属性路径相对于您的项目根目录
files - 属性相对于您的 assets 文件夹

更多信息请访问examples。

安装和包含 bower 依赖项

例如，让我们安装轮播Slick库。

通过凉亭安装库
```
bower install --save slick-carousel
```
接下来，您需要从已安装的包中说明您需要哪些文件。因此，您需要将这些文件的路径添加到 bower.json 文件的 overrides 部分。

注意：路径相对于/bower_components/<package_name>。

    "slick-carousel": {
      "main": [
        "./slick/slick.min.js",
        "./slick/slick.css"
       ]
    }

现在库将成为已编译的 dist/scripts/main.js 文件的一部分。

【讨论】：

这部分对我有用，但当函数位于 myscripts.js 中时，我似乎无法从 main.js 调用函数。我还必须有 (function($) { //all code with jq// })(jQuery);否则得到通常的'$ is nota function'。我做错了什么？
这看起来很相关：discourse.roots.io/t/how-does-sage-9-enqueue-jquery/11239/8

【解决方案2】：

您需要在functions.php 文件中添加代码。您将看到 sage_sripts 或类似功能，在该功能中您需要添加 wp_enqueue_script

https://developer.wordpress.org/reference/functions/wp_enqueue_script/

这是一个示例：

/**
 * Enqueue scripts and styles.
 */
function sage_scripts() {

    $scripts_version = 1;

    wp_enqueue_style( 'sage-style', get_stylesheet_uri() );

    wp_enqueue_script( 'yourscript', get_template_directory_uri() . '/js/yourscript.js', array(), '1', true );

}
add_action( 'wp_enqueue_scripts', 'sage_scripts' );

【讨论】：

【解决方案3】：

我没有使用过这个特定的主题，但很可能有一个“自定义 javascript”框，您可以在其中插入您的 javascript。如果您更喜欢将 javascript 保存在文件中而不是复制粘贴到您的主题中，那么答案会有点复杂。

我很欣赏 Genesis 框架的做法。他们提供了一个用于将您想要的任何内容（元标记、样式、脚本）插入主题头部的框，而不是用于 javascript 的框。

您还可以使用 wp_enqueue_script() 通过主题的 functions.php 加载文件。这里的问题是您不能再（轻松地）更新您的主题，因为该过程会覆盖对文件的更改。出于安全原因，您不想错过任何一次更新。

That's why I recommend a solution like this - 一个快速简便的插件，用于将脚本文件插入到文档中。您将文件放入您的主题中，以后不会有人意外覆盖或删除您的更改。

【讨论】：