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

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 !

Abonnez-vous

Restez en contact avec moi pour recevoir mes derniers articles concernant mon activité ou mes astuces pour WordPress.

Vos données ne seront jamais exploitées par un tiers. Vous avez aussi à chaque instant la possibilité de vous désabonner

fringilla dolor. in ut venenatis felis id luctus libero. ipsum pulvinar leo
Share This