Question

考虑以下wordpress的插件代码： -

    <?php
/**
 * Plugin Name: test
 * Description: This plugin is just a test for bootstrap css
 * Version: 1.0.0
 * Author: Gavin Simpson
 * License: GPL2
*/

class testclass
{
    private static $instance;
    public static function get_instance_advert() 
    {
        if( null == self::$instance )
        {
            self::$instance = new testclass();
        }
        return self::$instance;
    }

    private function __construct()
    {
        add_action( 'admin_enqueue_scripts', array($this,'inistyleheets'));
    }
    function inistyleheets()
    {
        wp_register_style( 'mybootstrap', plugins_url() . '/test/assets/bootstrap-3.3.5-dist/css/bootstrap.min.css');   
        wp_enqueue_style('mybootstrap');
    }
}
add_action( 'plugins_loaded', array( 'testclass', 'get_instance_advert'));
?>

激活上述内容时，屏幕选项＆＃39; Wordpress Admin中的按钮停止工作。

该问题仅与加载Bootstrap css 100％相关，因此该示例不会自行加载引导程序。在我的生产代码中，bootstrap工作得很好，它只是打破了屏幕选项＆＃39;如上所述的按钮，就像上面的基本插件代码一样。

我尝试了所有基本主题，即二十四，二十五和十二。 twentysixteen。没有任何运气，所有结果都一样。

我一直在谷歌搜索并尝试不同的方法来加载css数小时无济于事，所以任何帮助将不胜感激。

谢谢。

Answer 1

冗长的解决方案，所以这里不再重复，但链接是http://rushfrisby.com/using-bootstrap-in-wordpress-admin-panel/。（是的，我知道发布链接并不酷，但我不想复制并粘贴别人的解决方案）

最重要的是你需要包装你想要添加Bootstrap css的任何代码，上面链接中的解决方案负责以非常好的方式加载bootstrap。

Answer 2

如果“屏幕选项”按钮不起作用（可能还有其他一些情况），您可以尝试使用

.hidden[style*='display: block'] {
    display:block !important;
}

在bootstrap之后加载的一些CSS中。有限测试显示按钮现在可以正常工作，但由于Bootstrap样式，下拉列表的内容看起来不同。因此，我将引导程序的入队限制在我真正需要的管理屏幕上。我不确定尝试修复该元素的样式对我来说是值得的。

Answer 3

Dunno，如果你还在调查这个，但我一直在遇到同样的问题。我发现问题在于“屏幕选项”面板中控件上的类名，wordpress load-options css包含一个条目，该条目以“隐藏”类为目标，并设置“display: none”以确保这些元素最初不显示。

当你单击“屏幕选项”按钮时，它会触发一个javascript函数，该函数应该使该面板显示，因为它使用'display：block'设置这些元素的样式属性，这应该覆盖css语句。

然而bootstrap css也有一个css语句，它以classname'hidden'为目标但包含'display：none！important''！important'会导致bootstrap css语句继续覆盖设置的'display：block'关于元素本身。所以一个肮脏的解决方案是从bootstrap css中删除！important部分。

为什么bootstrap打破wordpress管理员？

3 个答案: