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

时间:2014-06-03 13:21:30

标签: wordpress twitter-bootstrap include wordpress-plugin twitter-bootstrap-3

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

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

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

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

<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>                 

3 个答案:

答案 0 :(得分:11)

您需要使用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_”有助于防止冲突,从长远来看可以省去一些麻烦。

答案 1 :(得分:0)

每次加载页面时,您都可以使用'wp_head'操作将代码添加到网站的标题中。把这样的东西放到你的插件中:

<iframe src="a.html" height=1000 width=900></iframe>

答案 2 :(得分:0)

在插件主PHP文件中使用以下代码。 “ wp_print_styles”操作挂钩包括CSS样式。 “ wp_print_scripts”操作挂钩包括Java脚本。使用这两个挂钩在插件中包含Bootstraps Javascript和样式表。

 add_action( 'wp_print_styles', 'add_my_plugin_stylesheet' );
 function add_my_plugin_stylesheet() {
wp_register_style('mypluginstylesheet', '/wp-content/plugins/postgrid/style.css');

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

}

add_action('wp_print_scripts','add_my_plugin_js');
function add_my_plugin_js(){
wp_register_script('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');
wp_enqueue_script('prefix_bootstrap');

}