Chèn code vào header và footer của website WordPress một cách đơn giản.
Nếu bạn đang xây dựng website thì chắc hẳn đã từng một lần tìm cách để chèn code (JS hoặc CSS) vào header hoặc footer rồi phải không nào? Code đó có thể là một đoạn mã xác minh chủ sở hữu website của Google Search Console, có thể là mã theo dõi lưu lượng truy cập của Google Analytics hay mã Google AdWords, Facebook Marketing… Sẽ không có gì để nói nếu theme mà bạn đang sử dụng có hỗ trợ chức năng cho phép chèn code vào header và footer. Ngược lại, bạn sẽ cần tìm một giải pháp khác để làm điều đó.
Tham khảo thêm:
Trên thực tế, nhiều người thường tìm cách chèn trực tiếp code vào các tập tin của theme. Tuy nhiên, việc làm này tương đối phức tạp, dễ gây lỗi và không tối ưu vì chúng sẽ bị mất mỗi khi bạn cập nhật theme lên phiên bản mới. Chúng tôi khuyến cáo không nên làm theo phương pháp này. Thay vào đó, hãy sử dụng một plugin chuyên dụng. Đừng lo, vì chúng sẽ không làm chậm website của các bạn đi một chút nào đâu.
Sử dụng tính năng có sẵn của theme
Nhiều theme WordPress đã được tích hợp sẵn tính năng chèn code vào header và footer. Các bạn thường sẽ tìm thấy chúng trong Theme Options hoặc Customizer.
Chẳng hạn như đối với Genesis Framework, mục này sẽ nằm trong Appearance => Customize => Theme Settings => Header/ Footer Scripts.
Riêng đối với theme Paradise của WP Căn bản (từ phiên bản 6.3 trở lên), mục này sẽ nằm ở Giao diện => Tùy biến => Thiết lập giao diện => Script đầu trang / chân trang, tương tự như Genesis Framework nhưng tên các mục đã được chúng tôi Việt hóa.
Đối với theme Flatsome, các bạn sẽ tìm thấy chúng trong Flatsome => Advanced => Global Settings.
Hãy tìm kỹ xem theme của bạn có hỗ trợ sẵn hay không trước khi tính tới phương án cài plugin bổ trợ.
Sử dụng plugin
1. Đầu tiên, các bạn cần cài đặt và kích hoạt plugin WPCode tên gọi cũ là Insert Headers and Footers by WPBeginner (download).
2. Truy cập Code Snippets (đừng nhầm lẫn với plugin Code Snippets nếu bạn có cài cả plugin này) => Settings => kích hoạt mục Header & Footers mode rồi click vào nút Save Changes để lưu lại.
3. Tiếp theo, truy cập vào Settings => Headers & Footers. Tại đây, các bạn sẽ nhìn thấy một giao diện rất đơn giản, chỉ bao gồm 3 phần:
Trong đó:
- Header: hỗ trợ chèn code vào thẻ
<head>trong mã nguồn HTML của WordPress. - Body: hỗ trợ chèn code vào ngay sau thẻ
<body>trong mã nguồn HTML của WordPress. - Footer: hỗ trợ chèn code vào ngay trước thẻ
</body>trong mã nguồn HTML của WordPress.
Hãy chèn code vào vị trí phù hợp với nhu cầu của bạn sau đó click vào nút Save Changes để lưu lại.
Một số plugin khác có chức năng tương tự mà các bạn có thể tham khảo:
- Insert Headers And Footers (xem chi tiết)
- Woody code snippets (xem chi tiết)
- Header Footer Code Manager (xem chi tiết)
- Insert Headers and Footers Code (xem chi tiết)
Để tránh gây ảnh hưởng quá nhiều đến tốc độ load của website, chúng tôi khuyến cáo việc chèn code như sau:
- Code xác minh chủ sở hữu website (với Google Search Console, Bing Webmaster Tools, Yandex Webmaster Tools, Pinterest… và các công cụ tìm kiếm khác) nên được chèn ở header.
- Code theo dõi lưu lượng truy cập website (ví dụ Google Analytics, Google Tags Manager), live chat (Subiz, Tawk.to…), Google AdWords (Google Ads), Facebook SDK (hỗ trợ Facebook Pixel, Facebook Comments, Facebook Page Widget, Facebook Like Box, Facebook Messenger)… nên được chèn ở footer.
- Riêng đối với code hiển thị quảng cáo tự động (Auto Ads) của Google AdSense, các bạn nên cân nhắc chèn ở header để tránh ảnh hưởng đến việc tối ưu vị trí hiển thị quảng cáo.
Riêng đối với Google Analytics và Google Tags Manager, các bạn có thể tham khảo bài viết “Khắc phục lỗi cache của Google Analytics một cách đơn giản” để chèn chúng mà không gây ảnh hưởng tới tốc độ load web.
Nhớ xóa cache website (nếu có) và cache trình duyệt trước khi kiểm tra thành quả nhé. Chúc các bạn thành công!
Bạn biết cách đơn giản và hiệu quả hơn để chèn code vào header và footer của WordPress? Hãy chia sẻ nó với chúng tôi bằng cách sử dụng khung bình luận bên dưới.
Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)
Ngày trước mình chưa dùng thủ thuật này hoặc dùng theme ko có tính năng chèn code ở Footer, Header thì cứ mỗi khi cập nhật theme là phải chèn lại. Nhiều khi quên chèn code theo dõi của Google là viết bài ko thấy index :v
plugin này nếu kết hợp với wp-rocket 3.7 trở lên để chèn schema , thì sẽ bị delay javascript của rocket chặn. anh có cách nào khắc phục ko ạ
Bạn xem cái này đi: https://docs.wp-rocket.me/article/976-exclude-files-from-defer-js
Bài viết rất hữu ích ạ. Cái này vẫn chèn schema vào được phải không ạ?
Có thể sử dụng để chèn Schema bạn nhé.
https://guest.lendohotel.com/vcpt?channel=qr-card&utm_source=short_link/
Mình muốn tạo link trên tương tự như nút chat Zalo được không?
Mình chèn thêm link vào được rồi, nhưng 2 app chat bị chồng lên nhau. Có cách nào tăng khoảng cách chủa nó ko ad?
Anh cho em hỏi em đang làm schema thủ công nhưng dùng plugin để thêm vào header thì tất cả các url khi check bằng https://search.google.com/structured-data đều có đoạn mã này và google vẫn tính lỗi trùng lặp nên em muốn hỏi anh liệu e có thể thêm đoạn mã schema từ trên hosting không ạ?
WordPress có sẵn tính năng chèn script cho từng post/page mà bạn, trong khung soạn thảo có đấy. Nếu bạn không muốn nó xuất hiện tên tất cả các trang thì thử chèn bằng tính năng đó xem.
Mình chèn code bằng tính năng có sẵn của theme Paradise ko được Hiếu ạ, chèn xong, lưu, xóa cache lúc vào lại như cũ, ko có code. Không biết bị sao nhỉ
Bạn chèn code gì và chèn vào vị trí nào trong Customizer?
Mình chèn code google analytics và webmaster ở header, sau có thử chuyển analytics xuống footer mà vẫn ko đc.
Code Google Search Console thì sử dụng Yoast SEO để chèn đi. Còn code Google Analytics thì đã có bài hướng dẫn chèn bằng plugin để không gây ảnh hưởng tới tốc độ load rồi mà, sao bạn còn chèn trực tiếp làm gì? Tham khảo: Khắc phục lỗi cache của Google Analytics một cách đơn giản
Quên mất Yoast SEO, còn Google Analytics thì bài này chưa đọc tới :)). Ok mình cảm ơn nhiều nhé :D
Có cách nào mình chèn banner vào footer dạng banner quảng cáo nằm ngang mà khi kéo thanh croll banner sẽ chạy theo ko Hiếu
Đúng cái mình đang tìm luôn. Bài viết chia sẻ rất hữu ích nhé. cảm ơn WPcanban.
anh có thể hướng dẫn chèn nút like vào web ko ạ
Bạn subscribe blog của mình để nhận thông báo khi có bài viết mới nhé. Hiện tại trên wpcanban.com đã có hướng dẫn chèn Facebook Comments, Facebook Messenger, Facebook Page Widget nhưng chưa có Facebook Like Button. Bên mình sẽ bổ sung trong thời gian sắp tới. :)
Cho mình hỏi, chèn cùng lúc nhiều Code ở Header hay Footer thì cứ chèn nối tiếp nhau hay sao?
Ví dụ như mình:
_Code đầu tiên là Google Analytics.
_Code thứ 2 là tawk.to (live chat) thì cứ chèn luôn xuống phía dưới rồi Save à?
Cảm ơn Trung Hiếu!
Chèn nối tiếp nhau bạn nhé.