Hướng dẫn chèn code html vào wordpress

WordPress là một nền tảng phổ biến để xây dựng trang web do tính linh hoạt và dễ sử dụng của nó. Nếu những người xây dựng web như bạn và mình thì sẽ có những lúc mình cần chèn các code như: HTML, CSS, Javascript hoặc thậm chí là PHP vào WordPress để tích hợp thêm các tính năng.

Một website WordPress thông thường ít nhất sẽ cần cài thêm Google Tag Manager, Google Analytics, Facebook Pixel, … Khi đó bạn cần phải biết cách chèn đoạn code vào đầu trang (header), chân trang (footer) hoặc các trang cụ thể của trang web, bài đăng (posts). Và bài viết dưới đây sẽ hướng dẫn bạn 2 cách chèn code vào WordPress phổ biến nhất dù cho bạn là người mới bắt đầu tìm hiểu về WordPress.

OK!, Hãy cùng mình bắt đầu nhe.

Cách 1: Dùng plugin WPCode – Insert Headers and Footers

Vì sao cách đầu tiên mình muốn giới thiệu đến với các bạn là sử dụng plugin? Vì việc sử dụng plugin để chèn code vào Wordpres sẽ có 1 số ưu điểm sau:

• Dễ quản lý và chỉnh sửa các code để chèn
• Không lo bị mất code đã chèn khi update theme hoặc child theme
• Kiểm soát được việc thực thi các đoạn code (ẩn/hiện trên trang (page), bài viết (posts), …).
• Hỗ trợ import/export để tái sử dụng

Và sau đây là các bước sử dụng plugin để chèn code vào trang WordPress:

Bước 1:

– Tải bộ plugin WPCode – Insert Headers and Footers

– Bên trái là thông tin plugin như:

• Phiên bản: 2.0.10
• Lần cập nhật gần nhất:
• Hỗ trợ cho WordPress phiên bản nào
• Lượt kích hoạt: trên 1 triệu
• v.v.. Bước 2:

– Sau khi tải và kích hoạt (active) plugin, bạn sẽ thấy Code Snippets ở menu bên trái trong Dashboard của WordPress.

Bước 3:

Xác định nhu cầu cũng như vị trí chèn code vào web WordPress là gi? Chèn code vào header, footer hay body? Hay chèn code để thực thi một chức năng nào đó.

Hoặc bạn chỉ muốn chèn code để theo dõi, thống kê, và quản lý các thẻ (tags) trong trang web. Bạn có thể cài đặt Google Tag Manager thì bạn chỉ cần quan tâm và truy cập vào mục Header & Footer thôi.

Xem thêm cách cài chi tiết Google Tag Manager tại đây

Sau đó, các bạn dán các code cần thiết vào các mục Header, Body, Footer tương ứng và lưu lại.

Còn nếu các bạn muốn chèn các đoạn code để thực thi các chức năng nâng cao hơn cho web thì truy cập vào mục +Add Snippet

Tại giao diện cửa sổ chính của +Add Snippet có những mẫu code được tích hợp sẵn trong plugin WPCode bạn có thể sử dụng hoặc bạn muốn thêm đoạn code của riêng mình thì bạn chọn Add Your Custom Code (New Snippet) > Use Snippet

Sau khi chọn Use Snippet trong mục Add Your Custom Code (New Snippet). Bạn sẽ thấy các mục thông tin như hình bên dưới. Mình se giải thích rõ các mục để bạn hiểu rõ chức năng của từng vùng từng mục trong mỗi vùng.

Vùng 1:

Thông tin cũng như cách đoạn code được chèn

1. Add title for snippet: Tên đoạn code bạn cần chèn vào. Nên đặt nên dễ gợi nhớ đoạn code này thực thi chức năng gì nha.
2. Code Type: Chọn loại code chèn vào web (HTML, CSS, Javascript, PHP hoặc text).
3. Code Preview: Đây là khu vực chính. Bạn nhập nội dung đoạn code cần chèn vào web.
4. Insert Method: phương thức chèn, chèn tự động (Auto Insert) hoặc chèn thủ công (Shortcode). Nếu chèn tự động thì bạn chọn ở mục Location các vị trí muốn chèn (header, footer, trước hoặc sau 1 đoạn văn bản,…)
5. Inactive hoặc Active: Không thực thi hoặc thực thi đoạn code. Vùng 2:

Thiết bị đoạn code được thực thi

• Device Type: Có 2 loại thiết bị đoạn code thực thi – Desktop only: trên máy tính, laptop – Mobile only: trên thiết bị di động – Any device type: trên tất cả thiết bị (mặc định sẽ được chọn) Vùng 3:

