如何在Wordpress插件开发中包含bootstrap？

Question

我正在开发插件,我想在我的插件中包含bootstrap.包含的最佳方式是什么？我找不到任何与此相关的内容,到目前为止我找到了几个bootstrap插件,我不需要,我需要在我的插件中包含一些来自bootstrap的js和css元素.我是bootstrap的新手.

此外,我尝试过类似于WP主题的内容,但它不起作用？

如果您需要更多信息,请问我,我会为您提供

我试图在主文件index.php中包含类似于WP主题的东西:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>                 

Answer 1

您需要使用wp_register_script()然后wp_enqueue_script()使用js.

你需要使用wp_register_style()然后wp_enqueue_style()用于css.

请参阅以下js示例...

wp_register_script('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');
wp_enqueue_script('prefix_bootstrap');

现在为css做同样的事情......

wp_register_style('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
wp_enqueue_style('prefix_bootstrap');

如果您将使用ajax,最好将它们放在可重用的方法中.这样,您就不需要重新放置ajax方法中的每个脚本或样式表.

function prefix_enqueue() 
{       
    // JS
    wp_register_script('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');
    wp_enqueue_script('prefix_bootstrap');

    // CSS
    wp_register_style('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
    wp_enqueue_style('prefix_bootstrap');
}

使用"prefix_"有助于防止冲突,从长远来看可以省去一些麻烦.

Answer 2

您可以使用“wp_head”操作在每次加载页面时将代码添加到网站的标题。将这样的内容放入您的插件中：

    add_action('wp_head','head_code');

function head_code()
{

$output = '<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>';    
$output .= '<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>'; 
$output .= '<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>';

echo $output;

}