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

时间:2014-10-27 08:56:21

标签: javascript jquery css wordpress twitter-bootstrap

我将bootstrap主题转换为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有什么区别? 请帮我。我是初学者使用bootstrap。

2 个答案:

答案 0 :(得分:5)

您需要做的就是将它们排队。另外,我建议摆脱你的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的   在包含之前会自动包含注册的脚本   排队脚本,将注册脚本的句柄列为   依赖性。

答案 1 :(得分:2)

你使用&#34; wp_enqueue_style&#34;和&#34; wp_enqueue_script&#34;。

例如:

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