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

Posted 2023-03-06

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

【英文标题】：How to load bootstrap script and style in functions.php (wordpress)?

【发布时间】：2014-12-22 10:04:56

【问题描述】：

我将引导主题转换为 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 有什么区别？ 请帮我。我是使用引导程序的初学者。

【参考方案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 将在包含之前自动包含已注册的脚本 将注册脚本的句柄列为 依赖。

【讨论】：

非常感谢@rnevius :) 样式怎么样？

我已经用更多的解释编辑了我的答案。对于入队样式，您可以使用 wp_enqueue_style 以相同的方式将它们包含在同一个函数中。

尝试将'custom-script' 队列中的数组更改为array('bootstrap-jquery')。这样，您的脚本会等到第二个脚本加入队列（假设您按照我上面的方式命名）。

太棒了。如果它解决了您的问题，请接受/支持这个答案。

我使用联系表单 7 作为我的联系页面表单，由于更改它不起作用，它确实有一个 jquery 冲突。那么如何解决呢？非常感谢@rnevius

【参考方案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');

【讨论】：

感谢@elnaz :) 实际上它现在正在工作，但由于 jquery 冲突，联系表 7 无法正常工作。请帮我解决这个问题。