Chèn button share vào bất kỳ chỗ nào trong theme năm 2024

Nếu bạn đang muốn chèn code (HTML, CSS hoặc JS) vào một trang bất kỳ trên website WordPress của mình mà không gây ảnh hưởng đến những trang khác thì bài viết này là dành cho bạn. Với sự trợ giúp của một plugin có tên là Header Footer Code Manager, bạn có thể chèn code vào bất cứ bài viết, trang, chuyên mục, thẻ… nào một cách đơn giản. Tất nhiên, các bạn cũng có thể áp dụng code cho tất cả các trang, tương tự như plugin WPCode (tên gọi cũ là Insert Headers and Footers by WPBeginner) mà tôi đã từng giới thiệu trước đó.

Tham khảo thêm:

  • Chèn code vào header và footer của website WordPress
  • Chèn code PHP vào WordPress với plugin Code Snippets
  • Dễ cài đặt và sử dụng. Giao diện trực quan.
  • Phiên bản miễn phí hỗ trợ chèn code HTML, CSS và JS (bao gồm cả dữ liệu schema). Nếu muốn chèn code PHP, các bạn có thể xem xét nâng cấp lên phiên bản trả phí.
  • Cho phép chèn code lên từng post, page, post type, category, tag, archive page, home page, search page… hoặc nhiều trang cùng lúc.
  • Cho phép import/ export các code để sử dụng trên website khác một cách nhanh chóng.

1. Đầu tiên, các bạn cần cài đặt và kích hoạt plugin Header Footer Code Manager (download).

Chèn button share vào bất kỳ chỗ nào trong theme năm 2024

2. Tiếp theo, truy cập HFCM => Add New để tạo snippet mới. Tại đây, các bạn sẽ nhìn thấy giao diện tương tự như sau:

Chèn button share vào bất kỳ chỗ nào trong theme năm 2024

Trong đó:

  • Snippet Name: đặt tên cho code để tiện phân biệt và quản lý.
  • Snippet Type: chọn JS, CSS hoặc HTML tùy theo nhu cầu của bạn.
  • Site Display: chọn trang mà bạn muốn chèn code, lần lượt là: toàn bộ website, từng post cụ thể, từng page cụ thể, từng category cụ thể, từng post type cụ thể, từng tag cụ thể, trang chủ, trang kết quả tìm kiếm, trang lưu trữ, các bài viết mới nhất hoặc tạo shortcode để paste vào vị trí mà bạn cần.
  • Post List/ Page List/ Category List…: chọn những post/ page/ category… mà bạn muốn chèn code.
  • Location: tùy chọn chèn code vào đầu trang, trước phần nội dung, sau phần nội dung hoặc chân trang.
  • Device Display: chọn loại thiết bị mà bạn muốn hiển thị code (máy tính, điện thoại hoặc cả hai).
  • Status: trạng thái của code (kích hoạt luôn hoặc không).

Điền nội dung code vào khung Snippet/ Code và click vào nút Save để lưu lại. Xóa cache website (nếu có) và kiểm tra kết quả.

3. Các bạn có thể quản lý danh sách các code đã chèn bằng cách truy cập HFCM => All Snippets.

Chèn button share vào bất kỳ chỗ nào trong theme năm 2024

4. Nếu muốn import code từ website khác hoặc export code để mang sang website khác sử dụng, hãy truy cập HFCM => Tools.

Chèn button share vào bất kỳ chỗ nào trong theme năm 2024

Thật đơn giản phải không nào? Chúc các bạn thành công!

Bạn đang dùng cách nào để chèn code vào từng trang cụ thể trên website WordPress của mình? Hãy chia sẻ nó với chúng tôi thông qua 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. :)

Chèn button share vào bất kỳ chỗ nào trong theme năm 2024

Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Theo dõi tôi trên Facebook để cập nhật những tin tức mới nhất liên quan đến WordPress nhé.

Để các bạn dễ hình dung, mình đã demo trực tiếp menu button chạy dọc website ngay tại bài viết này để các bạn tham khảo, trải nghiệm.

Chèn button share vào bất kỳ chỗ nào trong theme năm 2024
Tạo menu button chạy dọc website – Flatsome

Và ngay sau đây, sẽ là bài hướng dẫn chi tiết để các bạn ai cũng đều có thể thực hiện được.

Bước 1 - Tạo Đoạn HTML Với Block

Các bạn chọn UX Blocks -> Thêm mới -> Đặt tiêu đề bất kỳ -> Chọn trình soạn thảo văn bản -> dán toàn bộ đoạn html bên dưới vào

[ux_stack direction="col" gap="0.15" class="demo-wrapper" visibility="hide-for-small"] [ux_html]

Chèn button share vào bất kỳ chỗ nào trong theme năm 2024

Hotline

[/ux_html] [ux_html]

Zalo

[/ux_html] [ux_html]
Chèn button share vào bất kỳ chỗ nào trong theme năm 2024

Support

[/ux_html] [/ux_stack]

Chèn button share vào bất kỳ chỗ nào trong theme năm 2024

Bước 2 - Chỉnh sửa lại thông tin button

Các bạn chú ý trong đoạn html trên, mỗi đoạn thẻ (ví dụ dòng 4-5, 9-10, 14-15), bạn sẽ thay đổi tương ứng thành thông tin của bạn, mình lấy ví dụ:

Chèn button share vào bất kỳ chỗ nào trong theme năm 2024

Xong cuôi các bạn refresh lại trang để xem thành quả.

Trong quá trình thực hiện, có thắc mắc nào, các bạn có thể để lại comment cho mình phía dưới bài viết.