使用动作挂钩添加 CSS 和 JS 文件 - JavaScript

在 JavaScript 中，通过使用动作挂钩，我们可以在页面加载时自动添加所需的 CSS 和 JavaScript 文件。这样做的好处是可以提高页面加载速度，同时方便管理和维护。

动作挂钩是什么？

动作挂钩（Action Hook）是 WordPress 中的一个重要概念，它是一种机制，用于在 WordPress 的运行过程中添加、删除或修改功能。可以理解为在运行过程中，程序会发出一些信号，我们可以挂钩在这些信号上，执行我们自己的代码。

如何使用动作挂钩添加 CSS 和 JS 文件？

在 JavaScript 中，我们可以使用 wp_enqueue_style 函数添加 CSS 文件，使用 wp_enqueue_script 函数添加 JS 文件。这些函数需要在 wp_enqueue_scripts 动作挂钩中调用，如下所示：

function my_scripts() {
    wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/style.css' );
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

上述代码将会在 wp_enqueue_scripts 动作挂钩中添加一个名为 my-style 的 CSS 文件和一个名为 my-script 的 JavaScript 文件。其中，get_stylesheet_directory_uri 函数用于获取当前主题的样式文件所在的目录，get_template_directory_uri 函数用于获取当前主题的 JavaScript 文件所在的目录。

总结

使用动作挂钩添加 CSS 和 JS 文件可以提高网页的加载速度，同时方便管理和维护。我们可以使用 wp_enqueue_style 函数添加 CSS 文件，使用 wp_enqueue_script 函数添加 JS 文件，并在 wp_enqueue_scripts 动作挂钩中调用这些函数。