Plugins / Theme Options Page: Select / Radio / Checkbox

Cette article s’adresse à tous les développeurs de plugin et de thèmes wordpress. Il est toujours utile, et parfois nécessaire, d’utiliser des options dans un thème ou un plugin. Depuis la version 2.7, wordpress a prévu un nouveau mécanisme pour cela, Settings API. Beaucoup d’articles ont déjà été postés sur le web à propos de la création d’une page d’options en utilisant l’ api Settings API. Je vous recommande notamment:

  1.  PixelAce qui a un article très didactique sur la création d’une page d’options .
  2. Ensuite, ozh a un article sur la manière de compacter toutes les options d’un plugin/thème en un seul champ dans la base de données.

Je me suis inspiré de ces articles bien écrits pour rédiger la page d’options du plugin Welcome Announcement. Cela dit, j’ai cherché comment faire pour pouvoir ajouter des options autres que le basique input type=text. Par exemple des checkbox, des listes déroulantes (select), des radiobuttons ou alors des zones de texte (textarea). Après plusieurs essais, j’ai finit par trouver et je voudrait partager cela avec vous.

 Pour les exemples, je respecterais la syntaxe utilisée par PixelAxe.

1. Une liste Déroulante (select):

Utiliser la syntaxe suivante:

<tr valign="top">
<th scope="row">Label_of_Option_1</th>
<td><select name="my_plugin_option_1">
<option value="value1" <?php (get_option("my_plugin_option_1")=="value1")? "selected" : "" ; ?>>Description1</option>
<option value="value2" <?php (get_option("my_plugin_option_1")=="value2")? "selected" : "" ; ?>>Description2</option>
...
</select></td>
<tr>

Il y a 3 paramètres importants dans cette syntaxe: my_plugin_option_1, value1 et Description1 .

  • Label_of_Option_1 est la description de notre option.
  • my_plugin_option_1 est le nom de l’option que vous voulez enregistrer dans la BD wordpress.
  • value1 est l’une des valeurs que peut avoir l’option my_plugin_option_1. 
  • Description1 est la description de  value1 qui s’affiche dans la liste déroulante sur la page d’option.

Cette syntaxe crée un liste déroulante nommée my_plugin_option_1 avec les choix value1 et value2.  Au chargement de la page, la valeur qui est enregistrée dans la BD pour l’option my_plug_in_option_1 sera marquée comme sélectionnée grâce au code <?php (get_option(« my_plugin_option_1« )== »value1« )? « selected » : «  » ; ?>. Quand l’utilisateur clique sur le bouton enregister que vous avez défini, wordpress via options.php va enregister la valeur sélectionner dans la liste déroulante parce qu’il reconnaît my_plugin_option_1 comme une option enregistrée. 

Essayons avec un exemple. Imaginons que notre plugin ou thème affiche une transition entre deux images et nous voulons que la vitesse de la transition soit paramétrable. Nous allons par exemple créer une option qui s’appelle myplugin_transition_speed ou myplugin[‘transition_speed’] avec la description « Speed of the transition ». Et les options possibles seront slow,  et quick. Le texte de l’option ressemblerait à ceci:

<tr valign="top">
<th scope="row">Speed of the Transition</th>
<td><select name="myplugin['transition_speed']">
<option value="slow" <?php (get_option("myplugin['transition_speed']")=="slow")? "selected" : "" ; ?>>Slow: 10s</option>
<option value="quick" <?php (get_option("myplugin['transition_speed']")=="quick")? "selected" : "" ; ?>>Pretty quick: 2s</option>
</select></td>
<tr>

2. Des boutons radio (radiobutton):

Utiliser la syntaxe suivante:

<tr valign="top">
  <th scope="row">Label_of_Option_2</th>
  <td>
<input type="text" name="my_plugin_option_2" value="value1" <?php (get_option("my_plugin_option_2")=="value1")? "selected" : "" ; ?> /> Description_1 </br>
<input type="text" name="my_plugin_option_2" value="value2" <?php (get_option("my_plugin_option_2")=="value2")? "selected" : "" ; ?> /> Description_2 </br>
...
  </td>
</tr>

Essayons avec un exemple. Imaginons que notre plugin ou thème affiche une zone de recherche et nous voulons donner la possibilité d’utiliser la recherche intégrée de wordpress ou la recherche google. Nous allons par exemple créer une option qui s’appelle mytheme_search_method ou mytheme[‘search_method’] avec la description « Search method to use ». Et les options possibles seront built-in,  et google. Le texte de l’option ressemblerait à ceci: 

<tr valign="top">
  <th scope="row">Search Method</th>
  <td>
<input type="text" name="mytheme['search_method']" value="built-in" <?php (get_option("mytheme['search_method']")=="built-in")? "selected" : "" ; ?> /> WordPress Built-In search </br>
<input type="text" name="mytheme['search_method']" value="google" <?php (get_option("mytheme['search_method']")=="google")? "selected" : "" ; ?> /> Google Search </br>
  </td>
</tr>

3. Les cases à cocher (checkbox):

<tr valign="top">
  <th scope="row">Label_of_Option_3</th>
  <td>
<input type="checkbox" name="my_plugin_option_3" value="1" <?php (get_option("my_plugin_option_3"))? "checked" : "" ; ?>/>
  </td>
</tr>

La syntaxe value= »1″ enregistrera la valeur 1 dans la BD si l’option est sélectionnée, c’est l’équivalent de true.

Un exemple! Notre plugin affiche un message de bienvenue sur le site et on voudrait donner la possibilité de désactiver temporairement le message. La syntaxe est:

 
<tr valign="top">
  <th scope="row">Show the welcome message ?</th>
  <td>
<input type="checkbox" name="my_plugin['message_yn']" value="1" <?php (get_option("my_plugin['message_yn']"))? "checked" : "" ; ?>/>
  </td>
</tr>

 4. Les zones de texte (textarea)

La syntaxte est à peu près similaire à celle d’un champ de texte. Utiliser la syntaxe suivante:

<tr valign="top">
  <th scope="row">Label_of_Option_4</th>
  <td>
<textarea name="my_plugin_option_4" rows="3" cols="65">
<?php echo get_option("my_plugin_option_4") ; ?>
</textarea>
  </td>
</tr>

Si votre zone de texte enregistre du texte HTML, je vous recommande vivement de lui associer un éditeur wysiwyg comme nicEdit pour simplifier la tâche à l’utilisateur de votre page.

Voilà, c’est tout pour les syntaxes. Il ne vous reste plus qu’à  finaliser votre page d’options.  Une dernière suggestion peut être, utiliser une présentation conviviale pour vos options. Il n’y aucune obligation à mettres tous vos champs dans une table. Vous pouvez utiliser des tabs (avec jQuery UI tabs) par exemple ou en accordéon. Vous pouvez également ajouter vos options à pages d’options existantes vis l’api Settings API et notamment les fonctions add_settings_section et add_settings_field.

Cette fois c’est vraiment fini. Je vous souhaite bien du plaisir.

Tags: , , , , , , , , ,

Leave a Reply