为什么引导程序会破坏 wordpress 管理员？答案

【问题标题】：Why does bootstrap break wordpress admin?为什么引导程序会破坏 wordpress 管理员？
【发布时间】：2016-07-16 07:48:41
【问题描述】：

考虑下面的 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 运行良好，它只是破坏了所描述的“屏幕选项”按钮，就像上面的基本插件代码一样。

我已经尝试了所有的基本主题，即二十四、二十五和二十六。他们中的任何一个都没有运气，结果都是一样的。

我一直在谷歌搜索并尝试不同的方法来加载 css 数小时无济于事，因此我们将不胜感激。

谢谢。

【问题讨论】：

检查控制台和渲染的css？
控制台为空。渲染的 css 没有显示任何明显的内容。
我唯一能想到的：如果你能看到按钮上的点击事件，也许引导程序正在用另一个 div 覆盖按钮，它已经改变了规则。
是的，有很多可能。哦，好吧，我必须找到一个解决方案，所以当我有答案时会更新。谢谢大卫。

标签： php wordpress twitter-bootstrap plugins

【解决方案1】：

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

最重要的是，您需要包装您可能想要添加 Bootstrap CSS 的任何代码，并且上述链接中的解决方案负责以一种非常有效的方式加载 Bootstrap。

【讨论】：

链接已失效。
站点对 https 进行了更改，并且链接添加了尾随退格，因此失败。不知道如何解决这个问题。将rushfrisby.com/using-bootstrap-in-wordpress-admin-panel 复制并粘贴到地址栏中，它应该可以工作。
@GavinSimpson 为什么要动态重建引导 css？为什么不这样做一次，然后简单地将其添加到插件文件夹中？另外，这实际上是如何阻止事情发生的呢？在包装类中包装引导程序不会阻止其他插件或 wordpress 核心 css 覆盖常见的选择器。例如，.card 由 wordpress 核心在 forms.css 中使用，它设置最大宽度和其他继承的属性。添加包装类并不能解决此问题。
对不起杰里米，这是在 2016 年，我什至无法记住任何关于它的事情。我当然不再使用 bootstrap，我目前的任何客户也不再使用。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

不知道您是否仍在调查此问题，但我遇到了同样的问题。我发现问题出在“屏幕选项”面板中的控件上的类名上，wordpress load-options css 包含一个以“隐藏”类为目标元素并设置“display: none”的条目，以确保最初不显示这些元素.

当您单击“屏幕选项”按钮时，它会触发一个 javascript 函数，该函数应该使该面板出现，因为它在那些带有“显示：块”的元素上设置了样式属性，这应该覆盖 css 语句。

然而，引导 css 也有一个 css 语句以类名 'hidden' 为目标，但包含 'display: none !important' '!important' 导致引导 css 语句继续覆盖设置的 'display: block'在元素本身上。所以一个肮脏的解决方案是从引导 css 中删除 !important 部分。

【讨论】：