Après mon dernier billet sur la fonctionnalité d’upload d’images, voici l’astuce pour ajouter un color picker à votre plugin ou thème sur WordPress.
HTML
La partie HTML est simple, on a un champ <input> auquel on définit une couleur par défaut.
[pastacode manual= »%3Cinput%20type%3D%22text%22%20value%3D%22%23bada55%22%20class%3D%22my-color-field%22%20data-default-color%3D%22%23effeff%22%20%2F%3E » provider= »manual » lang= »markup »/]
Php
La partie fonction Php qui appelle en file d’attente les scripts et styles.
[pastacode manual= »add_action(%20’admin_enqueue_scripts’%2C%20’mw_enqueue_color_picker’%20)%3B%0D%0Afunction%20mw_enqueue_color_picker(%20%24hook_suffix%20)%20%7B%0D%0A%20%20%20%20%2F%2F%20first%20check%20that%20%24hook_suffix%20is%20appropriate%20for%20your%20admin%20page%0D%0A%20%20%20%20wp_enqueue_style(%20’wp-color-picker’%20)%3B%0D%0A%20%20%20%20wp_enqueue_script(%20’my-script-handle’%2C%20plugins_url(‘my-script.js’%2C%20__FILE__%20)%2C%20array(%20’wp-color-picker’%20)%2C%20false%2C%20true%20)%3B%0D%0A%7D » provider= »manual » lang= »default »/]
jQuery
Nous avons chargé ‘my-script.js‘, voilà son contenu :
[pastacode manual= »var%20myOptions%20%3D%20%7B%0D%0A%20%20%20%20%2F%2F%20you%20can%20declare%20a%20default%20color%20here%2C%0D%0A%20%20%20%20%2F%2F%20or%20in%20the%20data-default-color%20attribute%20on%20the%20input%0D%0A%20%20%20%20defaultColor%3A%20false%2C%0D%0A%20%20%20%20%2F%2F%20a%20callback%20to%20fire%20whenever%20the%20color%20changes%20to%20a%20valid%20color%0D%0A%20%20%20%20change%3A%20function(event%2C%20ui)%7B%7D%2C%0D%0A%20%20%20%20%2F%2F%20a%20callback%20to%20fire%20when%20the%20input%20is%20emptied%20or%20an%20invalid%20color%0D%0A%20%20%20%20clear%3A%20function()%20%7B%7D%2C%0D%0A%20%20%20%20%2F%2F%20hide%20the%20color%20picker%20controls%20on%20load%0D%0A%20%20%20%20hide%3A%20true%2C%0D%0A%20%20%20%20%2F%2F%20show%20a%20group%20of%20common%20colors%20beneath%20the%20square%0D%0A%20%20%20%20%2F%2F%20or%2C%20supply%20an%20array%20of%20colors%20to%20customize%20further%0D%0A%20%20%20%20palettes%3A%20true%0D%0A%7D%3B%0D%0A%0D%0A%24(‘.my-color-field’).wpColorPicker(myOptions)%3B » provider= »manual » lang= »php »/]
Voilà ce que j’ai glané sur la toile pour vous (et surtout pour moi), pour vous aider. Cela m’a permis de personnaliser mon plugin WP Maintenance.
A bientôt
Simple comme tuto, mais fonctionne toujours pas pour moi 🙁
Bonsoir Florent,
Tout d’abord bravo et merci pour tous vos plugins…
Ensuite je désespère à réussir à ajouter un Color Picker à mon Contact Form 7. Je sais bien que certains autres plugins le propose mais je dois absolument utiliser CF7… Je n’arrive pas à créer un champ de choix de couleur même en m’aidant du peu de tutos que j’ai trouvé sur le web. Ils ne sont pas assez explicites, ou du moins ça ne fonctionne pas… Bref, vous pensez avoir la solutions à ce problème ?
Merci d’avance.
Bonjour Lycia,
Je viens de finir de développer cela pour vous (et pour les futurs autres).. 🙂
Je peaufine encore quelques détails et je le mettrais en ligne dans un tutoriel.
Voulez-vous déjà les fichiers pour tester cela et vous engager à me faire des retours ?
Cordialement