web-dev-qa-db-fra.com

Puis-je forcer un metabox à être dans une colonne?

Supposons que j'ai créé un metabox personnalisé pour la page d'ajout/modification qui utilise une grande largeur (ne convient pas pour être dans la barre latérale), existe-t-il un moyen de le garder dans la colonne du milieu uniquement et de le trier sans permettre à l'utilisateur de le faire glisser à la barre latérale?

5
Charlie Chao

Tout d'abord, merci à RyanLoremIpsum de m'avoir orienté dans la bonne direction. J'ai trouvé la solution à mon problème, qui utilise la méthode du billet suggéré par Ryan Bloquer metabox - Pas de développement, pas de déplacement et la réponse de jQuery UI Sortable - empêche de tomber sur une liste en particulier pour empêcher un élément spécifique de tomber dans une autre zone de dépôt.

Dans le cas où il est interdit de placer des métaboxes dans la barre latérale, voici comment le faire fonctionner:

  1. Ajoutez une classe de filtre .no-sidebar à vos éléments metabox.

    En utilisant le filtre postbox_classes_post_METABOX_NAME, nous pouvons inclure des classes personnalisées à associer à cette métabox spécifique lors de sa création.

    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. Ajoutez un bloc de script de pied de page dans la page d'administration pour empêcher le transfert des métaboxes .no-sidebar dans la barre latérale.

    Ici, nous ciblons le conteneur normal (qui contient les widgets autres que la barre latérale) pour lier l’événement jQuery UI Sortable SortablebeforeStop afin de vérifier si le conteneur de la barre latérale traite de la réception d’une métaboxe .no-sidebar. Si tel est le cas, retournez false pour annuler le largage.

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

Cette méthode garantit que les métaboxes futures avec la classe no-sidebar ne peuvent être triées que dans le conteneur normal. Un problème potentiel avec l'UX est que l'utilisateur peut toujours voir la zone de substitution en faisant glisser la métabox sur la zone de la barre latérale. Cela pourrait tromper l'utilisateur en lui faisant croire qu'il n'a pas réussi à trier la boîte pour la première fois.

3
Charlie Chao

Si vous souhaitez que la boîte de méta apparaisse sous la zone de contenu, utilisez le paramètre de contexte "normal". Voir Référence de fonction/add meta box - Paramètres . Initialement, votre méta-boîte ne devrait aller dans la barre latérale que si le paramètre context est défini sur 'side'.

Pour empêcher l’utilisateur de le faire glisser sur le côté, étudiez la réponse sous " Bloquer métabox - Pas d’expansion, pas de déplacement " pour plus de précision.

  1. Ecrivez une fonction pour ajouter une classe personnalisée à l'élément postbox géré par postbox.js.
  2. La réponse liée à ci-dessus fournit un script qui désactive la possibilité de déplacer et de trier toute méta-boîte qui utilise votre classe personnalisée.

Puisque vous souhaitez rendre votre méta-boîte triable tout en la limitant à la colonne sous la zone de contenu, voyez si vous pouvez savoir quelle partie de postbox.js détermine si une boîte aux lettres est définie sous le contenu ou sur la barre latérale. Il semble que vous souhaitiez qu'il apparaisse dans #poststuff et non dans # side-sortables. Je n'ai pas de script pour le faire pour le moment, mais j'espère que cela vous placera dans la bonne direction.

4
iyrin