Javascript 如何在functions.php(wordpress)中加载引导脚本和样式?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26583978/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-22 23:05:50  来源:igfitidea点击:

How to load bootstrap script and style in functions.php (wordpress)?

javascriptjquerycsswordpresstwitter-bootstrap

提问by akselrows

I converted bootstrap theme to wordpress. Now, I have a problem in loading the bootstrap scripts and style. This is my code in functions.php

我将引导程序主题转换为 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' );

and i add this in my header

我在我的标题中添加了这个

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

Additional question: What is the difference between wp_register and wp_enqueue? Please help me. Im beginner in using bootstrap.

附加问题: wp_register 和 wp_enqueue 有什么区别?请帮我。我是使用引导程序的初学者。

回答by rnevius

All you need to do is enqueue them. Also, I recommend getting rid of your jquery import (the second wp_enqueue). WordPress includes jQuery by default, and you're already including it in the first script (because you have listed it as a dependency). Here's an example, but this enqueues jquery twice (the native jquery, and the bootstrap jquery):

您需要做的就是将它们排入队列。另外,我建议摆脱您的 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' );

The only reason you'd need to register the scripts before enqueue-ing them, is if one of the scripts is a dependency. From the docs:

您需要在排队之前注册脚本的唯一原因是脚本之一是否是依赖项。从文档:

wp_register_script() registers a script file in WordPress to be linked to a page later using the wp_enqueue_script() function, which safely handles the script dependencies.

Scripts that have been pre-registered using wp_register_script() do not need to be manually enqueued using wp_enqueue_script() if they are listed as a dependency of another script that is enqueued. WordPress will automatically include the registered script before it includes the enqueued script that lists the registered script's handle as a dependency.

wp_register_script() 在 WordPress 中注册一个脚本文件,以便稍后使用 wp_enqueue_script() 函数链接到页面,该函数安全地处理脚本依赖项。

使用 wp_register_script() 预先注册的脚本如果被列为另一个已入队脚本的依赖项,则不需要使用 wp_enqueue_script() 手动入队。WordPress 会在包含已注册脚本句柄作为依赖项的入队脚本之前自动包含已注册脚本。

回答by elnaz

you cas use "wp_enqueue_style" and "wp_enqueue_script".

你 cas 使用“wp_enqueue_style”和“wp_enqueue_script”。

for example:

例如:

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');