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

10

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

J'essaie d'implémenter le sélecteur de couleurs, comme indiqué dans le volet API de personnalisation de thème Wordpress, pour la sélection des couleurs. Le chargement des scripts et des styles fonctionne bien lorsque vous utilisez le hook, "admin_enqueue_scripts" fonctionne, mais vous ne pouvez pas charger ces scripts sur le serveur frontal à l'aide du 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, ce qui vous permet de modifier temporairement le style du site sans avoir à vous connecter via le Panneau wp-admin.

    
posée Dwayne Charrington 23.01.2013 - 03:40

2 réponses

15

Cela m’a rendu fou pendant un moment, mais j’ai réussi à le faire en les ajoutant avec tous les arguments utilisés dans le chargeur de script d’administrateur au lieu de simplement référencer le descripteur. Lorsque j'imprime le frontal $wp_scripts global sur le front-end, 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 );
    
réponse donnée Milo 23.01.2013 - 04:42
3

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

Maintenant, créez un nouveau fichier javascript comme cp-active.js et conservez-le défini par avobe en définissant 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

    
réponse donnée csehasib 16.03.2015 - 06:00

Lire d'autres questions sur les étiquettes