Bài Viết

Một số cách đưa toàn bộ JavaScript xuống Footer

Đăng vào Tháng 3 13, 2025 bởi admin

admin

13/03/2025

4 Phút đọc

13 Lượt xem

Đánh giá

Mot so cach dua toan bo JavaScript xuong Footer

Để đưa tất cả mã JavaScript của website WordPress xuống footer (chân trang), bạn cần thực hiện một số điều chỉnh trong mã của theme, giúp giảm thời gian tải trang và cải thiện hiệu suất website. WordPress cho phép bạn dễ dàng di chuyển mã JavaScript xuống footer thông qua hook wp_footer hoặc sửa đổi cách thức nạp các tệp JavaScript trong theme hoặc plugin.

Di Chuyển Mã JavaScript Đến Footer Thông Qua Hook

Để đảm bảo rằng mã JavaScript được nạp ở cuối trang (footer), bạn có thể sử dụng hook wp_footer trong WordPress. Dưới đây là cách bạn có thể làm điều này.

Cách 1: Sử Dụng Hook `wp_footer` Để Thêm JavaScript

Thêm đoạn mã sau vào tệp functions.php của theme bạn đang sử dụng:

// Di chuyển tất cả JavaScript xuống footer
function muathemewpgiare_move_js_to_footer() {
    // Kiểm tra xem có mã JavaScript nào đang được nạp hay không
    if (is_admin()) {
        return; // Không áp dụng với bảng điều khiển admin
    }
    
    // Dùng wp_enqueue_script để đưa các file JS vào footer
    remove_action('wp_head', 'wp_enqueue_scripts', 1);
    add_action('wp_footer', 'wp_enqueue_scripts', 5);
}
add_action('wp', 'muathemewpgiare_move_js_to_footer');

// Di chuyển tất cả JavaScript xuống footer

function muathemewpgiare_move_js_to_footer() {

// Kiểm tra xem có mã JavaScript nào đang được nạp hay không

if (is_admin()) {

return; // Không áp dụng với bảng điều khiển admin

}

// Dùng wp_enqueue_script để đưa các file JS vào footer

remove_action('wp_head', 'wp_enqueue_scripts', 1);

add_action('wp_footer', 'wp_enqueue_scripts', 5);

}

add_action('wp', 'muathemewpgiare_move_js_to_footer');

Cách 2: Di Chuyển JavaScript Của Các Plugin Sang Footer

Nếu bạn đang sử dụng các plugin và muốn đưa tất cả JavaScript của plugin đó xuống footer, bạn có thể sử dụng các filter của WordPress để thực hiện điều này.

Đoạn mã di chuyển JavaScript plugin sang footer:

// Đưa JavaScript của các plugin xuống footer
function muathemewpgiare_move_plugin_js_to_footer($tag, $handle) {
    // Kiểm tra các plugin đang sử dụng, nếu cần thiết bạn có thể chỉ định các plugin cụ thể ở đây
    if (in_array($handle, array('plugin-handle-name'))) {
        return str_replace(' src', ' defer="defer" src', $tag); // Thêm thuộc tính "defer" vào script
    }
    
    return $tag;
}
add_filter('script_loader_tag', 'muathemewpgiare_move_plugin_js_to_footer', 10, 2);

// Đưa JavaScript của các plugin xuống footer

function muathemewpgiare_move_plugin_js_to_footer($tag, $handle) {

// Kiểm tra các plugin đang sử dụng, nếu cần thiết bạn có thể chỉ định các plugin cụ thể ở đây

if (in_array($handle, array('plugin-handle-name'))) {

return str_replace(' src', ' defer="defer" src', $tag); // Thêm thuộc tính "defer" vào script

}

return $tag;

}

add_filter('script_loader_tag', 'muathemewpgiare_move_plugin_js_to_footer', 10, 2);

2. Di Chuyển Script Cụ Thể Xuống Footer

Ngoài cách sử dụng các hook và filter toàn cục, bạn có thể di chuyển các script cụ thể của theme hoặc plugin xuống footer. Ví dụ:

// Đưa các script cụ thể xuống footer
function muathemewpgiare_enqueue_footer_js() {
    // Nếu là trang không phải Admin
    if (!is_admin()) {
        // Đưa các script JavaScript vào footer
        wp_enqueue_script('your-script-handle', get_template_directory_uri() . '/js/your-script.js', array(), false, true);
    }
}
add_action('wp_enqueue_scripts', 'muathemewpgiare_enqueue_footer_js');

// Đưa các script cụ thể xuống footer