Điều kiện để thực thi code

• Enable Logic: Bật lên nếu muốn bật điều kiện tắt/bật thực thi đoạn code.
• Conditions: Chọn Show hoặc Hide để thiết lập Bật hoặc Tắt.
• Add new group: Ấn vào để thêm điều kiện, sau đó bạn thiết lập điều kiện bật/tắt tùy ý.

Các vùng còn lại, bạn có thể tìm hiểu thêm nhe.

Sau khi thiết lập xong, nhấn Save Snippet để lưu lại

Quay trở lại menu Code Snippets, bạn sẽ thấy danh sách các code đã chèn và các thông tin như:

• Location: vị trí chèn code.
• Created: ngày chèn đoạn code.
• Status: trạng thái đoạn code (đang bật/tắt thực thi đoạn code). Kết luận:

Như vậy, qua bài hướng dẫn trên các bạn thấy việc chèn mã code bằng plugin WPCode – Insert Headers and Footers là một phương pháp dễ dàng, nhanh chóng và có tổ chức để thêm mã code vào phần tiêu đề (header) và cuối trang (footer) của trang web WordPress. Plugin này cho phép người dùng cài đặt và kích hoạt một cách đơn giản. Sau đó có thể chèn mã code tùy chỉnh vào trang web một cách dễ dàng và nhanh chóng.

Ngoài ra, việc sử dụng plugin WPCode còn giúp quản lý và chỉnh sửa mã code đã chèn một cách thuận tiện, đồng thời tránh rủi ro mất mã code khi cập nhật giao diện hoặc chủ đề của trang web. Đây là một giải pháp hiệu quả cho những người dùng WordPress muốn tùy chỉnh trang web của mình với mã code tùy chỉnh mà không cần phải sửa đổi mã nguồn gốc của chủ đề hay giao diện WordPress.

Tiếp theo, mình sẽ hướng dẫn thêm cách chèn code vào web Wordprees thủ công để cho ai cần có thể tham khảo.

Cách 2: Chèn code vào WordPress theo cách thủ công

Trước khi đến với cách chèn code bằng thủ công này, mình cần lưu ý với các bạn 1 vài điểm như: bạn chỉ cần chèn 1 vài code vì với cách chèn này, bạn phải chèn trực tiếp vào tệp php của WordPress nên sẽ rất khó quản lý các code được chèn vào và dễ gây ra lỗi tệp hệ thống. Ngoài ra, nếu bạn update hay thay đổi giao diện (theme) thì các file này cũng sẽ bị ghi đè nên các đoạn code bạn chèn vào cũng sẽ bị mất.

Để thực hiện, bạn vào trình quản lý tệp (File Manager) của hosting hoặc Control Panel (Cpanel, DirectAdmin, …) và tìm đến tệp functions.php của thư mục theme đang sử dụng. Mở tệp này lên bằng trình chỉnh sửa văn bản nào bạn ưa thích (notepad, notepad++, …) và chèn code vào vị trí bạn mong muốn.

Chèn code vào đầu trang (head) của WordPress

Để chèn code vào đầu trang (head) bạn thêm vào file functions.php đoạn mã với cú pháp như sau:

function dat_ten_ham() {
    ?>
        // Chèn đoạn code vào vị trí này
    

Ví dụ, mình cần chèn mã Google Tag Manager vào phần đầu trang (head) như sau:

         -!-- Google Tag Manager -->
        
        
     

Chèn code vào body web WordPress

Để chèn code vào phần body web bạn cũng thêm đoạn code vào file functions.php với cấu trúc tương tự như chèn vào head. Chỉ khác mỗi cách sử dụng hook.

function dat_ten_ham() {
    ?>
        // Chèn đoạn code vào vị trí này
    

Chèn code vào footer web WordPress

Cuối cùng, để chèn code vào phần chân trang (footer) bạn sử dụng cú pháp như sau:

function dat_ten_ham() {
    ?>
        // Chèn đoạn code vào vị trí này
    

Qua bài hướng dẫn trên, các bạn cũng thấy việc chèn code vào WordPress cũng không phải là khó, hay phức tạp đúng không. Và tùy vào mục đích và đoạn code bạn có thể lựa chọn việc chèn code vào WordPress bằng cách nào. Cám ơn các bạn đã theo dõi hết bài hướng dẫn trên. Vui lòng để lại comment bên dưới nếu bạn cần hỗ trợ thêm nha.