Hướng dẫn sử dụng Header & Footer – WP Helper Premium

Lê Trung Hải 7 phút đọc

1. Giới thiệu & chức năng chính

Trang Header & Footer Code với ba ô nhập code đã điền

Trang “Header & Footer Code” với ba ô nhập code đã điền ví dụ Google Analytics 4, Google Tag Manager và Meta Pixel.

Mỗi dịch vụ theo dõi hay xác minh website — Google Analytics, Google Tag Manager, Facebook Pixel, Google Search Console… — đều yêu cầu dán một đoạn script vào đúng vị trí trong mã HTML của trang. Cách làm truyền thống là mở file header.php hoặc footer.php của theme để sửa trực tiếp, nhưng cách này tiềm ẩn rủi ro: code có thể bị mất khi cập nhật theme, một lỗi cú pháp nhỏ có thể làm trắng cả trang, và không ai biết ai đã thêm đoạn script nào, từ lúc nào.

Header & Footer giải quyết việc này bằng ba ô nhập code tương ứng đúng ba vị trí chèn phổ biến nhất trong trang, lưu trực tiếp vào cơ sở dữ liệu của WordPress — độc lập hoàn toàn với theme đang dùng:

Header Scripts (chèn trước </head>)

Đoạn mã được chèn ngay trước thẻ đóng <head> của trang. Phù hợp cho Google Analytics 4, Facebook Pixel, meta tag xác minh site (Google Search Console, Bing Webmaster), và CSS inline áp dụng toàn site.

Body Scripts – Top (chèn ngay sau <body>)

Đoạn mã được chèn ngay sau thẻ mở <body>. Dùng cho đoạn <noscript> của Google Tag Manager (bắt buộc theo tài liệu Google phải đặt ngay sau <body>) hoặc các widget cần tải sớm trước nội dung trang.

Footer Scripts (chèn trước </body>)

Đoạn mã được chèn ngay trước thẻ đóng </body>. Phù hợp cho script phân tích, remarketing hoặc live chat cần tải sau cùng để không làm chậm tốc độ hiển thị trang.

Mẹo: Nên ưu tiên đặt các script nặng ở Footer thay vì Header — script tải sau cùng sẽ không chặn việc hiển thị nội dung, giúp trang tải nhanh hơn và cải thiện điểm Core Web Vitals.

2. Hướng dẫn sử dụng

2.1 Truy cập trang Header & Footer

Vào WP Helper Premium → Header & Footer. Đây là một trang đơn, không chia tab — toàn bộ ba ô nhập code (Header Scripts, Body Scripts – Top, Footer Scripts) hiển thị cùng lúc ở cột bên trái, kèm khung “Vị trí chèn code” và “Mẹo sử dụng” tham khảo nhanh ở cột bên phải.

2.2 Chèn code vào Header Scripts

  1. Sao chép đoạn code từ dịch vụ cần tích hợp — ví dụ đoạn script Google Analytics 4 lấy từ Admin → Data Streams, hoặc meta tag xác minh từ Google Search Console.
  2. Dán vào ô Header Scripts — ô đầu tiên trong cột trái, có nhãn <head>. Số dòng tự cập nhật bên trái khi gõ, hỗ trợ phím Tab để thụt lề.

2.3 Chèn code vào Body Scripts – Top

  1. Dùng cho đoạn cần tải ngay sau khi mở trang — phổ biến nhất là đoạn <noscript> của Google Tag Manager.
  2. Dán vào ô Body Scripts – Top — ô thứ hai, có nhãn <body>, nằm ngay dưới ô Header Scripts.

2.4 Chèn code vào Footer Scripts

  1. Dùng cho script tải sau cùng: Facebook Pixel, Hotjar, TikTok Pixel, live chat widget hoặc bất kỳ script phân tích nào không cần chạy ngay khi mở trang.
  2. Dán vào ô Footer Scripts — ô thứ ba, có nhãn </body>, nằm cuối cùng trong cột trái.

2.5 Lưu thay đổi và kiểm tra kết quả

  1. Bấm Lưu thông tin — nút màu xanh ở thanh dưới cùng trang. Thông báo “Cập nhật cài đặt thành công” hiện lên ngay sau khi lưu.
  2. Mở một trang bất kỳ ngoài site, nhấn chuột phải chọn “View Page Source”, rồi tìm một đoạn text đặc trưng trong code vừa dán để chắc chắn nó đã xuất hiện đúng vị trí.

2.6 Một số lưu ý khi dùng chung

  • JavaScript phải nằm trong cặp thẻ <script>, CSS phải nằm trong cặp thẻ <style> — dán thiếu thẻ bao ngoài sẽ không được trình duyệt nhận diện đúng.
  • Đoạn noscript của Google Tag Manager cần đặt ở ô Body Scripts – Top để đúng theo yêu cầu kỹ thuật của Google.
  • Mỗi ô chỉ nên phục vụ một mục đích — không trộn lẫn nhiều loại script khác nhau trong cùng một ô để dễ theo dõi và gỡ lỗi về sau.
  • Nên kiểm tra cú pháp code trước khi lưu; một đoạn JavaScript hoặc HTML sai cú pháp có thể khiến trang hiển thị trắng.
  • Có thể thêm chú thích dạng <!-- tên công cụ --> trước mỗi đoạn code để dễ nhận biết về sau khi cần chỉnh sửa hoặc gỡ bỏ.

3. Hình ảnh minh họa & video

Toàn bộ thao tác trên trang Header & Footer — đăng nhập, xem màn hình sạch, điền code mẫu vào cả ba ô Header Scripts / Body Scripts – Top / Footer Scripts, và lưu thay đổi thành công.

Màn hình đăng nhập quản trị WordPress

Màn hình đăng nhập quản trị WordPress.

Trang Header & Footer ở trạng thái sạch

Trang Header & Footer ở trạng thái sạch, cả ba ô đều trống.

Đã điền code Google Analytics 4 vào Header Scripts

Đã điền code mẫu Google Analytics 4 vào ô Header Scripts.

Đã điền đủ code mẫu vào cả ba ô

Đã điền đủ code mẫu vào cả ba ô: Header Scripts, Body Scripts – Top và Footer Scripts.

Cập nhật cài đặt thành công

Thông báo “Cập nhật cài đặt thành công” sau khi lưu, code vẫn còn nguyên trong cả ba ô.

4. Kết luận

Header & Footer thay thế hoàn toàn thao tác sửa file theme thủ công bằng ba ô nhập code trực quan, lưu an toàn trong cơ sở dữ liệu WordPress. Dù đổi theme, cập nhật giao diện hay chuyển hosting, các đoạn script theo dõi và tích hợp dịch vụ vẫn giữ nguyên, không cần cấu hình lại.

Chúc các bạn thành công!

Thông tin này có hữu ích không?