Comment puis-je implémenter le sélecteur WordPress Iris dans mon plugin sur le front-end?

10

Cette question ici pose la même question que moi, mais il n'y avait pas de réponses adéquates ni une réponse correcte sélectionnée, donc je demande à nouveau en espérant que si je pose une question de manière plus cohérente, je pourrais obtenir une réponse.

J'essaie d'implémenter la roue de sélection des couleurs comme indiqué dans le volet API de personnalisation du thème Wordpress pour sélectionner les couleurs. Le chargement des scripts et des styles fonctionne correctement lors de l'utilisation du hook, "admin_enqueue_scripts" fonctionne cependant en essayant de charger ces scripts sur le front-end en utilisant le hook, "wp_enqueue_scripts" ne fonctionne pas. Le style est mis en file d'attente, mais pas le script.

Je veux éviter de copier des fichiers dans mon plugin en dupliquant ce qui est déjà fourni avec Wordpress. Il doit y avoir un moyen de faire fonctionner le sélecteur de couleurs Iris sur le front-end que je ne vois pas.

Et pour ceux qui se demandent pourquoi je veux faire cela, je développe un plugin qui ajoute un panneau volant sur le côté de l'écran qui vous permet de faire des changements de style temporaires en temps réel sur le site sans avoir à vous connecter via wp-admin panneau.

hooks wp-enqueue-script theme-customizer color-picker Dwayne Charrington
la source

Réponses:

16

Cela m'a rendu fou pendant un certain temps, mais je l'ai fait fonctionner en les ajoutant avec les arguments complets qui sont utilisés dans le chargeur de script d'administration plutôt que de simplement référencer le handle. Lorsque j'imprime le $wp_scriptsglobal sur le front-end, iriset que je ne le wp-color-pickertrouve nulle part, bien que toutes leurs dépendances jQuery UI fonctionnent. Quoi qu'il en soit, je ne sais pas si c'est vrai, mais cela fait le travail:

function wpa82718_scripts() {
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script(
        'iris',
        admin_url( 'js/iris.min.js' ),
        array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ),
        false,
        1
    );
    wp_enqueue_script(
        'wp-color-picker',
        admin_url( 'js/color-picker.min.js' ),
        array( 'iris' ),
        false,
        1
    );
    $colorpicker_l10n = array(
        'clear' => __( 'Clear' ),
        'defaultString' => __( 'Default' ),
        'pick' => __( 'Select Color' ),
        'current' => __( 'Current Color' ),
    );
    wp_localize_script( 'wp-color-picker', 'wpColorPickerL10n', $colorpicker_l10n ); 

}
add_action( 'wp_enqueue_scripts', 'wpa82718_scripts', 100 );
Milo
la source
Wow, parfait. Il ne m'est jamais venu à l'esprit d'utiliser la fonction admin_url et de simplement mettre les scripts en file d'attente sans les enregistrer puis les mettre en file d'attente. C'est probablement aussi proche que possible de pouvoir utiliser le sélecteur de couleurs Iris de base et ses dépendances. Je vous remercie.
Dwayne Charrington
1
Cela m'a presque atteint, mais j'avais encore une erreur concernant wpColorPickerL10n, j'ai donc dû ajouter un peu plus dans la fonction. J'ai mis à jour la réponse ci-dessus avec l'exigence wp_localize_script.
Thèmes industriels
3

Nous devons wp_enqueue_script le script et wp_enqueue_style le style avec add_action dans le fichier functions.php. Il suffit d'inclure un fichier jQuery et un fichier de feuille de style par ce script.

// Register Scripts & Styles in Admin panel
function custom_color_picker_scripts() {
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'iris', admin_url( 'js/iris.min.js' ), array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), false, 1 );
wp_enqueue_script( 'cp-active', plugins_url('/js/cp-active.js', __FILE__), array('jquery'), '', true );

}
add_action( 'wp_enqueue_scripts', custom_color_picker_scripts);

Créez maintenant un nouveau fichier javascript comme cp-active.js et conservez-le avec le chemin de fichier «/js/cp-active.js» défini par avobe en utilisant le code du soufflet.

jQuery('.color-picker').iris({
// or in the data-default-color attribute on the input
defaultColor: true,
// 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
palettes: true
});

Ajoutez une zone de texte à votre page de paramètres avec une classe CSS pour le sélecteur de couleurs, où vous souhaitez afficher le texte d'entrée. J'ai utilisé "color_code" pour l'entrée $ variable.

<input id="color_code" class="color-picker" name="color_code" type="text" value="" />

Obtenez les détails d'ici

csehasib
la source