在WordPress中，使用自定义脚本和样式可以让你的网站更具个性化和功能丰富。本文将教你如何使用wp_enqueue_script()和wp_enqueue_style()这两个函数来加载它们。

第一步：创建你的自定义脚本和样式文件

首先，你需要创建JavaScript和CSS文件。通常，这些文件会被放在你的主题文件夹中的js和css子文件夹中。例如：

• JavaScript文件：/wp-content/themes/your-theme/js/custom.js
• CSS文件：/wp-content/themes/your-theme/css/custom.css

第二步：在主题的functions.php文件中注册脚本和样式

打开你的主题文件夹中的functions.php文件，并添加以下代码来注册你的脚本和样式。

注册JavaScript脚本

function my_custom_scripts() {
    // 注册自定义JavaScript脚本
    wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');

这里，custom-js是脚本的标识符，get_template_directory_uri()函数用于获取主题目录的URL，array('jquery')表示这个脚本依赖于jQuery，'1.0'是脚本的版本号，true表示脚本应该被放在页面的底部。

注册CSS样式

function my_custom_styles() {
    // 注册自定义CSS样式
    wp_enqueue_style('custom-css', get_template_directory_uri() . '/css/custom.css', array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'my_custom_styles');

同样地，custom-css是样式的标识符，get_template_directory_uri()用于获取主题目录的URL，array()表示这个样式没有依赖，'1.0'是样式的版本号，'all'表示样式适用于所有设备。

第三步：在适当的时机加载脚本和样式

通过上面的代码，我们已经注册了脚本和样式，但是它们会在每个页面上自动加载。如果你想要在特定的页面或情况下加载它们，你可以使用条件语句来控制。

function my_custom_scripts() {
    if (is_page('about')) { // 仅在“关于”页面上加载脚本
        wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');

在这个例子中，is_page('about')函数检查当前页面是否是“关于”页面。如果是，它将加载自定义JavaScript脚本。

结语

现在你已经学会了如何在WordPress中加载自定义脚本和样式。通过这些简单的步骤，你可以轻松地定制你的网站，添加新的功能和样式。如果你有任何疑问或需要进一步的帮助，请随时在评论区留言。