Trang chủ »  Mẹo - thủ thuật »  Hướng dẫn cách chuyển javascript ở header xuống footer trong wordpress

Hướng dẫn cách chuyển javascript ở header xuống footer trong wordpress

03/06/2021  -   126 views

Hôm nay sẽ hướng dẫn các bạn một mẹo khá hay để tối ưu javascript trên header của wordpress. Việc di chuyển cac đoạn javascript xuống footer để khỏi bị trì hoãn tốc độ page speed.

  • Những đoạn code hay dùng trong lập trình theme wordpress
  • Share giao diện form đăng nhập/đăng ký tuyệt đẹp
  • Share giao diện slide circle svg
  • Cấu trúc theme của wordpress
  • Hướng dẫn cách chuyển javascript ở header xuống footer trong wordpress
  • Hướng dẫn tạo child theme trong wordpress
  • Mình sẽ đi nhanh vào vẫn đề lun nhé. Đầu tiên, bạn mở file functions.php trong theme, bạn nào chưa biết file functions.php chổ nào thì có thể tham khảo bài này nhé.

    LƯU Ý: Nếu tệp functions.php của bạn kết thúc bằng ?> (Hiển thị trong hình ảnh bên dưới), hãy đặt tập lệnh ngay trước nó… bạn có thể tạo một khoảng trống bằng cách đặt con trỏ lên trên ?> Và nhấn phím enter trên bàn phím.

    Bạn copy đoạn mã dưới đây dán vào nha.

     

    // Custom Scripting to Move JavaScript from the Head to the Footer
    function remove_head_scripts() {
    remove_action(‘wp_head’, ‘wp_print_scripts’);
    remove_action(‘wp_head’, ‘wp_print_head_scripts’, 9);
    remove_action(‘wp_head’, ‘wp_enqueue_scripts’, 1);
    
    add_action(‘wp_footer’, ‘wp_print_scripts’, 5);
    add_action(‘wp_footer’, ‘wp_enqueue_scripts’, 5);
    add_action(‘wp_footer’, ‘wp_print_head_scripts’, 5);
    }
    add_action( ‘wp_enqueue_scripts’, ‘remove_head_scripts’ );
    
    // END Custom Scripting to Move JavaScript

    Sau khi bạn thêm vào file functions thì hãy nhấn lưu lại. Sau đó ra ngoài bạn nhấn Ctrl + U để view source lên xem nhé. Lúc ban đầu mình chưa thêm đoạn mã trên thì sẽ như thế này.

    Sau khi chèn đoạn mã trên thì các javascript ở header đã chuyển xuống ở footer.

     

    Thông thường nếu bạn để các đoạn script ở trên header thì hệ thống sẽ load từ trên xuống nên nó sẽ nhận script trước, việc này làm trì hoãn rất nhiều đến trải nghiệm của người dùng. Nên cách tốt ưu tốt nhất là di chuyển chúng xuống dưới footer, bạn hãy tận hưởng sau khi hoàn thành giống như mình nhé.

    Di chuyển các tệp JavaScript xuống cuối trang sẽ không chỉ mang lại cho khách truy cập của bạn trải nghiệm người dùng tốt hơn mà còn khuyến khích họ quay lại xem nhiều hơn, miễn là nội dung của bạn mang lại cho họ giá trị và giải pháp mà họ mong muốn.

    Trải nghiệm này sẽ cải thiện tỷ lệ điểm tốc độ của bạn với công cụ tìm kiếm Google, giờ đây các công cụ tìm kiếm đang chú ý nghiêm ngặt đến tốc độ trang của bạn và biết rằng nó sẽ mang lại trải nghiệm người dùng tốt.

    Các bạn muốn điểm google speed thì link này nhé .

    Tổng kết

    Chỉ cần vài đoạn code chúng ta đoạn đã di chuyển các tệp javasctrip một cách nhanh chóng phải không nào. Hãy làm theo và nhớ kiểm tra lại điểm google speed nhé, điểm sẽ lên đấy :)).

    Hãy tham gia group của mình để cùng xây dựng cộng đồng mạnh mẽ và follow các bài viết mới nhất về wordpress của mình nhé. Tvcdev WordPress Community 

    Thân ái và chào quyết thắng. See you !

    0 0 đánh giá
    Article Rating
    Theo dõi
    Thông báo của
    guest
    0 Comments
    Phản hồi nội tuyến
    Xem tất cả bình luận

    Bài viết liên quan

    Mẹo - thủ thuật 10/05/2022

    Chuyển hướng người dùng đến URL trước đó sau khi login thành công

    Đoạn code sau đây sinh ra để giải quyết vấn đề sau khi login thành công thì sẽ điều hướng ng(...)

    Mẹo - thủ thuật 25/07/2021

    Hướng dẫn cách import/export dữ liệu giữ nội dung và hình ảnh

    Có nhiều cách để export/import dữ liệu chuyển từ website này sang website khác. Nếu các bạn dùng (...)

    Mẹo - thủ thuật 20/07/2021

    Hướng dẫn tạo chức năng search autocomplete trong wordpress

    Hôm nay mình sẽ hướng dẫn đến các bạn một bài viết liên quan về ajax củng như mẹo và thủ (...)

    Mẹo - thủ thuật 03/06/2021

    Chuyển hướng trang lỗi 404 về trang chủ

    Hôm nay mình giới thiệu đến các bạn về thủ thuật điều hướng trang 404 về trang chủ hay 1 tra(...)

    0
    Rất thích suy nghĩ của bạn, hãy bình luận.x