包含具有Sage WordPress主题的JS文件的正确方法

Question

从文档中，我无法找到将JS文件包含到Sage主题中的正确方法。 正确的程序是什么？

Answer 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文件夹的

有关更多信息，请访问一些示例 。

安装并包括Bower依赖性

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

1. 通过Bower安装库

    bower install --save slick-carousel 

2. 接下来，您需要从安装的软件包中确定需要哪些文件。 因此，您需要添加这些文件的路径以overrides bower.json文件的部分。

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

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

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

Answer 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' );

Answer 3

我没有使用这个特定主题，但是很可能有一个“自定义javascript”框，您可以在其中插入javascript。 如果您希望将javascript保留在文件中，而不是复制粘贴到主题中，则答案要复杂一些。

我很欣赏Genesis Framework的工作方式。 他们提供了一个框，用于将您想要的任何内容（元标记，样式，脚本）插入主题的标题，而不是使用javascript。

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

这就是为什么我推荐这样的解决方案的原因-一种快速简便的插件，用于将脚本文件插入文档中。 您将文件放入主题中，以后没有人会意外覆盖或删除您的更改。