在一个自定义的wordpress插件中包装twitter引导程序 [英] wrapp twitter bootstrap in a custom wordpress plugin

问题描述

我尝试在自定义的wordpress插件中使用bootstrap，但是似乎用以下命令破坏了所有管理区域

I try to use bootstrap in my custom wordpress Plugin but seems to broke all admin area with the following

class MyPlugin{
 public function iniAdmin(){
        add_action('admin_menu', array($this, 'register_collections_menu_page'));
        add_action( 'admin_init', array($this,'style_bootstrap' ));
    }
    public function style_bootstrap(){
        wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', array('jquery'), '1.9.1', true); // we need the jquery library for bootsrap js to function
        wp_enqueue_script( 'bootstrap-js', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js', array('jquery'), true); // all the bootstrap javascript goodness
        wp_enqueue_style( 'bootstrap', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' );
    }

}

$collections_settings = new MyPlugin();
if (is_admin()){
    $collections_settings->iniAdmin();
}

如何在wordpress插件中以适当的方式包装引导程序样式

How to wrap in a propper way bootstrap style in a wordpress plugin

推荐答案

经过长时间的搜索，我找到了一个非常好的教程，内容涉及如何重新编译twitter-bootstrap以在Wordpress admin中使用.您可以在此处查找.

After a long search I found a really good tutorial on how to recompile twitter-bootstrap to use in Wordpress admin. You can find it here.

使用Bootstrap 3

在您的bootstrap.css所在的目录(例如wordpress-bootstrap.less)上创建一个新的.less，并包装以下内容

Create a new .less on the same directory where your bootstrap.css is (for example wordpress-bootstrap.less) and wrap the following

.bootstrap-wrapper {
    @import (less) url( 'bootstrap.css' );
}

...毕竟，您必须重新编译css(我用过winless)，并且您将wordpress-bootstrap.css包裹在.bootstrap-wrapper内.

... after all you have to recompile your css (I used winless) and you get wordpress-bootstrap.css wrapped inside .bootstrap-wrapper.

然后，您准备好了！

这篇关于在一个自定义的wordpress插件中包装twitter引导程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！