使用functions.php将Bootstrap添加到Wordpress

时间:2016-04-20 08:01:52

标签: php wordpress twitter-bootstrap

我尝试使用以下代码将Bootstrap嵌入到Wordpress中,但它不起作用。需要帮助..........

<?php  

 function resources() {

 wp_enqueue_style('style',get_stylesheet_uri());          
 wp_enqueue_style('bootstrap.min',get_template_directory_uri().'/css/bootstrap.min.css');
 wp_enqueue_style('bootstrap',get_template_directory_uri().'/css/bootstrap.css');
 wp_enqueue_style('bootstrap-theme.min',get_template_directory_uri().'/css/bootstrap-theme.min.css');
}     

add_action('wp_enqueue_scripts', 'resources');

4 个答案:

答案 0 :(得分:5)

这可能对您有所帮助

WordPress将使用functions.php中的wp_enqueue_style和wp_enqueue_script。特别是,我们需要创建一个新函数来添加(或排队)css样式和js脚本,然后允许WordPress通过添加wp_enqueue_scripts动作在适当的时候调用它。

/* Add bootstrap support to the Wordpress theme*/

function theme_add_bootstrap() {
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );

供参考:click here

答案 1 :(得分:1)

为了使wp_enqueue_scripts function.php正常工作,<?php wp_head(); ?>需要在结束</head><?php wp_footer(); ?>之前放置</body>才能关闭{{1}}模板文件中的标记。

因为您没有发布模板文件,所以我认为这可能是导致您出现问题的原因。

希望这个帮助

答案 2 :(得分:0)

只需使用引导程序CDN - https://www.bootstrapcdn.com/

即可

在您的子主题中找到函数theme_enqueue_styles()并添加如下所示的两行额外代码。

function theme_enqueue_styles() {
    // Add the following two lines //
    wp_enqueue_style( 'bootstrap-cdn-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
    wp_enqueue_script( 'bootstrap-cdn-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' );
    // ------               -------//
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}

答案 3 :(得分:0)

确保下载的引导程序文件的文件位置。并将此代码放入functions.php

1.stylesheet CSS文件

2.script js文件

<?php

function load_stylesheets()

{

// enqueue parent styles

wp_enqueue_style('bootstrap', get_stylesheet_directory_uri().' /css/bootstrap.min.css');

wp_enqueue_script('bootstrap', get_stylesheet_directory_uri().' /js/bootstrap.min.js');

}

add_action('wp_enqueue_scripts','load_stylesheets');

?>