Champ Couleur de

Objectif

Le champ Couleur fournit un sélecteur pour choisir visuellement une couleur. Le champ affiche la valeur hexadécimale résultante.

Création du champ

Paramètres spéciaux pour ce champ :

• Classe du champ Définir à w-auto pour que le champ soit juste assez large pour l'échantillon et la valeur.

Remarque : dans cet exemple, l'inclusion du type de champ dans le titre est uniquement à des fins de démonstration. Ne le faites pas dans vos propres titres de champs.

Saisie des données

Vous pouvez saisir une valeur de couleur hexadécimale si vous savez que les nombres hexadécimaux vont de 0 à 9 puis de a à f, et que les paires de nombres représentent le rouge, le vert et le bleu. Ainsi, #00ff00 signifie aucun rouge, un maximum de vert et aucun bleu. Vous pouvez aussi utiliser un curseur pour sélectionner une couleur visuellement.

Affichage des données

La capture d'écran suivante du Site montre le champ affiché dans un article. Le paramètre Affichage automatique est responsable de la position du champ et votre template est responsable du design du champ.

L'affichage par défaut des données est la valeur de couleur hexadécimale, ce qui n'est pas très utile. La solution simple consiste à créer une surcharge de template pour le plugin fields / color. Il suffit de remplacer cette ligne :

echo htmlentities($value);

par ces lignes :

$value = htmlentities($value);
echo '<span style="background-color: ' . $value . ';"> ' . $value . '</span>';

Et la valeur hexadécimale sera précédée d'un échantillon ayant la couleur de fond correspondant à la valeur.

Recherchez l'élément Flower Colour.