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.

<input type="text" value="#bada55" class="my-color-field" data-default-color="#effeff" />

Php

 

La partie fonction Php qui appelle en file d’attente les scripts et styles.

add_action( 'admin_enqueue_scripts', 'mw_enqueue_color_picker' );
function mw_enqueue_color_picker( $hook_suffix ) {
    // first check that $hook_suffix is appropriate for your admin page
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script( 'my-script-handle', plugins_url('my-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
}

jQuery

Nous avons chargé ‘my-script.js‘, voilà son contenu :

var myOptions = {
    // you can declare a default color here,
    // or in the data-default-color attribute on the input
    defaultColor: false,
    // a callback to fire whenever the color changes to a valid color
    change: function(event, ui){},
    // a callback to fire when the input is emptied or an invalid color
    clear: function() {},
    // hide the color picker controls on load
    hide: true,
    // show a group of common colors beneath the square
    // or, supply an array of colors to customize further
    palettes: true
};

$('.my-color-field').wpColorPicker(myOptions);

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

3 réponses
  1. Lycia
    Lycia dit :

    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.

    Répondre
    • Florent Maillefaud
      Florent Maillefaud dit :

      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

      Répondre

Répondre

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.