Le blog le7.net

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" style="width:250px;">
	<div>
        <div id="linksubmitdiv" style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; display: block; ">
            <div title="Cliquer pour masquer"><br /></div>
            <h3 class=\"hndle\"><span>Mon titre</span></h3>
            <div>
                <p>Un exemple</p>
            </div>
        </div>

        <div id="linksubmitdiv" style="margin:10px 0;">
            <div title="Cliquer pour masquer"><br /></div>
            <h3 class=\"hndle\"><span>Sauvegarder</span></h3>
            <div>
                <div id="major-publishing-actions">
                    <div id="publishing-action">
                        <input name="save" type="submit" id="publish" value="Ajouter un lien"/>
                    </div>
                    <div></div>
                </div>
            </div>
        </div>
	</div>
</div>

Lire la suite de cette entrée »