Wie implementiere ich den WordPress Iris Picker in mein Plugin im Frontend?

10

Diese Frage hier stellt dieselbe Frage wie ich, aber es gab weder angemessene Antworten noch eine ausgewählte richtige Antwort. Ich frage erneut, in der Hoffnung, dass ich eine kohärentere Frage bekomme, um eine Antwort zu erhalten.

Ich versuche, das Farbauswahlrad zu implementieren, wie im API-Bereich zur Anpassung des Wordpress-Themas für die Auswahl von Farben angezeigt. Das Laden der Skripte und Stile funktioniert einwandfrei, wenn der Hook verwendet wird. "Admin_enqueue_scripts" funktioniert jedoch. Der Versuch, diese Skripte über den Hook im Front-End zu laden, funktioniert nicht. "Wp_enqueue_scripts" funktioniert nicht. Der Stil wird in die Warteschlange gestellt, nicht jedoch das Skript.

Ich möchte vermeiden, dass Dateien in mein Plugin kopiert werden, um das zu duplizieren, was bereits in Wordpress enthalten ist. Es muss eine Möglichkeit geben, den Iris-Farbwähler am Frontend zum Laufen zu bringen, die ich nicht sehe.

Und für diejenigen, die sich fragen, warum ich das tun möchte, entwickle ich ein Plugin, das ein Flyout-Panel an der Seite des Bildschirms hinzufügt, mit dem Sie temporäre Stiländerungen in Echtzeit an der Site vornehmen können, ohne sich über den wp-admin anmelden zu müssen Panel.

— Dwayne Charrington
quelle

16

Das hat mich eine Weile verrückt gemacht, aber ich habe es zum Laufen gebracht, indem ich sie mit den vollständigen Argumenten hinzugefügt habe, die im Admin Script Loader verwendet werden, anstatt nur auf das Handle zu verweisen. Wenn ich die $wp_scriptsglobale Datei im Front-End drucke irisund wp-color-pickernirgends zu finden bin, funktionieren alle Abhängigkeiten der jQuery-Benutzeroberfläche. Wie auch immer, ich bin mir nicht sicher, ob das richtig ist, aber es erledigt den Job:

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
quelle

Wow, perfekt. Es ist mir nie in den Sinn gekommen, die Funktion admin_url zu verwenden und die Skripte einfach in die Warteschlange zu stellen, ohne sie zu registrieren und dann in die Warteschlange zu stellen. Dies ist wahrscheinlich so nah wie möglich an der Verwendung des Iris-Kernfarbwählers und seiner Abhängigkeiten. Vielen Dank.

— Dwayne Charrington

1

Dies brachte mich fast dorthin, aber ich hatte immer noch einen Fehler in Bezug auf wpColorPickerL10n, so dass ich ein bisschen mehr innerhalb der Funktion hinzufügen musste. Ich habe die Antwort oben mit der Anforderung wp_localize_script aktualisiert.

— Industrielle Themen

3

Wir müssen das Skript wp_enqueue_script und den Stil wp_enqueue_style mit add_action zur Datei functions.php erstellen. Fügen Sie diesem Skript einfach eine jQuery-Datei und eine Stylesheet-Datei hinzu.

// Register Scripts &amp; 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);

Erstellen Sie nun eine neue Javascript-Datei wie cp-active.js und behalten Sie den avobe-definierten Dateipfad „/js/cp-active.js“ mit Balgcode bei.

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

Fügen Sie Ihrer Einstellungsseite ein Textfeld mit einer CSS-Klasse für den Farbwähler hinzu, in der Sie den Eingabetext anzeigen möchten. Ich habe "color_code" für die Eingabe von $ variable verwendet.

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

Details erhalten Sie hier

— csehasib
quelle