Tout savoir sur WordPress

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.

colorpicker

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 .

$mon_plugin_page = add_options_page(...);

Il vous faut ajouter juste après :

// 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'));

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 :

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 );
}

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 :

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

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 :

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

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.

color-integration

 

Cet article a été mis à jour il y a 1979 jours - Il n'est peut être plus à jour !

Article écrit par Maxime BJ

Développeur, bloggeur et formateur Web spécialisé WordPress. 31 ans. Grenoblois. Co-fondateur de WPChef, l’organisme de formation WordPress.

Organisateur de WPInAlps, le meetup WordPress Grenoblois. Vous pouvez me rencontrer lors d’événements tels que WordCamp Paris et Europe. Traducteur Français de l’extension Advanced Custom Fields. Également développeur d’applications web avec MeteorJs. Je m’occupe un site pour apprendre l’informatique aux débutants gratuitement.

J’aime les jeux vidéo, la rando, la bouffe bien grasse et les voyages.

5 Commentaires

  1. Hey, merci pour ton tuto, malheureusement pas très clair pour les personnes qui débutent comme moi.

    – Il faut le sauvegarder ou le fichier script.js, dans plugin ?

  2. Dans mon cas je l’ai mis dans un dossier js/
    d’où l’URL plugins_url(‘js/script.js’, __FILE__) dans l’appel du script

    tu peux également le mettre à la racine de ton plugin et dans ce cas tu enlèves le ‘js/’

  3. Merci beaucoup Maxime, sympa de ta part :)

    Si je souhaite l’installer dans mon theme/montheme/js/script.js ?

    Sinon

    Que dois je utiliser comme chemin relatif à la place de plugins_url() ?

  4. Merci Maxime pour ce tuto.
    Toutefois, j’ai un problème assez bête. Le curseur de droite du Color Picker ne peut pas être déplacer de haut en bas par la souris. Il reste fixe.
    J’ai un WP 4.1.1, le thème SweetDate et une panoplie d’extensions.
    J’ai effectué des tests sur 3 navigateur, même problème.

    Quelqu’un aurait une idée ?
    Merci par avance.

    • Je pense que le CSS/Js du thème ou d’un plugin vient faire obstacle, essaye de changer de thème ?

  5. Merci pour ce tuto, j’ais juste un petit problème, je suis en train de créer un widget, le color picker fonctionne bien mais quand j’enregistre les options du widget, celui-ci n’est plus la, la console me dit que WpColorPicker n’est pas une fonction. Je ne trouve pas comment la redéfinir appres l’enregistrement des options du widget.

risus. et, dapibus pulvinar tristique vulputate, libero