web-dev-qa-db-fra.com

Utiliser des éléments backend standard dans Plugin

J'écris actuellement un plugin pour une entreprise. J'ai créé une page principale personnalisée sur laquelle l'administrateur peut modifier les paramètres utilisés par le plug-in.

Actuellement, cela semble très compliqué car il y a trop d'informations sur un seul site. Pour le nettoyer un peu, j'aimerais le séparer en sections.

Ce serait idéal si je pouvais utiliser les mêmes éléments que WordPress, par exemple:

enter image description here

Ce serait formidable si toute la fonctionnalité de réduction/extension venait automatiquement avec elle. Malheureusement, je n'ai trouvé aucune ressource pour le faire.

Est-il possible d'intégrer ces éléments? Comment faire ça?

pluginsplugin-developmentcssuser-interface
3
colosso

Il existe quelques options que vous pouvez utiliser pour organiser votre écran de plugin dans le style "WordPress". J'ai inclus quelques ressources ci-dessous qui traitent de l'utilisation des onglets de page, des éléments d'interface utilisateur, etc.

Mais pour émuler le style et la fonctionnalité des boîtes en expansion de WordPress, utilisez le balisage suivant dans la page de votre plugin:

<div class="wrap">
    <div id="poststuff">
        <div id="postbox-container" class="postbox-container">
            <div class="meta-box-sortables ui-sortable" id="normal-sortables">
                <div class="postbox " id="test1">
                    <div title="Click to toggle" class="handlediv"><br></div><h3 class="hndle"><span>Test 1</span></h3>
                    <div class="inside">
                        testing content
                    </div>
                </div>

                <div class="postbox " id="test2">
                    <div title="Click to toggle" class="handlediv"><br></div><h3 class="hndle"><span>Test 2</span></h3>
                    <div class="inside">
                        testing content
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Vous aurez également besoin de mettre en file d'attente certains scripts, un de wordpress, un personnalisé. Assurez-vous que vous remplacez plugin-page-suffix par le suffixe réel de votre page de plug-in. Cela garantit que nous ne remplaçons que postboxes sur votre page de plug-in et non toutes les pages de wp-admin. Ajoutez ceci à votre contrôleur de plugin:

function wpseo_129955_admin_scripts($suffix) {
    if($suffix == 'plugin-page-suffix'){
        wp_enqueue_script( 'postbox' );
        wp_enqueue_script( 'postbox-edit', 'path-to-file/postbox-edit.js', array('jquery', 'postbox') );
    }
}
add_action( 'admin_enqueue_scripts', 'wpseo_129955_admin_scripts' );

Ensuite, dans postbox-edit.js, incluez les éléments suivants:

jQuery(document).on('ready', function($){
    postboxes.save_state = function(){
        return;
    };
    postboxes.save_order = function(){
        return;
    };
    postboxes.add_postbox_toggles();
});

Dans le script ci-dessus, nous utilisons simplement le propre code de wordpress pour gérer ses boîtes réductibles natives. Je substitue également deux méthodes dans l'objet postboxes pour empêcher les demandes ajax de spammer de code d'indiquer si les boces sont basculés ou si leurs positions ont été déplacées.

Testé sur une installation locale à l'aide de WP 3.8

Toutes les questions, il suffit de demander.

Ressources

6
MichaelJames