分类： 加载CSS或JavaScript

加载CSS或JavaScript

由于插件不控制 WordPress 网站的外观和感觉，如果你需要使用自定义 CSS 或 JavaScript，你需要遵循一个称为“入队”的过程。

为了添加自定义 CSS 或 JavaScript，WordPress 插件需要一种方法，在任何时候将脚本或样式标签添加到正在渲染的 HTML 中。

幸运的是，WordPress 允许插件开发者将其插件的 CSS 或 JavaScript 入队，这样它就会被添加到任何文章或页面请求的 HTML 中的正确位置。

在本课中，你将学习如何在前端或管理仪表板上入队自定义 CSS 和 JavaScript。

入队 CSS

与大多数 WordPress 功能一样，首先你需要在特定钩子上注册一个回调函数，并使用该回调函数来入队你的脚本或样式。

要使用的正确钩子是 wp_enqueue_scripts 动作钩子。从文档中可以看到，尽管钩子名称如此，但它用于入队脚本和样式。

因此，首先在钩子上注册回调函数，并创建回调函数。

<?php
add_action( 'wp_enqueue_scripts', 'bookstore_enqueue_scripts' );

function bookstore_enqueue_scripts() {
    // 在这里入队脚本或样式
}

现在你可以入队自定义 CSS 或 JavaScript 了。

让我们针对前端任何给定书籍的标题，并将其变为红色。

继续在你的 bookstore 插件目录中创建一个空的 bookstore.css 文件，以便你的插件将其入队。

在该文件中，添加以下代码：

body.single-book h1 {
    color: red;
}

每当渲染单本书籍时，它都会将 single-book 类添加到 HTML 页面的 body 元素中，因此这段代码会将 body 标签内任何 h1 标签的颜色更改为红色。

现在你已经创建了 CSS 文件，需要在 bookstore_enqueue_scripts() 函数中将其入队。

你可以使用 wp_enqueue_style 函数来实现这一点。

至少，你需要向该函数传递前两个参数：

  • 句柄（handle），这是样式表的唯一名称，在样式表添加到 HTML 时使用
  • 源路径（src），即样式表的完整 URL，或相对于 WordPress 根目录的样式表路径。

对于插件，你可以使用 plugins_url 函数获取插件目录的 URL，然后将其与 CSS 文件的路径拼接起来。

<?php
function bookstore_enqueue_scripts() {
    wp_enqueue_style( 'bookstore', plugins_url( 'bookstore.css', __FILE__ ) );
}

在 WordPress 请求期间，这会将样式表句柄和 URL 添加到一个 wp_styles 对象中。

当生成要渲染的 HTML，并且 WordPress 准备输出 head 标签时，它会遍历 wp_styles 对象中的每个样式表，并输出一个 HTML 样式元素，将句柄作为元素的 id 属性，将源路径作为元素的 href 属性。

入队此 CSS 文件后，继续浏览你添加的任何书籍的单本书籍视图，你应该会注意到 h1 元素是红色的。

入队 JavaScript

你也可以使用相同的 wp_enqueue_scripts 动作钩子回调函数，从你的插件入队 JavaScript 文件。

唯一的区别是，你可以使用 wp_enqueue_script 而不是 wp_enqueue_style。

与 wp_enqueue_style 类似，你需要向 wp_enqueue_script 传递唯一的句柄和源路径参数，以便它入队你的 JavaScript 文件。

首先，在 bookstore 目录中创建一个 bookstore.js 文件，并向其中添加一个简单的 JavaScript 警告框。

alert( 'Hello from Bookstore' );

现在，更新 bookstore_enqueue_scripts 函数，使用 wp_enqueue_script 入队 bookstore.js 文件。

<?php
function bookstore_enqueue_scripts() {
    wp_enqueue_style( 'bookstore', plugins_url( 'bookstore.css', __FILE__ ) );
    wp_enqueue_script( 'bookstore', plugins_url( 'bookstore.js', __FILE__ ) );
}

与样式表一样，wp_enqueue_script 会将脚本句柄和 URL 添加到一个 wp_scripts 对象中，并为每个脚本输出一个 HTML 脚本元素，在 id 属性中使用句柄，在 src 属性中使用 URL。

入队此脚本后，浏览你添加的任何书籍的单本书籍视图，你应该会看到页面上弹出警告框。

在管理仪表板上入队

你也可以在管理仪表板上入队样式和脚本，使用 admin_enqueue_scripts 动作钩子而不是 wp_enqueue_scripts 动作钩子。

<?php
add_action( 'admin_enqueue_scripts', 'bookstore_admin_enqueue_scripts' );

function bookstore_admin_enqueue_scripts() {
    // 在这里入队管理仪表板的脚本或样式
}

一旦你在钩子上注册了回调函数，入队脚本和样式的过程与前端相同，使用 wp_enqueue_style 和 wp_enqueue_script。

选择性入队

在本课的示例中，bookstore CSS 和 JavaScript 在网站的每个页面上都被入队。这并不理想。例如，对于 CSS，它专门针对单本书籍视图上的 h1 元素，因此你不需要为除书籍之外的任何内容入队 CSS。

可以进行选择性入队，即你确定文件应该被入队的具体场景。

例如，在 bookstore.css 的情况下，你可以使用 WordPress 的 is_singular() 函数来检查当前渲染的内容是否为书籍自定义文章类型。

如果不是，则退出函数，不加载样式表或脚本文件。

add_action( 'wp_enqueue_scripts', 'bookstore_enqueue_scripts' );
function bookstore_enqueue_scripts() {
    if ( ! is_singular( 'book' ) ) {
        return;
    }
    wp_enqueue_style(
        'bookstore-style',
        plugins_url() . '/bookstore/bookstore.css'
    );
    wp_enqueue_script(
        'bookstore-script',
        plugins_url() . '/bookstore/bookstore.js'
    );
}

还有其他多种方法可以确保你的插件样式表或脚本文件仅在需要时加载。这样做意味着你的插件不会给任何安装了它的 WordPress 站点增加不必要的开销或加载时间。