WordPress est très modulable et permet ainsi aux extensions et thèmes WordPress de créer des pages d’options avancées ou très simple pour ainsi rendre un peu plus dynamique et optimisé le thème de votre blog WordPress. De nombreux tutoriels sont disponibles pour créer une page d’options, mais cela peut éventuellement être beaucoup plus complexe lorsque la lecture est dans une langue étrangère. Nous allons essayer de vous expliquer comment en créer une, en toute simplicité et sans grande connaissance.

Créer une page d’options pour son thème WordPress !

L’introduction

Tout d’abord et pour commencer, nous allons essayer de décrire l’utilité d’une page d’options. Cette page, accessible depuis le panel d’administration de votre blog vous permet, tout simplement, d’éditer n’importe quel contenu de votre blog, dynamiquement. Nous allons tout simplement mettre en place un formulaire de saisie de données, dans une page et bien évidemment créer un nouveau menu pour accéder à votre page d’options.

Soyons clairs, la première partie de ce tutoriel est très basique. Nous allons définir un texte à afficher. Parfait pour les débutants qui souhaitent connaître l’utilisation des informations pour développer par la suite quelque chose de plus complexe. Cependant, nous allons aller un peu plus loin à l’étape 5.

La préparation

Il faut en fait éditer le fichier « functions.php », présent ou à créer dans le dossier de votre thème WordPress. Ensuite, il faut créer un dossier « functions » (par exemple) qui contiendra le ou les fichier(s) d’administration de vos données. Voici le schéma que nous allons obtenir.

  • lights (nom de votre thème)
  • — functions.php
  • — functions (dossier)
  • —- index.php

Partie 1 – Développement des premières fonctions.

Tout d’abord, vous devez créer un dossier « functions » (ou autre) vous vous devez placer dans le dossier de votre thème WordPress. Dans ce dossier, vous devez créer un fichier. Nous allons le nommer « index.php ». Il contiendra les fonctions principales de votre page d’options et permettra par la suite d’ajouter d’autre page d’options.

Dans le fichier « index.php » du dossier « functions » que vous venez de créer, nous allons lui ordonner de créer un menu et nous allons renseigner les paramètres de bases de votre page d’options. Coller les lignes ci-dessous dans le fichier.

add_action('admin_menu', 'GkMenu');

function GkMenu() {
	add_menu_page('Paramètres du blog', 'Paramètres', 'administrator', 'Blog', 'GkLtextes', 'http://www.geekeries.fr/gk.png', '3');
	add_action( 'admin_init', 'register_mysettings' );
}

function register_mysettings() {

	//Paramètres de la page
	register_setting( 'gkltextes', 'txt1' );
	register_setting( 'gkltextes', 'txt2' );

}
  • « Gk.png »
  • est en fait l’icône de votre menu. Il vous suffit de modifier l’adresse pour afficher vôtre icône. La taille doit être de 16×16.

  • « txt1 »
  • est essentiel et doit être unique ! Elle permet d’enregistrer, récupérer et d’afficher la valeur envoyé et enregistrée depuis la page d’options.

  • « Blog »
  • permet de définir l’adresse de la page d’option, vous pouvez la modifier.

  • « 3 »
  • définie le positionnement du nouveau menu. Dans notre cas, il sera placé en dessous du module « Tableau de bord », juste avant le séparateur.

  • « GkLtextes« 
  • est le nom de la fonction qui regroupe les informations de la page d’options.

Partie 2 – Création de la page d’options.

En espèrent que cela est compréhensible, passons à la suite. Toujours dans le même fichier ‘index.php » du dossier « functions » et à la suite du code précédemment cité, il faut maintenant définir notre fonction qui contiendra la page d’option. À la suite du code, coller l’ensemble des lignes suivantes.

