web-dev-qa-db-fra.com

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

Cette question ici pose la même question que moi, mais il n’ya pas eu de réponses adéquates, ni une réponse correcte choisie. Je demande donc à nouveau si je demande une réponse plus cohérente.

J'essaie d'implémenter la molette de sélection de couleur, comme indiqué dans le volet API de personnalisation de thème Wordpress pour la sélection de couleurs. Le chargement des scripts et des styles fonctionne correctement lorsque vous utilisez le hook, "admin_enqueue_scripts" fonctionne, mais vous ne pouvez pas charger ces scripts sur le serveur frontal en utilisant le hook, mais "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 plug-in 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 déroulant sur le côté de l'écran qui vous permet d'apporter des modifications de style temporaires en temps réel au site sans avoir à vous connecter via wp-admin. panneau.

hookswp-enqueue-scripttheme-customizercolor-picker
10
Dwayne Charrington

Cela m'a rendu fou pendant un certain temps, mais j'ai réussi à le faire en ajoutant les arguments complets utilisés dans le chargeur de script d'administration plutôt que de simplement référencer le descripteur. Lorsque j'imprime le $wp_scripts global sur le serveur, iris et wp-color-picker sont introuvables, bien que toutes leurs dépendances jQuery UI fonctionnent. Quoi qu'il en soit, je ne suis pas sûr que ce soit correct, mais le travail est fait:

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 );
16
Milo

Nous devons wp_enqueue_script le script et wp_enqueue_style le style avec add_action dans le fichier functions.php. Incluez simplement 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 défini par avobe pour le chemin du fichier "/js/cp-active.js" à l'aide du code à 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 couleur, dans laquelle vous souhaitez afficher le texte saisi. J'ai utilisé “color_code” pour input $ variable.

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

Obtenir des détails à partir d'ici

3
csehasib