仪表板页面上的自定义厚框是否已损坏?

时间:2016-08-08 作者:Alan Storm

我正在开发一个扩展,作为其功能的一部分,它在Wordpress管理中为许多页面添加了Thickbox。在大多数页面上,这很好——我使用in_admin_footer 要调用的操作挂钩add_thickbox, 并包括HTML/Javascript(通过include 语句),包括Thickbox。

    add_action( \'in_admin_footer\', function(){   
        add_thickbox();    
        include(__DIR__ . \'/includes/thickbox-div.php\');
    });    
还有我的Thickboxhref 字符串看起来像

#TB_inline?height=480&width=480&inlineId=my_div_id
大多数情况下,这很有效。然而,在一些管理页面(仪表板、插件)上,Thickbox将呈现得太大,并且右侧的“关闭”按钮不完整。

Thixkbox Screenshot showing too large/weird close button behavior

有人知道为什么会发生这种情况,以及是否有修复方法吗?我的第一个假设是,一些核心Wordpress代码正在这些页面上定制Thickbox,但我还没有开始调试,所以我不能确定这一点。

我可以开始想很多方法在代码中解决这个问题,但我希望有一些已知的科学可以解决这个问题。

1 个回复
最合适的回答,由SO网友:Alan Storm 整理而成

在深入研究这一点之后,Wordpress似乎在许多页面上最终改变了默认thickbox实现的行为——这包括javascript更改和自定义样式规则。你可以在这里看到一个例子

#File: wp-admin/js/media-upload.js
// thickbox settings
var tb_position;
(function($) {
    tb_position = function() {
        var tbWindow = $(\'#TB_window\'),
            width = $(window).width(),
            H = $(window).height(),
            W = ( 833 < width ) ? 833 : width,
            adminbar_height = 0;
            //...
以上代码最终重新定义了tb_position 具有一些硬编码高度/宽度值的函数。还有一些自定义样式规则适用于具有body类的特定页面。

#File: wp-admin/css/common.css
body.about-php #TB_window.thickbox-loading:before,
body.plugin-install-php #TB_window.thickbox-loading:before,
body.import-php #TB_window.thickbox-loading:before,
body.plugins-php #TB_window.thickbox-loading:before,
body.update-core-php #TB_window.thickbox-loading:before,
body.index-php #TB_window.thickbox-loading:before {
    content: "";
    display: block;
    width: 20px;
这附近没有什么伟大或优雅的作品。出于我自己的目的,我在显示我自己的Thickbox之前调用以下(自定义编写的)javascript函数(这还需要我自己通过调用来打开Thickboxtb_show)

var resetWordpressHacks = function(){        
    //remove these styles from body if they exist
    var classes = [\'about-php\',\'plugin-install-php\',\'import-php\',
        \'plugins-php\',\'update-core-php\',\'index-php\'];
    var removed = [];
    $.each(classes, function(k,v){
        if(!$(\'body\').hasClass(v)) { return; }
        removed.push(v);
        $(\'body\').removeClass(v);
    });                

    var tb_position_original = window.tb_position;

    //some wordpress pages redefine this function which breaks
    //the thickbox, so we need to reset it here.  
    window.tb_position = function() {
        var isIE6 = typeof document.body.style.maxHeight === "undefined";
        jQuery("#TB_window").css({marginLeft: \'-\' + parseInt((TB_WIDTH / 2),10) + \'px\', width: TB_WIDTH + \'px\'});
        if ( ! isIE6 ) { // take away IE6
            jQuery("#TB_window").css({marginTop: \'-\' + parseInt((TB_HEIGHT / 2),10) + \'px\'});
        }
    }

    var tb_remove_original = window.tb_remove;
    window.tb_remove = function()
    {
        $.each(removed, function(k,v){
            $(\'body\').addClass(v);
            window.tb_position = tb_position_original;
        });
        tb_remove_original();
    } 
}
此功能将

删除具有自定义样式规则的正文类,这些规则会更改Thickbox关闭按钮(不幸的是,这是一个硬编码列表)的显示

重新定义tb_position 函数到库存thickbox版本(同样,使用从thickbox库复制/粘贴的硬编码函数)

猴子补丁重新定义了tb_remove 功能到restore 车身等级和定制tb_position 调用原始tb_remove 作用

最终的结果是Wordpress的大小和样式定制未完成,但在thickbox关闭时恢复。我说不出这有多稳定,但目前它似乎对我有效。此外,此函数不会撤消所有更改(有些更改的范围超出了不可访问的范围),因此在使用此解决方案时请记住这一点。

相关推荐

WP-ADMIN:“对不起,您不能访问此页面。”

两周后不使用我们的WP站点,登录/wp-admin/ 出现白屏错误:抱歉,不允许您访问此页面。我有:重命名plugins 到plugins.temp.通过phpMyAdmin创建了一个新的管理员用户。新用户已user_meta 的作用a:1:{s:13:"administrator";s:1:"1";}.</已重命名themes 到themes.temp.</删除核心WordPress文件,并替换为新上载的文件</已替换.htaccess 使用默认