function GkLtextes() {
if ( $_REQUEST['updated'] ) 
echo '
<div id="message" class="updated">
<p>C'est sauvegardé :)</p>
</div>
'; 
?>

<div class="wrap">
<div id="icon-edit" class="icon32"></div>

<h2>Les options du blog</h2>

<table class="widefat"><thead><tr><th>Accueil</th>
	</tr></thead><tbody><tr><td>
		<form method="post" action="options.php">
		
		<input type="text" name="txt1" value="<?php echo get_option('txt1'); ?/>"></form></td>

 </tr><tr><td>
		<form method="post" action="options.php">
		
		<input type="text" name="txt2" value="<?php echo get_option('txt2'); ?/>"></form></td>

   </tr></tbody></table><p class="submit">
		<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?/>"></p>

	
</div>


  • « table »
  • est un tableau. Il sera présent ou non (à vous de voir) sur votre page d’options. Il reprend bien évidemment le style des modules de bases de WordPress.

  • « gkltextes »
  • est donc la valeur de base de vos options. Elle est unique et doit être présente avant chaque utilisation d’un nouveau formulaire.

  • « txt1 » et « txt2« 
  • sont également des valeurs uniques. Elles doivent être renseignées deux fois pour chaque nouveaux formulaires. Dans l’attribut « value » (formulaire) et « name« . Cela permet d’enregistrer le texte que vous avez renseigné dans le formulaire.

  • « updated »
  • est en fait l’attribut qui permet d’afficher un message de confirmation si l’ensemble de vos données, lors de la saisie et l’envoi des données textes.

Nous avons maintenant une page d’options dynamique, très simple d’utilisation. Vous pouvez facilement dupliquer les formulaires d’envoie de nouvelles données pour cela il faudra bien faire attention à ne pas oublier d’ajout votre nouvelle valeur dans le haut de votre fichier « index.php » du dossier « functions« . Il vous suffit d’ajouter cette ligne à la suite logique de la fonction « register_setting« .

register_setting( 'gkltextes', 'nouveau_texte' );

Vous pouvez maintenant dupliquer le formulaire d’envoie convenablement et sans erreur. Voici ce que vous devez copier et coller. Vous pouvez bien évidemment respecter la structure du tableau pour créer une page d’options parfaite.
Pour cela rendez-vous à la partie 4.

 <tr><td>
		<form method="post" action="options.php">
		
		<input type="text" name="nouveau_texte" value="<?php echo get_option('nouveau_texte'); ?/>"></form></td>

   </tr>

Partie 3 – Utilisation du fichier functions.php

Nous y voilà, le fichier « functions.php » de votre thème WordPress permet tout simplement d’injecter toutes les préférences et fichiers précédemment cités. Ouvrez le fichier et copiez le bout de code suivant juste après la première ligne la boucle php.

require_once (TEMPLATEPATH . '/functions/index.php');  

Partie 4 – Un tableau d’informations complet

Pour en revenir sur l’affichage du tableau (qui n’est pas obligatoire, mais ceci est un exemple), voici comment adapté plusieurs colonnes avec plusieurs formulaires pour des informations précises. Il vous suffit de remplacer le tableau « widefat » présent dans le code présenté précédemment par celui-ci. Dans ce code, presque final, nous avons quatre fonctions pour quatre colonnes et une seule rangée.

<table class="widefat"><thead><tr><th>Accueil</th>
		<th>Colonne</th>
		<th>Articles</th>
		<th>Commentaires</th>
	</tr></thead><tbody><tr><td>
		<form method="post" action="options.php">
		
		<input type="text" name="txt1" value="<?php echo get_option('txt1'); ?/>"></form></td>

     <td>
		<form method="post" action="options.php">
		
		<input type="text" name="txt2" value="<?php echo get_option('txt2'); ?/>"></form></td>

     <td>
		<form method="post" action="options.php">
		
		<input type="text" name="txt3" value="<?php echo get_option('txt3'); ?/>"></form></td>
	
	   <td>
		<form method="post" action="options.php">
		
		<input type="text" name="txt4" value="<?php echo get_option('txt4'); ?/>"></form></td>

   </tr></tbody></table>

Partie 5 – Ajout d’une autre page d’options

Cette étape n’est pas très complexe, mais de dispose pas d’une grande utilité. Cela dépend de votre besoin.
Pour effectuer cette opération, nous devons revenir en arrière et éditer le fichier « index.php » du dossier « functions ». Nous allons ajouter une nouvelle fonction, ordonnant à WordPress d’attribuer un sous-menu à celui de base, que nous et vous venons de créer. Repérez la ligne suivante.

add_menu_page('Paramètres du blog', 'Paramètres', 'administrator', 'Blog', 'GkLtextes', 'http://www.geekeries.fr/gk.png', '3');

Après cela, il suffit de coller la ligne suivante et le sous-menu sera automatiquement attribué à votre module grâce à la valeur « Blog ».

add_submenu_page('Blog','Autres', 'Autres', 'administrator', 'Autres', 'GkAutres');

Restons dans le même fichier. Nous devons maintenant créer et dissocier les deux paramètres de la page d’options « GkLtextes » et « GkAutres« . Pour cela, rendez-vous à la fonction « register_mysettings » et rajouter (autant de fois qu’il est nécessaire) la ligne suivante. Cela permet d’avoir deux paramètres différents.

register_setting( 'gk_autres', 'autre_1' );
  • « autre_1 »
  • est à modifier à chaque duplication de la ligne, elle doit être à chaque fois unique.

  • « gk_autres »
  • est à utiliser avant chaque nouveaux formulaires texte. Comme expliqué précédemment.

Partie 6 – Développement de la deuxième page d’options.

Nous pouvons maintenant créer la deuxième page. Le fichier doit être dans le même dossier « functions » que « index.php« . Ce n’est pas obligatoire, mais un minimum d’organisation est nécessaire pour une bonne compréhension. Nous allons donc créer le fichier « autres.php » (c’est un exemple) contenant les lignes suivantes.


<p>C'est sauvegardé :)</p>

';

?>

<div class="wrap">
<div id="icon-post" class="icon32"></div>

<h2>Les autres options du blog</h2>

		<form method="post" action="options.php">
		
		<input type="text" name="autre_1" value="<?php echo get_option('autre_1'); ?/>"><p class="submit">
		<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?/>"></p>

	</form>
</div>


Partie 7 – Modification du fichier « functions.php ».

Maintenant que nous avons ajoutés un sous menu (vous pouvez en ajouter autant que vous voulez), il vous faut modifier le fichier « functions.php » de votre thème WordPress. En effet, vous devez simplement appeler votre nouvelle page d’options, pour cela coller la ligne suivante.

require_once (TEMPLATEPATH . '/functions/autres.php');  

Partie 8 – Afficher les données enregistrées.

L’une des parties les plus importantes, puisque cela est l’essentiel d’une page option. Afficher les données et extrêmement simple. Il vous suffit de renseigner la valeur unique du formulaire (étape 1, register_setting) dans la fonction suivante. À coller là où vous souhaitez voir apparaitre l’information.


Si vous souhaitez récupérer une information enregistrées directement dans une variable de type « query », il vous suffit de coller la balise suivante, sous la forme présenté.

' '.get_option('txt1');.' '

En voici un exemple d’intégration.



	<a href="<?php%20the_permalink();?>" title the_title>">
		
	</a>
                   
	

Partie 9 – Les éléments graphiques (icône, tableau)

Étant dans le panel d’administration de WordPress, vous pouvez bien évidemment utiliser son style graphique. Nous avions utilisés une icône personnalisée pour le menu, maintenant nous pouvons utiliser les icônes par défauts de WordPress, le tableau de base comme dans nos exemples ou encore les boutons stylisée.

Tout d’abord, nous devons appeler la balise principale.
Elle permet d’avoir une bonne structure pour notre page d’options.

<div class="wrap">
Le contenu de notre page d'options.
</div>

Les boutons :

//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>


Afficher un bouton pour illustrer la page d’options :

<div id="icon-ms-admin" class="icon32"></div>
<div id="icon-edit" class="icon32"></div>
<div id="icon-upload" class="icon32"></div>
<div id="icon-themes" class="icon32"></div>
<div id="icon-plugins" class="icon32"></div>
<div id="icon-users" class="icon32"></div>
<div id="icon-tools" class="icon32"></div>
<div id="icon-options-general" class="icon32"></div>
<div id="icon-link-manager" class="icon32"></div>
<div id="icon-edit-pages" class="icon32"></div>
<div id="icon-edit-comments" class="icon32"></div>

Insérer un tableau vierge :


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

BRANDT Valentin

Créateur de Geekeries.fr. Référentiel de ressources WordPress en Français qui a vu le jour pour la toute première fois en 2007. Je publie régulièrement des plugins, des outils SEO, des ressources et de l'actualités pour améliorer votre expérience avec le CMS WordPress.

Ne manquez pas nos autres contenus :