为什么 Bootstrap 会破坏wordpress管理?

yftpprvb  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(3)|浏览(151)

考虑以下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'));
?>

当激活以上,“屏幕选项”按钮在WordPress管理停止工作。
这个问题100%只与加载Bootstrap css有关,因此这个例子并没有加载bootstrap本身。在我的产品代码中,bootstrap工作得很好,它只是破坏了“屏幕选项”按钮,就像上面的基本插件代码一样。
我试过了所有的基本主题,iidoEyenthourteen,2015和2016。没有任何一个运气,结果都一样。

8mmmxcuj

8mmmxcuj1#

冗长的解决方案,所以这里就不重复了,但链接是https://rushfrisby.com/using-bootstrap-in-wordpress-admin-panel。(是的,我知道张贴链接不酷,但我不想复制和粘贴别人的解决方案)
底线是,你需要 Package 任何你可能想添加Bootstrap CSS的代码,上面链接中的解决方案以一种非常好的方式加载Bootstrap。

q8l4jmvw

q8l4jmvw2#

对于“屏幕选项”按钮不起作用的情况(可能还有其他一些情况),您可以尝试使用

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

在一些CSS中,在 Bootstrap 加载后加载。有限的测试显示,按钮现在工作,但下拉菜单的内容看起来不同,由于 Bootstrap 的样式。因此,我已经限制排队 Bootstrap ,只有管理屏幕,我真的需要有它。我不知道这是值得的,我试图修复该元素的样式。

xlpyo6sf

xlpyo6sf3#

我发现问题是在屏幕选项面板中的控件上的类名,wordpress load-options css包含一个条目,该条目针对具有“隐藏”类的元素,并设置“display: none”以确保这些元素最初不显示。
当你点击“屏幕选项”按钮时,它触发了一个JavaScript函数,该函数应该使该面板出现,因为它在那些元素上设置了一个样式属性“display:block'这应该覆盖css语句。
然而,引导CSS也具有以类名“hidden”为目标但包含“display:none!important“"!important”导致引导css语句持续覆盖" display:所以一个肮脏的解决方案是从 Bootstrap css中删除重要的部分。

相关问题