Chuyển jQuery và tất cả javascript xuống footer

Xin chào tất cả các bạn, trong bài viết Hướng dẫn tích hợp Bootstrap vào giao diện WordPress thì mình đã có thảo luận tới việc dùng hàm để đưa style và javascript vào giao diện. Tuy nhiên thì bạn nên chú ý ở đây là đối với tập tin css thì bạn nên cho ở phần head còn những tập tin javascript thì bạn nên đặt nó phía trước kết thúc thẻ body.

Đưa jQuery xuống dưới cùng của trang WordPress

Để có thể thực hiện được bài viết này thì bạn phải nắm vững các hàm đăng ký và cho script vào hàng đợi.

Đối với hàm wp_register_script thì bạn chỉ dùng để đăng ký script với WordPress, nó không thể thêm script vào hàng đợi của bạn được, bắt buộc bạn phải dùng hàm wp_enqueue_script sau khi bạn đã đăng ký thành công script. Tuy nhiên, riêng hàm wp_enqueue_script thì bạn có thể làm được cả 2 công việc, nếu bạn sử dụng tất cả các tham số đầu vào thì WordPress sẽ kiểm tra nếu như chưa có handle thì nó sẽ đăng ký và sau đó sẽ cho script đó vào hàng đợi.

Và bài viết này mình muốn nói đến công việc đưa jQuery xuống bên dưới footer thay vì nằm ở trong thẻ head như mặc định. Công việc đầu tiên bạn phải làm là dequeue để xóa nó ra khỏi hàng đợi và sau đó là deregister nó. Sau đó bạn sẽ đăng ký lại giá trị mới và công đoạn thì phải làm ngược lại so với lúc bạn xóa. Chú ý là jQuery có liên quan tới jQuery Migrate, bạn phải cho thông số phụ thuộc của jQuery thì nó mới có thể hoạt động tốt được.

private function move_jquery_to_footer() {
    $jquery = ABSPATH . WPINC . "/js/jquery/jquery.js";
    $jquery_migrate = ABSPATH . WPINC . "/js/jquery/jquery-migrate.min.js";
    if(file_exists($jquery) && file_exists($jquery_migrate)) {
        wp_dequeue_script('jquery');
        wp_deregister_script('jquery');
        wp_dequeue_script('jquery-migrate');
        wp_deregister_script('jquery-migrate');
        wp_register_script('jquery-migrate', includes_url("js/jquery/jquery-migrate.min.js"), array(), false, true);
        wp_register_script('jquery', includes_url("js/jquery/jquery.js"), array('jquery-migrate'), false, true);
    }
}

Hàm bên trên mình mới chỉ có đăng ký lại thôi chứ chưa dùng enqueue để cho nó vào hàng đợi, bạn có thể thêm hoặc làm việc này thông qua tham số dependencies. Sau này đối với các tập tin javascript bạn muốn thêm vào giao diện, nên để thông số $in_footer để cho nó nằm trước kết thúc thẻ body.

Việc đưa tất cả javascript xuống dưới footer sẽ giúp cho trang của bạn chạy nhanh hơn vì javascript sẽ được load sau thay vì load trước nội dung như bình thường. Chúc bạn thành công.

Gửi bình luận của bạn

Gửi bình luận

Địa chỉ email của bạn sẽ được giữ bí mật. Những mục bắt buộc được đánh dấu *