在WordPress插件中,如何使用wp_enqueue_script()和wp_enqueue_style()来管理脚本和样式?

2025-01-02 6 0

在WordPress中,wp_enqueue_script()wp_enqueue_style() 是两个非常关键的函数,用于在网站的前端加载JavaScript脚本和CSS样式表。以下是如何使用这些函数来管理脚本和样式的基本步骤:

1. 使用 wp_enqueue_script() 加载JavaScript脚本

要使用 wp_enqueue_script() 加载JavaScript脚本,你需要按照以下步骤操作:

function my_theme_enqueue_scripts() {
    // 注册一个脚本
    wp_register_script('my-custom-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0.0', true);

    // 在页面上排队加载脚本
    wp_enqueue_script('my-custom-script');

    // 如果需要,你可以添加一些局部变量,这些变量可以在你的JavaScript脚本中使用
    $translation_array = array(
        'some_string' => __('Some string to translate', 'text-domain'),
        'a_value' => '10'
    );
    wp_localize_script('my-custom-script', 'myLocalized', $translation_array);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
  • my-custom-script 是脚本的唯一标识符。
  • get_template_directory_uri() . '/js/my-script.js' 是脚本文件的路径。
  • array('jquery') 表示这个脚本依赖于jQuery库。
  • '1.0.0' 是脚本的版本号。
  • true 表示脚本应该被放在页面的底部加载。
  • wp_localize_script() 允许你将PHP变量传递到JavaScript中。

2. 使用 wp_enqueue_style() 加载CSS样式表

加载CSS样式表与加载JavaScript脚本类似:

function my_theme_enqueue_styles() {
    // 注册一个样式表
    wp_register_style('my-custom-style', get_template_directory_uri() . '/css/my-style.css', array(), '1.0.0', 'all');

    // 在页面上排队加载样式表
    wp_enqueue_style('my-custom-style');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
  • my-custom-style 是样式表的唯一标识符。
  • get_template_directory_uri() . '/css/my-style.css' 是样式表的路径。
  • array() 可以包含这个样式表依赖的其他样式表的标识符。
  • '1.0.0' 是样式表的版本号。
  • 'all' 表示样式表应用于所有媒体类型。

注意事项:

  • 使用 wp_enqueue_script()wp_enqueue_style() 时,请确保你的脚本和样式表在WordPress的 wp_enqueue_scripts 动作钩子中被调用。
  • 如果你的脚本或样式表依赖于其他脚本或样式表,请在注册时指定依赖关系。
  • 使用版本号可以帮助避免浏览器缓存旧版本的脚本或样式表。
  • 通过 wp_localize_script() 可以安全地将PHP变量传递到JavaScript中,避免直接在JavaScript中插入PHP代码。

相关文章

在WordPress主题中,如何使用 get_header(), get_footer(), 和 get_sidebar() 函数来包含模板部分?
在WordPress主题开发中,如何使用 the_custom_logo() 函数来显示自定义标志?
在WordPress插件中,如何使用 wp_enqueue_script() 和 wp_enqueue_style() 来注册和排队脚本和样式?
如何使用WordPress的 get_option() 和 update_option() 函数来获取和更新选项?
如何使用WordPress的WP_Customize_Manager类来自定义主题定制器?
在WordPress主题中,如何使用wp_reset_postdata()来避免查询冲突?