web-dev-qa-db-ja.com

メタボックスを1列に強制することはできますか？

広い幅を使用する（サイドバーに表示するのには適していない）投稿の追加/編集ページ用のカスタムメタボックスを作成したとします。中央の列にのみ表示し、並べ替えることはできます。サイドバーに？

postsadminmetaboxsort
5
Charlie Chao

まず第一に、私を正しい方向に向けてくれたRyanLoremIpsumに感謝します。私は自分の問題に対する解決策を見つけました。それはRyan Blockメタボックスによって提案された投稿からの方法を使用します - 展開しない、移動しない そして jQuery UIからの答えSortable - 特定の項目が別のドロップ領域にドロップされるのを制限するために、特定のリスト にドロップしないようにします。

メタボックスがサイドバーに配置されるのを制限する場合は、ここでそれを機能させる方法です：

  1. メタボックス要素にフィルタクラス.no-sidebarを追加します。

    postbox_classes_post_METABOX_NAMEフィルタを使用することで、作成時にその特定のメタボックスにアタッチするカスタムクラスを含めることができます。

    public function my_normal_metabox( $classes ) {
    $classes[] = 'no-sidebar';
    return $classes;
}
add_filter( 'postbox_classes_post_my_meta_box', array( $this, 'my_normal_metabox' ) );

  2. .no-sidebarメタボックスがサイドバーにドロップされないようにするには、管理者ページにフッタースクリプトブロックを追加します。

    ここでは、サイドバーコンテナが.no-sidebarメタボックスを受信したかどうかを確認するために、 jQuery UI SortableウィジェットbeforeStopイベントをバインドする通常のコンテナ（サイドバー以外のウィジェットを含む）をターゲットにします。もしそうなら、ドロップをキャンセルするためにfalseを返します。

    function my_admin_print_footer_scripts()
{
    ?><script type="text/javascript">/* <![CDATA[ */
        jQuery(function($) {
            $("#normal-sortables")
                .sortable({ beforeStop: function (event, ui) { 
                    if ($("#side-sortables").find('.no-sidebar').length) {
                        // can the sort before adding the element to the sidebar
                        return false;
                    }
                } })
                // refresh the instance
                .sortable('refresh');
        });
    /* ]]> */</script><?php
}
add_action( 'admin_print_footer_scripts', array( $this, 'my_admin_print_footer_scripts' ), 99 );

このメソッドにより、クラスno-sidebarを持つ将来のメタボックスは通常のコンテナ内でのみソートできるようになります。潜在的なUXの問題は、サイドバー領域の上にメタボックスをドラッグしている間、ユーザーがまだプレースホルダーボックスを見ることができるということです。これは、ボックスを初めてソートするのに失敗したとユーザーが考えるのを惑わすかもしれません。

3
Charlie Chao

メタボックスをコンテンツ領域の下に表示する場合は、コンテキストパラメータ 'normal'を使用します。 関数リファレンス/ add meta box - パラメータ を参照してください。コンテキストパラメータが 'side'に設定されている場合、最初はメタボックスはサイドバーに移動する必要があります。

ユーザーが横にドラッグできないようにするには、「 ブロックメタボックス - 展開なし、移動なし 」で答えを調べてください。

  1. Postbox.jsによって処理されるpostbox要素にカスタムクラスを追加する関数を書きます。
  2. 上記にリンクされた答えはあなたのカスタムクラスを使用するメタボックスを移動しソートする能力を無効にするスクリプトを提供します。

メタボックスをコンテンツ領域の下の列に限定しながらソート可能にするため、ポストボックスがコンテンツの下に設定されているかどうかを判断するために postbox.js のどの部分が表示されるかを確認できます。サイドバーに。 ＃side-sortablesではなく#poststuffに表示したいようです。現時点でこれを実行するためのスクリプトはありませんが、うまくいけばこれで正しい方向に進むことができます。

4
iyrin