Ecriture d’un plugin Wordpress, 2e partie : finaliser le plugin Twitter

Après avoir montré les bases de l’écriture d’un plugin, nous avons commencé l’écriture d’un plugin Twitter dans les articles précédents. Dans cet article, nous allons voir comment récupérer les options choisies par les utilisateurs afin de pouvoir les utiliser, et en passant, comment sécuriser notre code.

Notre plugin permettra à l’utilisateur de choisir le nom d’utilisateur Twitter qu’il souhaite afficher, ainsi que de personnaliser le plugin. Le plugin doit donc récupérer les choix de l’internaute et les stocker dans une base de données, et ensuite utiliser ces données pour modifier le widget Twitter. Cela tombe bien WordPress propose des fonctions qui nous permettent d’effectuer précisément cela.

Il est tentant au début de créer ses propres tables afin de stocker ses données, voire d’utiliser directement les fonctions PHP/MySQL natives. Mais à quoi sert de réinventer la roue ? A moins de cas vraiment exceptionnels, profitons plutôt des fonctionnalités déjà présentes, qui nous simplifient grandement la tâche. WordPress s’occupe alors de sauvegarder et de récupérer ce que vous lui donner, et c’est quasiment tout ce qu’il y a à savoir !

1- Insérer et récupérer les données

Ceux qui ont écrit des plugins dans les anciennes versions (pré 2.7) se souviennent qu’il fallait ajouter les nonces dans le formulaire. Un nonce est un numéro unique d’identification qui permet à WordPress de déterminer qu’une requête POST ou GET provient bien d’un formulaire d’administration du même site et non d’un formulaire provenant d’un autre site. Il fallait également ajouter manuellement les options à sauvegarder avec les fonctions add_options et update_options, à partir des valeurs récupérées depuis $_POST ! Bref, beaucoup de travail !

Depuis la version 2.8, les choses sont beaucoup plus simples. On indique d’abord que l’on souhaite exécuter une nouvelle fonction ('twitterOptions') lorsque l’action admin_init est lancée.
add_action('admin_init', 'twitterOptions');
Ensuite, la fonction twitterOptions() se contente d’utiliser la fonction register_setting() de WordPress.
register_setting('twitter-plugin-settings', 'twitter_plugin_settings');
En clair, on indique à Wordpress que notre plugin va utiliser des données collectivement désignées par twitter-plugin-settings (qui sera donc la référence unique de nos données dans WordPress), et qui seront stockées dans la base de données utilisée par WordPress, table options, sous le nom de twitter_plugin_settings.

TwitterInTheSidebar.php

add_action('admin_init', 'twitterOptions');
  function twitterOptions() {
  	register_setting('twitter-plugin-settings', 'twitter_plugin_settings');
    }

 //intègre le tout aux pages Admin de Wordpress
 add_action("admin_menu", "addTwitterAdmin");

Ensuite, on ouvre TwitterInTheSidebarAdmin.php, pour le modifier afin qu’il prenne en compte les changements :

<div class="wrap twitter-in-the-sidebar">
<h2>Options de personnalisation de Twitter In The Sidebar</h2>
<form method="post" action="options.php">
<?php settings_fields('twitter-plugin-settings'); ?>
<?php $options = get_option('twitter_plugin_settings'); ?>
  <ul>
    <li><label>Nom du compte Twitter:<input type="text" width="150" name="twitter_plugin_settings[account]" value="<?php echo $options['account']; ?>"/></label></li>
  	<li><label>Largeur du widget:<input type="text" width="50" name="twitter_plugin_settings[width]" value="<?php echo $options['width']; ?>" /></label></li>
    <li><label>Hauteur du widget: <input type="text" width="50" name="twitter_plugin_settings[height]" value="<?php echo $options['height']; ?>" /></label></li>
    <li><label>Couleur de fond du cadre: <input type="text" width="100" name="twitter_plugin_settings[shell-background-color]" value="<?php echo $options['shell-background-color']; ?>" maxlength="6" /></label></li>
    <li><label>Couleur du texte du cadre: <input type="text" width="100" name="twitter_plugin_settings[shell-color]" value="<?php echo $options['shell-color']; ?>" maxlength="6" /></label></li>
    <li><label>Couleur de fond des tweets: <input type="text" width="100" name="twitter_plugin_settings[tweets-background-color]" value="<?php echo $options['tweets-background-color']; ?>" maxlength="6" /></label></li>
    <li><label>Couleur des tweets: <input type="text" width="100" name="twitter_plugin_settings[tweets-color]" value="<?php echo $options['tweets-color']; ?>" maxlength="6" /></label></li>
    <li>&nbsp;</li>
    <li><input  class="button-primary" type="submit" name="Save" value="<?php _e("Save Options"); ?>" id="submitbutton" /></li>
  </ul>
