Utiliser le color Picker de WordPress 3.5 dans vos thèmes et plugins

WordPress dispose d’un nombre conséquent de fonctions et outils pratiques, comme par exemple le sélecteur de couleur. Cela vous évite donc d’avoir à en importer un autre.  Je vous propose dans ce tutoriel de vous montrer comment facilement l’implémenter dans vos pages options de plugins WordPress.

Appeler le script wp-color-picker

Nous allons appeler le script wp-color-picker livré avec WordPress.

La bonne pratique consiste à ne charge ce script que sur la page d’options de votre plugin, et pas dans toute l’admin (PHP a déjà assez mauvaise réputation comme ça, alors codons propre !).

Pour créer une nouvelle page d’options, vous faites appel à add_options_page situé dans une action admin_menu .

[pastacode lang=”php” message=”” highlight=”” provider=”manual”]

$mon_plugin_page = add_options_page(...);

[/pastacode]

Il vous faut ajouter juste après :

[pastacode lang=”php” message=”” highlight=”” provider=”manual”]

// méthode standard
add_action( 'admin_print_scripts-'.$mon_plugin_page, 'load_admin_scripts');

// OU programmation orientée objet
add_action( 'admin_print_scripts-'.$mon_plugin_page, array($this, 'load_admin_scripts'));

[/pastacode]

Vous demandez ici à WordPress de lancer une fonction qui va déclarer les scripts (on y vient juste après) et qui se lance au moment d’écrire les scripts dans la page. L’astuce ici est d’indiquer après le – le nom de la page concerné : avec cette méthode vous ne déclarez ces scripts que pour la page concernée. L’honneur de PHP est sauf.

Ecrivons ensuite la fonction de déclaration des scripts :

[pastacode lang=”php” message=”” highlight=”” provider=”manual”]

function load_admin_scripts( ) {
  wp_enqueue_style('wp-color-picker');
  wp_enqueue_script('myplugin-script', plugins_url('js/script.js', __FILE__), array('wp-color-picker'), false, true );
}

[/pastacode]

Petite astuce : si le fichier PHP dans lequel vous écrivez ces lignes se trouve dans un sous-dossier du plugin, écrivez alors : plugins_url(‘js/script.js’, dirname(__FILE__)). En ajoutant le dirname(). C’est bon à savoir et ça vous évitera de chercher pourquoi le js ne se charge pas.

Créez un fichier script.js que vous mettrez dans un dossier js/ à l’intérieur duquel vous écrirez :

[pastacode lang=”javascript” message=”” highlight=”” provider=”manual”]

(function($) {
  $(document).ready(function() {
    $('.color-field').wpColorPicker();<br />  });
})(jQuery);

[/pastacode]

Le function($) permet de sécuriser le $ pour jQuery éviter tout conflit. Le document.ready est la partie obligatoire de jQuery pour ne lancer le script qu’une fois la page chargée et opérationnelle, et enfin vous invoquez le color picker sur tout champ avec la classe .color-field  (vous pouvez mettre le nom que vous voulez)

Dans votre page d’option, il vous suffira d’afficher un champ input text avec la classe .color-field :

[pastacode lang=”markup” message=”” highlight=”” provider=”manual”]

<input type='text' class='color-field'>

[/pastacode]

Et normalement, c’est tout bon !

Problèmes connus

Si ça ne fonctionne pas :

• assurez-vous en premier lieu que WP rentre bien dans l’action load_admin_scripts : mettez y un echo “coucou” et voyez s’il s’affiche dans votre admin.
• Ensuite vérifiez dans l’inspecteur de code qu’il n’y a pas d’erreur javascript (clic droit > inspecter l’élément sur Chrome).
• Essayez de mettre un console.log(‘coucou’); dans votre fichier js et voyez s’il s’affiche bien dans l’inspecteur de code.
• Vérifiez que vous avez bien nommé votre classe.
• Vérifiez que vous avez utilisé la bonne technique pour appeler le fichier js/script.js (à la racine ou en sous dossier. Si vous êtes en sous/sous dossier c’est encore différent )
• Si vous êtes en programmation orientée objet n’oubliez pas d’ajouter array($this, ‘load_admin_scripts’) au lieu de juste ‘load_admin_scripts‘.

Résultat

Le sélecteur de couleur s’intègre très bien à WordPress. Vous pouvez choisir une couleur facilement via la roue des couleurs, indiquer une valeur hexadécimale directement dans le champ et effacer la valeur.