Color - GeekPress/WP-Custom-Fields GitHub Wiki

Color

Le champ Color permet de sélectionner un code hexacolor à l'aide d'une palette de couleur (ColorPicker). Par défaut, il s'agit d'un champ Text auquel on ajoute le plugin jQuery Farbastic :

Pour créer ce champ, il faut assigner un array à la variable $fields avec la valeur 'color' à la clé 'type' comme ci-dessous :

<?php
$fields[] = array(
                'name'         => '_bg_color', // Attribut "name" de la balise "input" - il doit être unique
                'label'        => 'Couleur de fond', // Balise "label" du champ
                'type'         => 'color', // Permet de créer un champ avec un Colorpicker
);
?>

Grâce au type color de HTML5, l'élément <input> devient un Colopicker intégré. En fonction du navigateur, le style et la palette peuvent être différents.

Par exemple, sous Chrome, le champ de saisie est transformé par une boîte de couleur et une palette apparait lorsque l'on clique dessus :

Pour cela, il faut ajouter la clé 'html5' et la valeur true dans l'array assigné à la variable $fields comme ci-dessous :

<?php
$fields[] = array(
                'name'         => '_bg_color', // Attribut "name" de la balise "input" - il doit être unique
                'label'        => 'Couleur de fond', // Balise "label" du champ
                'type'         => 'color', // Permet de créer un champ avec un Colorpicker
                'html5'	       => true // Force l'utilisation d'un input HTML5 de type="color"
);
?>

Si le navigateur ne supporte pas le type color, le plugin jQuery Farbastic sera utilisé pour afficher la palette de couleur.

Pour être certain que l'utilisateur précise valeur hexadécimal, le validateur hexacolor est ajouté par défaut lors de la création d'un champ Color. Si la valeur ne correspond pas à un code héxadécimal, un message de prévention sera affiché à côté du champ :