Sélectionner une page

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

Florent Maillefaud

Tutoriel : Ajouter un champ color picker dans vos plugins ou thèmes WordPress 1Webmaster à Sablons (Isère) / Création de sites internet WordPress.

Micro-entrepreneur depuis 2012, je vous propose la création ou la refonte de votre site internet sous WordPress et à votre image.

Que ce soit un site vitrine, un blog ou un site e-commerce pour votre entreprise ou association, laissez votre empreinte sur le web !

Share This