Hướng dẫn cách tích hợp Ui Slider jQuery vào Website WordPress

1. Ui Slider jQuery là gì?

Ui Slider là thanh bar kéo qua lại của jQuery, tích hợp sẵn trong CMS WordPress. Được sử dụng trong các chức năng ví dụ như là tạo thuộc tích Bo Góc, cũng có thể là tùy chỉnh số lượng slide, phân trang cho các Lập Trình WordPress.

2. Cách gọi và sử dụng Ui Slider jQuery trong WordPress

Mở file functions.php trong theme bạn đang sử dụng và thêm đoạn code bên dưới vào.

2.1 Cách thêm thư viện jQuery vào WordPress

add_action( 'init', 'wpshare247_init_wp_enqueue_script' );
function wpshare247_init_wp_enqueue_script(){
    wp_enqueue_style( 'wpshare247_jquery-ui.css', 'https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css', false, time() );
    wp_enqueue_script('jquery-ui-slider');
}

2.2 Cách tạo thanh Slider bar jQuery

Trong ví dụ này tôi sử dụng hook wp_footer thông qua add_action, tuy nhiên bạn có thể thay đổi tag action này vẫn không ảnh hưởng đến chức năng này nhé.

add_action('wp_footer', 'wpshare247_add_js_ui_slider');
function wpshare247_add_js_ui_slider(){
    $min = 0; $max = 50; $def = 25;
    ?>
    <!-- Bước 1: Css -->
    <style type="text/css">
        #wpshare247-slider-layout{
            max-width: 1120px; margin: 0 auto;
        }
        .wpshare247-slider-container{
            width:300px;
        }
        .wpshare247-slider-label{
            display: flex; margin-top: 5px;
        }
        .wpshare247-slider-label .m{
            width: 90%; text-align: center;
        }
    </style>

    <!-- Bước 2: HTML -->
    <div id="wpshare247-slider-layout">
        <div class="wpshare247-slider-container">
            <div id="wpshare247-slider-id" class="wpshare247-slider-ui" data-min="<?php echo $min; ?>" data-max="<?php echo $max; ?>" data-value="<?php echo $def; ?>"></div>
            <div class="wpshare247-slider-label">
                <span class="f"><?php echo $min; ?></span>
                <span class="m"><?php echo $def; ?></span>
                <span class="e"><?php echo $max; ?></span>px
            </div>
        </div>
    </div>

    <!-- Bước 3: Javascript -->
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            var slider_id = '#wpshare247-slider-id';
            jQuery( slider_id ).slider({
                range: "max",
                min: jQuery( slider_id ).data('min'),
                max: jQuery( slider_id ).data('max'),
                step: 1,
                value: jQuery( slider_id ).data('value'),
              	slide: function( event, ui ) {
              		var v = ui.value;
              		var e = event.target;
              		jQuery( jQuery(e).next().find('span.m') ).text(v);
              	}
            });
        });
    </script>
    <?php
}

Giải thích: 

• $min : Value giá trị nhỏ nhất của thanh slider
• $max: Value giá trị lớn nhất của thanh slider
• $def: Value giá trị mặc định khi load thanh slider

Như vậy là chúng ta đã tích hợp thành công thanh Slider vào Website.

Cần chú ý tại hàm slide như dưới là sự kiện event khi chúng ta kéo và thả thanh slider.

slide: function( event, ui ) {
    var v = ui.value;
    var e = event.target;
    jQuery( jQuery(e).next().find('span.m') ).text(v);
}

Nâng cao:

Options:

• animate
• classes
• disabled
• max
• min
• orientation
• range
• step
• value
• values

Methods:

• destroy
• disable
• enable
• instance
• option
• value
• values
• widget

Events:

• change
• create
• slide
• start
• stop

Để học thêm chi tiết về thư viện Slider này bạn xem tại link tài liệu gốc này nhé: jQuery Ui Slider