Javascript | Settings API | Webentwicklung

WordPress: Nummerischen Slider in Theme oder Plugin-Options verwenden

slide rule 332493 1920

Beim “Enqueuen” von jquery-ui-Effekten (seit WordPress 3.3 onboard) muss man sich um das CSS selbst kümmern. Am schnellsten geht es über CDN (alternativ: downloaden und dann lokal einbinden). Ohne CSS wäre der jQuery-ui-Slider gar nicht zu sehen.

function ppt_add_numeric_slider() { wp_enqueue_style( 'jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css'); wp_enqueue_script("jquery-ui-core"); wp_enqueue_script("jquery-ui-slider"); wp_enqueue_script( 'my-plugin-slider', get_template_directory_uri() . '/js/admin-scripts.js', array(), '', true ); /*korrekte URL des scripts*/ } add_action( 'admin_enqueue_scripts', 'ppt_add_numeric_slider' );

Markup in der “add_settings_field”-Callback-Funktion

$settings = array( 'slider_one' => __( 'Slider One', 'ppp-test-plugin' ), 'slider_two' => __( 'Slider Two', 'ppp-test-plugin' ) ); foreach( $settings as $setting => $label ) { $val = $options[$setting];      echo '<div class="slider_wrapper"><label for="ppp_test_settings[' . esc_attr( $setting ) . ']">' . esc_html( $label ) . '</label><br />' .    '<input readonly type="number" name="ppp_test_settings[' . esc_attr( $setting ) . ']" id="' . esc_attr( $setting ) . '" value="' . esc_attr( $val ) . '" /><div class="slider-div"></div></div>'; }

Inhalt der Datei admin-scripts.js

jQuery(document).ready(function($) { $('.slider_wrapper').each(function() { var sliderdiv = $(this).find('.slider-div'); var sum = $(this).find('input').val(); var input = $(this).find('input'); sliderdiv.slider({ value: sum, min: 0, max: 100, step: 1, slide: function(event, ui) { input.val(ui.value); } }); input.val(sliderdiv.slider("value")); }); });

weiter schmökern

Schreibe einen Kommentar

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden.

Deine E-Mail-Adresse wird nicht veröffentlicht.