Création d’écrans d’administration WordPress (composants, conception, etc.)

Je ne parle pas beaucoup de design d’interface utilisateur car ce n’est pas mon fort. Je suis tout à fait pour les personnes travaillant dans le cadre de leurs forces principales, puis les embauchant en cas de besoin, projet par projet (si les conceptions ne sont pas déjà fournies).

Mais quand il s’agit de travailler avec les écrans d’administration de WordPress, il y a une différence, n’est-ce pas ?

Je pense que parce que la zone d’administration de WordPress a une apparence cohérente, tout ce qui est conçu pour fonctionner dans l’écran d’administration (comme un écran de paramètres) doit être aussi proche que possible de l’interface utilisateur principale.

Tout le monde n’est pas d’accord, et cela se voit par la vaste gamme de plugins disponibles. Mais c’est ma position là-dessus.

Périodiquement, on me demande comment je structure les interfaces utilisateur des projets lorsqu’ils ont besoin d’écrans d’administration et comment je les associe aux fichiers du projet.

J’ai donc pensé prendre un exemple simple et le décomposer dans ce court article.

Construire des écrans d’administration WordPress

Pour ce post, je vais faire simple. C’est-à-dire que l’écran sera composé du strict minimum de commandes qui constituent généralement un écran d’administration.

C’est-à-dire:

• Messagerie (succès, erreurs ou avis),
• Titres et contenu
• Commandes d’entrée
• Champs nonce

Vous pouvez devenir un peu plus compliqué avec les onglets, mais ce qui précède couvrira 99% d’un écran de paramètres de base. Je ne plonge pas dans l’ API des paramètres dans ce post (j’ai déjà fait toute une série là-dessus).

Au lieu de cela, il s’agit uniquement d’une manière d’organiser les fichiers afin qu’ils soient maintenables tout au long de la durée de vie d’un projet,

Décomposer

Avant de regarder comment les fichiers sont organisés et utilisés, je veux esquisser comment je conceptualise normalement ce que je vois à l’écran en travaillant sur cette partie d’un projet.

Comme vous pouvez le voir, tous les domaines ci-dessus sont couverts. Mais la façon dont ceux-ci sont mappés aux fichiers est un peu différente. Par exemple, la structure du répertoire ressemble à ceci :

Maintenant, selon la façon dont vous implémentez votre solution, cela dépendra de la façon dont ces écrans sont affichés.

C’est-à- dire que vous utiliserez parfois settings_mesasages() ; d’autres fois, vous pouvez choisir d’utiliser manuellement require_once car tout dépend de la façon dont vous construisez la solution.

Il est facile d’affirmer qu’il devrait y avoir une façon de le faire, mais à mesure que les demandes des gens sur la façon dont ils utilisent WordPress changent, il en va de même pour les exigences et la mise en œuvre.

À quoi pourrait ressembler le code ?

Si vous choisissez de sortir de l’API Settings et d’effectuer votre implémentation, le balisage peut ressembler à ceci :

1 L’interface utilisateur complète

<?php
/**
 * This is the parent administration UI. This includes a single partial for the messaging.
 */
?>
<div class="wrap">
    <h1 class="wp-heading-inline">Import New Item</h1>
    <?php include_once 'partials/error-invalid-file.php'; ?>
    <div id="acme-upload-new-item-pdf">
        <form action="" enctype="multipart/form-data" method="post">
            <p>Upload a PDF</p>
            <input type="file" />
            <?php submit_button( 'Upload' ); ?>
            <?php wp_nonce_field( 'acme-upload', 'acme-importer' ); ?>
        </form>
    </div><!-- #acme-upload-new-item-pdf -->
</div><!-- .wrap -->

2 La messagerie incluse

<div id="invalid-file-message" class="error notice is-dismissible">
    <p>You have attempted to upload an invalid file type.</p>
    <button type="button" class="notice-dismiss">
        <span class="screen-reader-text">Dismiss this notice.</span>
    </button>
</div><!-- #invalid-file-message -->

C’est Barebones

‘Notez que cela n’inclut pas l’internationalisation ou d’autres choses qui peuvent être nécessaires dans votre projet. C’est vraiment le strict minimum.

Mais, si rien d’autre, cela donne une idée de la façon dont vous pouvez prendre les fichiers et les assembler.