README

用于在 WordPress 中轻松排队脚本和样式的工具。支持 Laravel Mix 清单和 WP-Scripts 资产文件！

介绍

此工具旨在使 WordPress 脚本和注册的排队更加清晰，并使使用 Laravel Mix 清单更容易管理。

此工具可以让您

定义脚本和样式的根 URL，这样您就只需使用一次 get_stylesheet_directory_uri，在排队时使用相对路径
添加您的 mix-manifest.json 文件，以便所有 mix 编译的资产都自动进行哈希处理
使用流畅的界面排队资产

入门

首先安装此包！

然后从现在开始，您的入口点将是 \Morningtrain\WP\Enqueue\Enqueue。

安装

此工具作为包提供，可以通过 composer 安装

composer require morningtrain/wp-enqueue

使用

以下是一个快速演示此包如何工作的示例！

use Morningtrain\WP\Enqueue\Enqueue;

// functions.php (or plugin.php)
Enqueue::setup(get_stylesheet_directory_uri() . "/public/build", get_stylesheet_directory() . "/public/build");

// Then wherever you wish to enqueue - preferably in the wp_enqueue_scripts action
Enqueue::script('main')
    ->src('js/main.js')
    ->deps('jquery')
    ->applyAssetFile() // This applies the main.asset.php file containing dependencies and version. Dependencies are pushed to existing dependencies
    ->enqueue();

// Or to simply register a stylesheet
Enqueue::style('main')
    ->src('css/main.css')
    ->register();

// In a block, on a route or in a condition somewhere you can now enqueue the already registered stylesheet
Enqueue::style('main')->enqueue();

开始之前

所有相对路径应与 webpack.mix.js 中的路径匹配。

所以如果你在 mix 中有如下内容

// webpack.mix.js

let mix = require('laravel-mix');

mix.js('resources/js/app.js', 'js').setPublicPath('public/build');

那么你的公共目录将是 public/build，所有资产都将使用相对于此路径的源。所以在上面的例子中，你会像这样排队 app.js

Enqueue::script('app', 'js/app.js')->enqueue();

注意：在 wp_enqueue_scripts 钩子之前排队资产将自动延迟排队，直到 WordPress 准备就绪。当然，您仍然应该在正确的钩子中正确排队。

定义根 URL

您可以定义构建目录的根 URL。

通过这样做，现在您可以使用相对路径排队资产。如果您使用 Laravel Mix，则应与在 webpack.mix.js 中定义的路径匹配

// Setting the root URL
\Morningtrain\WP\Enqueue\Enqueue::setRootUrl(get_stylesheet_directory_uri() . '/public/build');

您还可以通过调用 Enqueue::getRootUrl() 获取 URL

// Getting the root URL
$rootUrl = \Morningtrain\WP\Enqueue\Enqueue::getRootUrl();

添加 MixManifest 文件

如果您使用 Laravel Mix，则可以添加生成的 mix-manifest.json 文件。通过这样做，所有排队的资产将自动使用哈希源。

这是一种轻松方便的方法来清除客户端缓存的资产而无需担心。

// Adding the manifest file
\Morningtrain\WP\Enqueue\Enqueue::addManifest(get_stylesheet_directory() . '/public/build/mix-manifest.json');

您还可以检索清单内容

// Adding the manifest content
\Morningtrain\WP\Enqueue\Enqueue::getManifest();

加载脚本和样式

加载脚本或样式几乎相同！从 Enqueue 构造一个 Script 或 Style

然后，使用流畅的 API 配置您的资产，最后在末尾排队或注册。

注意：这些方法的行为与它们包装的 WordPress 方法 wp_enqueue_script() 和 wp_enqueue_style() 以及它们的注册等效方法相同。

// Beginning an Enqueue chain
// This is how you start enqueueing or registering a script
\Morningtrain\WP\Enqueue\Enqueue::script('my-script');
// ... and for a stylesheet
\Morningtrain\WP\Enqueue\Enqueue::style('my-style');

在此之后检查返回的实例。所有选项都可作为链式方法使用！

排队

要排队，只需通过调用 enqueue() 结束链

// Enqueue a script called 'my-script' which is located in the /js directory
\Morningtrain\WP\Enqueue\Enqueue::script('my-script')
    ->src('js/my-script.js')
    ->enqueue();

// Or you may supply the source as the second param as so
\Morningtrain\WP\Enqueue\Enqueue::script('my-script', 'js/my-script.js')
    ->enqueue();

注册

要注册而不是排队，请使用 register()

// Register a script called 'my-script' which is located in the /js directory
\Morningtrain\WP\Enqueue\Enqueue::script('my-script')
    ->src('js/my-script.js')
    ->register();

然后您可以通过这种方式排队您的资产

// Enqueue a script called 'my-script' which has already been registered
\Morningtrain\WP\Enqueue\Enqueue::script('my-script')
    ->enqueue();

选项

这些选项与这些类包装的方法相同。

注意： deps() 也可以接受一个字符串，如果在相同的链中多次调用它，则每次调用都会将其值推送到列表中。

脚本

以下是一个使用所有可用选项的示例

请参阅 developer.wordpress.org 上的 wp_enqueue_script

\Morningtrain\WP\Enqueue\Enqueue::script('my-script')
    ->src('js/my-script.js')
    ->deps('jquery')
    ->ver('1.0')
    ->inFooter(true)
    ->enqueue();

样式

以下是一个使用所有可用选项的示例

请参阅 developer.wordpress.org 上的 wp_enqueue_style

\Morningtrain\WP\Enqueue\Enqueue::style('my-style')
    ->src('css/my-style.css')
    ->deps('print-styles')
    ->ver('1.0')
    ->media('print')
    ->enqueue();

命名空间

您可以为位于代码库其他位置的脚本或样式注册一个命名空间。

为此，简单添加命名空间，然后在您的句柄中使用此命名空间。在编写插件时，命名空间特别有用。

添加命名空间

\Morningtrain\WP\Enqueue\Enqueue::addNamespace('myPlugin',\plugin_dir_url(__FILE__). "public/build", __DIR__ . "/public/build/mix-manifest.json");

使用命名空间

\Morningtrain\WP\Enqueue\Enqueue::style('myPlugin::main')
    ->src('css/main.css')
    ->enqueue();

鸣谢

测试

composer test

许可证

MIT 许可证（MIT）。有关更多信息，请参阅许可文件

morningtrain / wp-enqueue

维护者

详细信息