如何在WordPress主题中正确使用wp_enqueue_style()和wp_enqueue_script()函数?

2024-11-09 17 0

在WordPress中,wp_enqueue_style()wp_enqueue_script() 是用于注册和排队(enqueue)样式表和脚本的函数。以下是正确使用这些函数的步骤:

使用 wp_enqueue_style() 注册和排队样式表

  1. 在主题的 functions.php 文件中添加以下代码:
function my_theme_enqueue_styles() {
    // 注册样式表
    wp_register_style('my-theme-style', get_stylesheet_uri());

    // 排队样式表
    wp_enqueue_style('my-theme-style');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

这里,get_stylesheet_uri() 通常返回当前主题的样式表路径。wp_register_style() 用于注册样式表,而 wp_enqueue_style() 用于实际将样式表添加到页面上。

  1. 如果需要添加额外的样式表,可以这样做:
function my_theme_enqueue_styles() {
    // 注册并排队主题样式表
    wp_enqueue_style('my-theme-style', get_stylesheet_uri());

    // 注册并排队额外的样式表
    wp_enqueue_style('additional-style', get_template_directory_uri() . '/css/additional-style.css');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

在这里,get_template_directory_uri() 返回当前主题的路径,可以用来指定额外的样式表文件。

使用 wp_enqueue_script() 注册和排队脚本

  1. 在主题的 functions.php 文件中添加以下代码:
function my_theme_enqueue_scripts() {
    // 注册脚本
    wp_register_script('my-theme-script', get_template_directory_uri() . '/js/my-theme.js', array('jquery'), null, true);

    // 排队脚本
    wp_enqueue_script('my-theme-script');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

在这里,get_template_directory_uri() 同样用于获取当前主题的路径,后面跟上脚本的相对路径。array('jquery') 表示这个脚本依赖于 jQuery,因此 jQuery 将在它之前加载。null 是脚本的版本号,可以用来强制浏览器加载最新版本的脚本。true 表示脚本应该被放在页面的底部。

  1. 如果脚本需要使用 WordPress 提供的本地化数据,可以这样添加:
function my_theme_enqueue_scripts() {
    // 注册脚本
    wp_register_script('my-theme-script', get_template_directory_uri() . '/js/my-theme.js', array('jquery'), null, true);

    // 本地化脚本
    $translation_array = array(
        'some_string' => __('Some string', 'my-theme'),
        'a_value' => '10'
    );
    wp_localize_script('my-theme-script', 'my_theme_script_obj', $translation_array);

    // 排队脚本
    wp_enqueue_script('my-theme-script');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

在这里,wp_localize_script() 用于将 PHP 变量传递给 JavaScript。

注意事项:

  • 确保 wp_enqueue_style()wp_enqueue_script()wp_enqueue_scripts 动作钩子下被调用。
  • 如果你的脚本或样式依赖于其他脚本或样式,确保在注册时正确设置了依赖关系。
  • 避免在主题中直接使用 <script><link> 标签来加载脚本和样式表,因为这不符合 WordPress 的最佳实践。

相关文章

在WordPress主题开发中,如何使用wp_nav_menu()函数来自定义菜单?
如何使用the_post()函数在WordPress主题中循环显示文章?
在WordPress插件开发中,如何创建自定义数据库表?
如何使用WordPress的wp_nav_menu()函数自定义菜单输出?
在WordPress插件开发中,如何使用选项API来保存和获取插件设置?
如何使用WordPress的the_post()函数在主题中循环输出内容?