Communauté
Rejoignez la communauté Geekeries sur Google+ › Découvrez mag.geekeries.fr
Guide des références graphiques de l’administration WordPress

Guide des références graphiques de l’administration WordPress

Publié par Valentin dans WordPress
Modifié le 1 avril 2011 à 13:02.

Admin UI Reference Guide est une extension regroupant l’ensemble des références graphiques de l’administration d’un blog WordPress. Il indique le code à utiliser selon le type de contenu que vous souhaitez intégrer à la page d’options de votre thème ou de votre extension. Il affiche également quelques exemples graphiques de ce que le code donne une fois exécuté. Pour le moment, l’extension – dans sa page d’options- regroupe les titres, icônes, tableaux, bloc et le glisser-déposer de blocs. Un bref récapitulatif :

La base

Avant de commencer à intégrer certains éléments, il est nécessaire de préciser que ces éléments doivent être insérés dans une « div » prédéfini par WordPress. Cela est presque obligatoire pour bénéficier des bonnes dimensions, des styles et pour optimiser l’affichage de votre page d’options ou autre. Dans un premier temps, collez ce bout de code. Par la suite, collez les éléments cités à la place des trois petits points.

<div class="wrap">
...
</div>

Le glisser-déposer

Si vous souhaitez créer une page d’options WordPress pour votre thème ou votre extension, il peut être necessaire d’ajouter des blocs qui peuvent changer de place via un simple glisser-déposer. Pour cela, il vous suffit de coller le code suivant en y ajoutant vos paramètres et vos différents blocs.

<div id="poststuff" class="metabox-holder" style="width:250px;">
	<div class="meta-box-sortables ui-sortable">
        <div id="linksubmitdiv" class="postbox " style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; display: block; ">
            <div class="handlediv" title="Cliquer pour masquer"><br /></div>
            <h3 class="hndle"><span>Mon titre</span></h3>
            <div class="inside">
                <p>Un exemple</p>
            </div>
        </div>
        <div id="linksubmitdiv" class="postbox " style="margin:10px 0;">
            <div class="handlediv" title="Cliquer pour masquer"><br /></div>
            <h3 class="hndle"><span>Sauvegarder</span></h3>
            <div class="inside">
                <div id="major-publishing-actions">
                    <div id="publishing-action">
                        <input name="save" type="submit" class="button-primary" id="publish" value="Ajouter un lien"/>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
	</div>
</div>

Blocs ordonnés

Cet élement est vraiment utile et très clair lorsqu’on doit créer une page d’options. Disposé sur deux colonnes, de taille différentes (colonne latérale et contenu), ceci permet une meilleure optimisation de votre page d’options.

<div id="poststuff" class="metabox-holder has-right-sidebar">
<div id="side-info-column" class="inner-sidebar">
    <div id="linksubmitdiv" class="postbox " style="">
        <div class="handlediv" title="Cliquer pour masquer"><br /></div>
        <h3 class="hndle"><span>Un autre titre</span></h3>
        <div class="inside">
            <p>Un autre exemple de texte.</p>
        </div>
    </div>
    <div id="linksubmitdiv" class="postbox " style="">
        <div class="handlediv" title="Cliquer pour masquer"><br /></div>
        <h3 class="hndle"><span>Mon titre</span></h3>
        <div class="inside">
            <div id="major-publishing-actions">
                <div id="publishing-action">
                    <input name="save" type="submit" class="button-primary" id="publish" value="Sauvegarder"/>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
</div>
<div id="post-body">
    <div id="post-body-content">
        <div id="namediv" class="stuffbox">
            <h3><label for="link_name">Mon bloc</label></h3>
            <div class="inside">
                <input type="text" name="sample_input" size="20"  />
                <p>Texte d'essai</p>
            </div>
        </div>
        <div id="addressdiv" class="stuffbox">
            <h3><label for="link_url">Le titre/label></label></h3>
            <div class="inside">
                <p>Un autre texte</p>
            </div>
        </div>
    </div>
</div>
</div>

Les boutons

Déjà expliqué dans notre article « Créer une page d’options WordPress » les boutons sont essentiels pour sauevgarder ses données. Voici le code brut à utiliser.

//Bouton principal
<p class="submit">
	<input type="submit" class="button-primary" value="<?php _e('Enregistrer') ?/>" />
</p>
//Lien
<a class="button-secondary" href="#" title="#">Texte</a>
//Autre bouton
<p class="submit">
	<input type="submit" value="<?php _e('La recherche'); ?/>" class="button-secondary" />
</p>

Les tableaux

Pour insérer un tableau simple, toujours dans le style de l’administration WordPress, il vous suffit de coller le code suivant. Dans cet exemple, le haut et le bas du tableau sont affichés.

<table class="widefat">
<thead>
   <tr>
     <th>Menu</th>
     <th>Un autre menu</th>
     <th>Encore un</th>
     <th>Le dernier</th>
   </tr>
</thead>
<tbody>
   <tr>
     <td>Le texte 1</td>
     <td>Le texte 2</td>
     <td>Le texte 3</td>
     <td>Le texte 4</td>
   </tr>
</tbody>
</table>