function muathemewpgiare_enqueue_footer_js() {

// Nếu là trang không phải Admin

if (!is_admin()) {

// Đưa các script JavaScript vào footer

wp_enqueue_script('your-script-handle', get_template_directory_uri() . '/js/your-script.js', array(), false, true);

}

add_action('wp_enqueue_scripts', 'muathemewpgiare_enqueue_footer_js');

3. Tối Ưu Hóa Mã JavaScript

Khi di chuyển các script JavaScript xuống footer, bạn cũng có thể muốn tối ưu hóa và giảm kích thước của các tệp JavaScript để tăng tốc độ tải trang:

Cách 1: Sử dụng minify (nén) JavaScript

Bạn có thể sử dụng các công cụ nén JavaScript như UglifyJS hoặc Terser để giảm kích thước các tệp JavaScript.

Cách 2: Sử dụng async hoặc defer cho JavaScript

async: Các tệp JavaScript sẽ được tải song song với phần còn lại của trang, nhưng chúng sẽ không ảnh hưởng đến việc rendering của trang.

defer: Tương tự như async, nhưng đảm bảo rằng mã JavaScript sẽ được thực thi sau khi toàn bộ HTML đã được tải xong.

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Responsive website là gì? Vì sao nó rất quan trọng trong SEO và chạy quảng cáo?

Mục LụcDi Chuyển Mã JavaScript Đến Footer Thông Qua Hook2. Di Chuyển Script Cụ Thể Xuống Footer3. Tối Ưu Hóa Mã JavaScriptResponsive Website là gì?...
Hướng Dẫn Một Số Phương Pháp Bảo Mật Website

Bảo mật website là một trong những vấn đề mà các nhà quản trị và phát triển web không thể bỏ qua trong thời đại...
Hướng dẫn code chức năng di chuột vào ảnh này sẽ ra ảnh khác

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo hiệu ứng di chuột vào ảnh để hiển thị một ảnh khác, một...
Hướng Dẫn Code Chức Năng Điểm Danh Đủ Số Ngày Để Đọc Nội Dung Bài Viết WordPress

Trong bài viết này, chúng ta sẽ hướng dẫn cách tạo một chức năng điểm danh cho bài viết trên WordPress. Mục đích của chức...
Hướng Dẫn Code Tạo Sản Phẩm Thường Mua Cùng Với ACF và WooCommerce

Mục LụcDi Chuyển Mã JavaScript Đến Footer Thông Qua Hook2. Di Chuyển Script Cụ Thể Xuống Footer3. Tối Ưu Hóa Mã JavaScriptMục Tiêu Code Tạo...
Có Nên Viết Bài Trùng Lặp Nội Dung Hoặc Đã Viết Rồi Ở Web Không?

Khi bạn bắt tay vào việc viết bài cho website, chắc hẳn một câu hỏi sẽ luôn xuất hiện trong đầu: “Có nên viết bài...
5 Chiến Lược Độc Đáo Để Không Bao Giờ Bị Trùng Lặp Nội Dung

Khi xây dựng nội dung cho website hay blog, bạn chắc chắn đã từng nghe đến câu hỏi quen thuộc: “Làm sao để tránh việc...
Nên Đăng Bài Viết Lên Website Như Thế Nào? Bao Nhiêu Bài? Khung Giờ Nào?

Để website của bạn có thể đạt thứ hạng cao trên các công cụ tìm kiếm như Google, việc đăng bài viết lên website một...
Hướng Dẫn Chiến Lược SEO Từ Khóa “Theme Bán Hàng WordPress” Lên Top 1 Google

SEO từ khóa “Theme bán hàng WordPress” yêu cầu một chiến lược tổng thể, kiên nhẫn và sự chăm sóc tỉ mỉ. Để đạt được...
Lưu Ý Khi Chọn Lọc Từ Khóa SEO Trong Năm 2025

Chọn lọc từ khóa là một trong những yếu tố quan trọng nhất trong chiến lược SEO. Từ khóa không chỉ giúp người dùng tìm...
Tại Sao Website Cần Phải Responsive Trong Năm 2025?

Trong bối cảnh công nghệ ngày càng phát triển và người dùng ngày càng phụ thuộc vào thiết bị di động, việc thiết kế website...
Tại Sao Bài Viết Của Bạn Không Được Tạo Backlinks

Backlinks là một trong những yếu tố quan trọng giúp cải thiện thứ hạng SEO của website. Tuy nhiên, có rất nhiều bài viết chất...
Hướng Dẫn Tìm Và Sửa Chữa Links Hỏng Trong WordPress Để Cải Thiện SEO

Tìm và sửa chữa các link hỏng trong WordPress là một trong những công việc quan trọng giúp cải thiện SEO và trải nghiệm người...
Cách seo lên top 1 google 2025 mà không phải ai cũng biết

Để đạt được thứ hạng cao trên Google trong năm 2025, bạn cần kết hợp các chiến lược SEO hiện đại với những yếu tố...
Hướng Dẫn Chặn Click Chuột Phải và Sao Chép Nội Dung Trong WordPress

Chặn Click Chuột Phải và Ngăn Sao Chép Nội Dung Trong WordPress là một biện pháp bảo vệ nội dung website rất hữu ích. Điều...
Làm Thế Nào Để Biết Website Mình Đang Ở Vị Trí Thế Nào Trên Công Cụ Tìm Kiếm?

Để thành công trong SEO, việc theo dõi vị trí của website trên các công cụ tìm kiếm là rất quan trọng. Nó giúp bạn...