</form>
</div>

La fonction settings_fields() effectue tout le travail dans ce code : elle initialise d’abord différents champs cachés qui indiquent à WordPress la nature de l’action à effectuer (création ou mise à jour des données), et transmettent le nonce et le referrer de la requête, afin que WordPress puisse l’authentifier. WordPress peut ainsi certifier que notre requête provient bien d’une page autorisée, ce qui sécurise la transaction. La fonction indique également à WordPress que nous allons nous servir des données dont la référence unique est twitter-plugin-settings dans ce formulaire. La ligne suivante ($options = get_option('twitter_plugin_settings');) récupère les données qui sont déjà stockées afin de pré-remplir les champs correspondants.

Vous avez sûrement remarqué que nous n’avons indiqué qu’une seule entrée (twitter_plugin_settings) pour l’ensemble de nos données, alors que nous avons 7 données à stocker. Il est possible d’utiliser autant d’entrées que de données, mais cela a comme conséquence de remplir la table [wp_]options d’entrées. Pour réduire le nombre de requêtes, il vaut mieux regrouper les données dans un tableau et les stocker dans une entrée unique, notamment lorsque les données sont légères, comme c’est le cas ici. Cela permet aussi de réduire le nombre de lignes à écrire ! Concrètement, on envoie les donnés par le formulaire en utilisant une syntaxe qui indique qu’elles appartiennent à un tableau (twitter_plugin_settings[nomdedonnée]) dans le champ name. C’est suffisant, et WordPress récupère tout seul les valeurs, les stocke dans un tableau et les enregistre dans la base de donnée.

Pour récupérer les valeurs, nous avons recours à la fonction get_options, dont on récupère la valeur dans la variable $options. On utilise ensuite la syntaxe habituelle des tableaux pour accéder au contenu des valeurs, par ex. "".

A noter également que la fonction register_setting() peut recevoir en 3e argument une fonction qui permet de « nettoyer » les données avant de les stocker. Vous pouvez utiliser les fonctions natives de PHP, les fonctions de nettoyage de WordPress ou même vos propres fonctions.

2- Afficher les données dans le plugin

Nous voilà enfin à l’étape finale : modifier le widget en fonction des préférences de l’utilisateur. Rien de compliqué ici, il suffit de remplacer les valeurs modifiables par des variables, et ensuite de remplir ces variables par le contenu de twitter-plugin-settings. Nous modifions donc la fonction afficheTweet() comme suit (en gras, les modifications):

function afficheTweet() {
    extract(get_option('twitter_plugin_settings'));

	echo <<<TWEET
	<script src="http://widgets.twimg.com/j/2/widget.js"></script>
	<script>
	new TWTR.Widget({
	  version: 2,
	  type: 'profile',
	  rpp: 4,
	  interval: 6000,
	  width: $width,
	  height: $height,
	  theme: {
		shell: {
		  background: '#$shell_background_color',
		  color: '#$shell_color'
		},
		tweets: {
		  background: '#$tweets_background_color',
		  color: '#$tweets_color',
		  links: '#4aed05'
		}
	  },
	  features: {
		scrollbar: false,
		loop: false,
		live: false,
		hashtags: true,
		timestamp: true,
		avatars: false,
		behavior: 'all'
	  }
	}).render().setUser('$account').start();
	</script>
TWEET;
	}

Nous commençons donc par récupérer les données sous forme de tableau depuis la base de données avec get_options. Nous extrayons ensuite ces données du tableau en variables avec la fonction explode(). Nous remplaçons ensuite les éléments à personnaliser du widget par ces variables.

Voyez le résultat, avec cette fois compte officiel de Twitter en France et non plus celui du créateur de Lost (qui s’achève de toutes façons !).

Télécharger le code complet :
TwitterInTheSidebar.php
TwitterInTheSidebarAdmin.php
TwitterInTheSidebar.css