布局插件管理页面:使用引导?

时间:2015-07-23 作者:sazr

When you make your plugin admin pages, ie \'My Plugin Settings\' page and etc. do you use bootstrap in them?

What is the convention for this and what do most in the industry use to lay out their plugin admin pages?

I am considering using it simply to use rows and columns so the layout is responsive. But maybe WordPress has its own existing classes? If thats the case I want to use that because I want to maintain standards and consistency with other plugins.

Any advice on what you use in plugins for layout and what is the standard?

*Edit: I can successfully import the BootStrap js css files but they change the whole dashboards styling - even for other pages like \'Add New Page\' and other plugins settings pages. Is there any way to stop this? Other than going through the Bootstrap CSS file and removing everything related to body, etc.?

3 个回复
SO网友:ppajer

Wordpress有一个设置API,允许您注册和创建默认的管理风格输入。它还负责在数据库中加载和保存这些设置。API相当冗长,但是its documentation covers everything you need to know about it.

如果您重视遵守WP标准/约定,我建议您使用它,而不是注入外国CSS(即使它与引导程序一样广泛使用),并可能会弄乱管理面板中意外的部分。

如果您需要对管理页面的外观进行更多的控制,只需手工制作这几行CSS,或者如果您感到非常懒惰,可以从引导程序中复制它们。

SO网友:Ales

我已经用这种方式做到了,看来它会奏效的。我刚刚再次使用了用于主题的脚本,以在服务器上节省一些内存。

/*
 *  Bootstrap Styles and scripts
 */
wp_register_style( \'bootstrap.min\', \'http://domain.cz/wp-content/themes/theme-name/css/bootstrap.min.css\' );
wp_enqueue_style(\'bootstrap.min\');
//Bootstrap Scripts
wp_register_script( \'bootstrap.min\', \'http://domain.cz/wp-content/themes/theme-name/js/bootstrap.min.js\' );
wp_enqueue_script(\'bootstrap.min\');
//Google Jquery
wp_register_script( \'jquery.min\', \'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\' );
wp_enqueue_script(\'jquery.min\');

SO网友:wesamly

我使用less在自定义div引导包装器中包装引导css:

1-从下载页面下载引导程序源代码,然后解压缩。

2-在bootstrap-3.3.7/less/文件夹中,创建引导包装器。更少,并添加以下代码:

.bootstrap-wrapper {
    @import "bootstrap.less";
}
3-少安装:npm install -g less

4-从终端,编译较少的文件以获得css文件:

cd bootstrap-3.3.7/less/
lessc bootstrap-wrapper.less bootstrap-wrapper.css
5-将文件复制到WordPress插件(或主题),并将其排队:

wp_enqueue_style(\'csbk_bs_css\', plugins_url( \'/css/bootstrap-wrapper.css\', __FILE__ ));
6-插件页面内:

<div class="bootstrap-wrapper">
    <button class="btn btn-primary">Click me</button>
</div>
参考号:Using Bootstrap in Wordpress Admin Panel

结束

相关推荐

为什么不在插件中包含对/wp-admin/admin.php的引用

联系表单7最近推出了一个更新,导致其他插件出现一些冲突。WPCF7的作者解释说,这是因为插件包括对wp-admin/admin.php 在他们的脚本中,你不应该在插件中这样做。Takayuki Miyoshi 解释它here 但我不确定我是否完全理解为什么这会引起任何问题,或者这与打电话给say有什么不同wp-load.php.有人能解释一下为什么建议不要加载wp-admin/admin.php 在你的插件中,它是如何引起问题的?