twitter-bootstrap 如何在 Wordpress 插件开发中包含引导程序?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/24016321/
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
How to include bootstrap in Wordpress plugin development?
提问by user3042036
I am developing the plugin, and I would like to include bootstrap in my plugin. What is the best way to include? I couldn't find anything related to this, so far I have found several bootstrap plugin, which I dont need, I need to include some js and css element from bootstrap in my plugin. I am new to bootstrap.
我正在开发插件,我想在我的插件中包含引导程序。包含的最佳方式是什么?我找不到与此相关的任何内容,到目前为止我已经找到了几个我不需要的引导程序插件,我需要在我的插件中包含引导程序中的一些 js 和 css 元素。我是引导程序的新手。
Also I have tried something similar like including in WP theme, but it doesn't work?
我也尝试过类似的东西,比如包含在 WP 主题中,但它不起作用?
If you need more information, please ask me, I will provide you
如果您需要更多信息,请询问我,我会为您提供
I have tried to include something similar to WP theme in the main file, index.php this :
我试图在主文件 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>
回答by zgr024
You need to use wp_register_script()and then wp_enqueue_script()for js.
您需要使用wp_register_script()然后wp_enqueue_script()为js。
You need to use wp_register_style()and then wp_enqueue_style()for css.
您需要使用wp_register_style()然后wp_enqueue_style()用于css。
See the following js example...
看下面的js例子...
wp_register_script('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');
wp_enqueue_script('prefix_bootstrap');
And now do the same for the css...
现在对 css 做同样的事情......
wp_register_style('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
wp_enqueue_style('prefix_bootstrap');
It's a good idea to place these in a reusable method in case you will be using ajax. This way, you don't need to relist every script or stylesheet within the ajax methods.
如果您将使用 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');
}
The use of the "prefix_" will help prevent conflicts and save you some trouble in the long run.
从长远来看,使用“prefix_”将有助于防止冲突并为您节省一些麻烦。
回答by Marc
You can use the 'wp_head' action to add code to the header of the site each time the page loads. Put something like this into your plugin:
每次加载页面时,您都可以使用“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;
}

