Add Owl Carousel Slider in wordpress không sử dụng plugin như thế nào?

Thảo luận trong 'Mã nguồn mở Wordpress' bắt đầu bởi admin, 13/9/20.

  1. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,382
    Đã được thích:
    1,059
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Làm thế nào để thêm Owl Carousel Slider vào wordpress mà không cần phải sử dụng plugin? vì khi bạn sử dụng plugin có thể web sẽ bị chậm đi rất nhiều, việc nhúng trực tiếp giúp bạn dễ dàng tùy chỉnh và cài thiện tốc độ load web hơn.

    Đầu tiên bạn phải download được về tại các link chính của web sau (tải tùy thích ở các link muốn chọn):
    Hoặc tải link sau itseovn đã tải trước đó nén lại cho các bạn dễ biết và tải đúng lên trên themes không cần chỉnh sửa
    Sau khi tải về giải nén ra tìm tới các tập tin như sau: CSS, JS chính của owlcarousel2 sau đó tải hết lên thư mục gốc của themes: /public_html/wp-content/themes/tên_themes/..tải vào đây.

    Dữ liệu tải lên gồm:
    • /wp-content/themes/your-theme/js/owl.carousel.min.js
    • /wp-content/themes/your-theme/js/settings.js.
    • /wp-content/themes/your-theme/css/owl.carousel.min.css
    • wp-content/themes/your-theme/css/owl.carousel.css
    Nếu bạn tải về không có tập tin settings.js thì tạo 1 tập tin mới có đuôi .js và bỏ code sau vô:
    HTML:
    (function($) {
    "use strict";
    $(document).ready(function() {
    $("#proudct .owl-carousel").owlCarousel({
        items: 3,
        nav: true,
        dots: false,
        autoplay: false,
        loop: true,
    });
    $('.blog-css').owlCarousel({
        loop: true,
        responsiveClass: true,
        nav: true,
        autoplay: false,
        navContainer: false,
        navText: ['Previous ', 'Next'],
        responsive: {
            0: {
                items: 1,
                margin: 8,
                nav: true
            },
            600: {
                items: 2,
                margin: 10,
                nav: true
            },
            1000: {
                items: 3,
                margin: 20,
                nav: false,
                loop: false
            }
        }
    });
    })
    })(jQuery);
    Sau đó mở tập tin Function.php của themes lên, chèn code sau vô:

    PHP:
    add_action'wp_enqueue_scripts''cs_itseovn_scripts');
    function 
    cs_itseovn_scripts(){
    wp_enqueue_script('owl.carousel'get_template_directory_uri() . '/js/owl.carousel.min.js', array(), '1.0.0'true );
    wp_enqueue_script('settings'get_template_directory_uri() . '/js/settings.js', array(), '1.0.0'true );
    }
     
    function 
    cs_itseovn_styles() {
    wp_register_style('owl-carousel'get_template_directory_uri() .'/css/owl.carousel.css', array(), null'all' );
    wp_enqueue_style'owl-carousel' );
    }
    add_action'wp_enqueue_scripts''cs_itseovn_styles' );
    Như vậy là bạn đã chèn add được Owl Carousel vào web wodpress rồi.

    Chỉ cần tùy chỉnh class css ở settings.js nhận đúng với class của slider cần chạy là được ngay.
     
    Cảm ơn đã xem bài:

    Add Owl Carousel Slider in wordpress không sử dụng plugin như thế nào?

    danh sách diễn đàn rao vặt gov chất lượng


Like và Share ủng hộ ITSEOVN