如何在functions.php（wordpress）中加载引导脚本和样式？

Question

我将引导主题转换为 wordpress。现在，我在加载引导脚本和样式时遇到了问题。 这是我在functions.php中的代码

   function wpbootstrap_scripts_with_jquery()
    {

        // Register the script like this for a theme:
        wp_register_script( 'custom-script', get_template_directory_uri() . '/js/bootstrap.js', array( 'jquery' ) );
        wp_enqueue_script( 'samplejs', get_template_directory_uri() . '/js/jquery.min.js', array( '' ) );
            wp_enqueue_script( 'samplejs', get_template_directory_uri() . '/js/clean-blog.min.js', array( '' ) );
        // For either a plugin or a theme, you can then enqueue the script:
        wp_enqueue_script( 'custom-script' );
    }

add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

我在标题中添加了这个

<?php wp_enqueue_script("jquery"); ?>

补充问题： wp_register 和 wp_enqueue 有什么区别？ 请帮我。我是使用引导程序的初学者。

Answer 1

您需要做的就是将它们排入队列。此外，我建议摆脱您的 jquery 导入（第二个 wp_enqueue）。 WordPress 默认包含 jQuery，并且您已经将它包含在第一个脚本中（因为您已将其列为依赖项）。这是一个示例，但这会将 jquery 排入队列两次（本机 jquery 和引导 jquery）：

function wpbootstrap_scripts_with_jquery()
{
    // Register the script like this for a theme:
    wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/bootstrap.js', array( 'jquery' ) );
    wp_enqueue_script( 'bootstrap-jquery', get_stylesheet_directory_uri() . '/js/jquery.min.js' );
    wp_enqueue_script( 'blog-scripts', get_stylesheet_directory_uri() . '/js/clean-blog.min.js' );
}

add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

您需要在将脚本加入队列之前注册脚本的唯一原因是，如果其中一个脚本是依赖项。来自文档：

wp_register_script() 在 WordPress 中注册要链接的脚本文件 稍后使用 wp_enqueue_script() 函数转到页面，该函数可以安全地 处理脚本依赖关系。

已经使用 wp_register_script() 预先注册的脚本 如果它们是，则不需要使用 wp_enqueue_script() 手动排队 列为另一个入队脚本的依赖项。 WordPress 将在包含之前自动包含已注册的脚本 将注册脚本的句柄列为 依赖。

Answer 2

你可以使用“wp_enqueue_style”和“wp_enqueue_script”。

例如：

function reg_scripts() {
    wp_enqueue_style( 'bootstrapstyle', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'bootstrapthemestyle', get_template_directory_uri() . '/css/bootstrap-theme.min.css' );
    wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), true );
}
add_action('wp_enqueue_scripts', 'reg_scripts');