web-dev-qa-db-ja.com

カスタム・シックボックスがダッシュボード・ページで壊れた？

私は、その機能の一部として、Wordpress管理者の多くのページにThickboxを追加する拡張機能に取り組んでいます。ほとんどのページでこれはうまくいきます - 私はin_admin_footerを呼び出すためにadd_thickboxアクションフックを使い、そしてThickboxを含む（includeステートメントを介して）HTML/Javascriptを含みます。

    add_action( 'in_admin_footer', function(){   
        add_thickbox();    
        include(__DIR__ . '/includes/thickbox-div.php');
    });

私のThickboxのhref文字列はこんな感じです

#TB_inline?height=480&width=480&inlineId=my_div_id

これはとてもうまくいきます - ほとんどの場合。ただし、いくつかの管理ページ（ダッシュボード、プラグイン）では、Thickboxが大きくなりすぎて、右側の不完全な「閉じる」ボタンが表示されます。

Thixkbox Screenshot showing too large/weird close button behavior

なぜこれが起こるのか、そして修正があれば誰でも知っていますか？私の最初の仮定は、ThickboxをカスタマイズするためにこれらのページでWordpressの中核的なコードが行っていることです - しかし、まだデバッグを始めていないので、確かにそれを知りません。

私は自分自身でコードを回避するための何十もの方法を考え始めることができます - しかし、これを修正するための既知の科学があることを願っています。

adminhooksthickbox
1
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関数を再定義することになります。ボディクラスを持つ特定のページを対象としたカスタムスタイルルールもあります。

#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関数を呼んでいます（これはまた私自身が_tb_showの呼び出しでthickboxを開くことを引き継ぐことを要求します）

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();
    } 
}

この機能は

  1. Thickboxの閉じるボタンの表示を変更するカスタムスタイルルールでボディクラスを削除する（残念ながらハードコード化されたリスト）

  2. tb_position関数を標準のthickboxバージョンに再定義します（やはり、thickboxライブラリからコピー/貼り付けしたハードコードされた関数を使用）。

  3. モンキーパッチ元のtb_remove関数を呼び出す前に、上からボディクラスとカスタムtb_position関数をrestore復元するようにtb_remove関数を再定義します。

この結果、Wordpressのサイズとスタイルのカスタマイズは行われませんが、thickboxが閉じると元に戻ります。これがどれほど安定しているかは言えませんが、現時点ではうまくいっているようです。また、この関数はすべての変更を元に戻すわけではありません（一部のスコープはアクセスできない場合があります）ので、このソリューションを使用するときは、この点に留意してください。

1
Alan Storm