NỘI DUNG

Hosting tốc độ cao Vietnix - tốc độ tải trang trung bình dưới 1 giây
VPS siêu tốc Vietnix - trải nghiệm mượt mà, ổn định
03/03/2023
Lượt xem

Hướng dẫn thêm JavaScript vào WordPress cho page và post bất kỳ

03/03/2023
6 phút đọc
Lượt xem

Đánh giá

5/5 - (63 bình chọn)

Hiện nay, WordPress là một nền tảng được nhiều người lựa chọn sử dụng. Tuy nhiên WordPress mặc định không cho phép người dùng thêm code trực tiếp vào các bài đăng. Đôi khi bạn sẽ cần thêm JavaScript trong các trang bài đăng WordPress hoặc thêm code JavaScript vào toàn bộ các trang hay tại một trang cụ thể. Trong bài viết dưới đây, Vietnix sẽ hướng dẫn bạn đọc cách thêm JavaScript vào WordPress cho page và post bất kỳ.

Cách thêm JavaScript vào một trang hoặc bài viết thủ công

Đối với phương pháp này, người dùng cần thêm code vào các file WordPress. Cụ thể, bạn tiến hành thêm đoạn code vào file functions.php của theme hoặc plugin dành riêng cho trang với nội dung như sau:

1    function wpb_hook_javascript() {
2      ?>
3           <script>
4            // your javscript code goes
5           </script>
6      <?php
7    }
8     add_action('wp_head', 'wpb_hook_javascript');

Như vậy là bạn đã hoàn tất việc thêm JavaScript vào WordPress bằng cách thủ công hoàn toàn đơn giản.

Các plugin hỗ trợ thêm JavaScript vào WordPress

Bên cạnh phương pháp thủ công, bạn có thể thêm JavaScript vào WordPress bằng cách sử dụng các plugin hỗ trợ.

1. Sử dụng Plugin Insert Headers and Footers

Để thêm các công cụ từ bên thứ ba đôi khi người dùng được yêu cầu phải sao chép và dán đoạn code JavaScript vào trang web. Code sẽ được tải lên trên mỗi lượt xem trang bằng cách dán các tập scripts ở phần đầu hoặc dưới cùng trước </body> tag của trang web.

Ví dụ:  Để theo dõi khách hàng truy cập vào website của bạn thì code cài đặt Google Analytics cần phải được hiển thị trên mọi trang của website.

Để thực hiện bạn có thể thêm các đoạn code vào các file header.php hay footer.php vào theme WordPress. Tuy nhiên, bạn nên sử dụng plugin để tải JavaScript trên trang web để tránh những thay đổi sẽ bị ghi đè khi bạn cập nhật hay thay đổi theme.

Các bước thực hiện đơn giản như sau:

  • Bước 1: Cài đặt và kích hoạt plugin Insert Headers and Footers.
  • Bước 2: Sau khi kích hoạt plugin, bạn truy cập trang Settings > Chọn Insert Headers and Footers > Hai hộp trống cho Header và cho Footer sẽ được hiển thị.
Chọn Insert Headers and Footers
Chọn Insert Headers and Footers
  • Bước 3: Dán code JavaScripts mà bạn đã sao chép vào một trong các hộp trống > Nhấn nút Save. Sau đó Plugin Insert Headers and Footers sẽ tự động tải coder đã được thêm lên mỗi trang của website.

2. Plugin Code Embed

Plugin Code Embed này sẽ cho phép người dùng thêm code ở bất cứ nơi nào mà bạn muốn trong các post và page WordPress của bạn. Thậm chí là chọn vị trí trong nội dung bạn cần nhúng mã code JavaScript.

Bạn có thể xem qua hướng dẫn cụ thể dưới đây:

Kích hoạt plugin Code Embed
Kích hoạt plugin Code Embed
  • Bước 2: Tiến hành chỉnh sửa bài đăng hoặc trang nơi mà bạn cần thêm JavaScript. Tại trang chỉnh sửa bài đăng, nhấp vào nút Screen Options > Nhấn vào tùy chọn Custom Fields.
Chọn Custom Fields
Chọn Custom Fields
  • Bước 3: Cuộn xuống và bạn sẽ thấy metabox Custom Fields ở bên dưới trình chỉnh sửa bài đăng > Nhấn vào liên kết Enter New. Tại đây các trường và tên trường tùy chỉnh sẽ được hiển thị.
Chọn Enter new
Chọn Enter new
  • Bước 4: Cung cấp tên cho trường tùy chỉnh với tiền tố CODE (ví dụ: CODEfruit) và dán code JavaScript vào các trường giá trị > Nhấn nút Add Custom Field để lưu lại các trường tùy chỉnh của bạn.
Add Custom Field
Chọn Add Custom Field

Như vậy, bạn đã có thể sử dụng trường tùy chỉnh này để nhúng code JavaScript tại bất kỳ đâu trong bài đăng hoặc trang web bằng cách thêm code nhúng {{CODEfruit}} này ở nơi nào đó trong nội dung bài viết.

Hướng dẫn thêm Javascript vào WordPress
Hướng dẫn thêm Javascript vào WordPress

Sau khi hoàn tất, bạn có thể lưu bài viết và xem lại trang web của mình và có thể sử dụng Inspect tool hoặc xem mã code của trang để xem code JavaScript.

Sử dụng Inspect Tool để xem code JavaScript
Sử dụng Inspect Tool để xem code JavaScript

Bạn có thể tham khảo chi tiết cách thêm JavaScript vào WordPress tại đây:

Lưu ý: Những phương pháp trên hoàn toàn đơn giản và thích hợp cho những người mới bắt đầu hay chủ sở hữu website. Trường hợp bạn đang nghiên cứu, tìm hiểu về theme, phát triển plugin WordPress, bạn cần xác định chính xác enqueue JavaScript and stylesheets cho các dự án đang thực hiện.

Lời kết

Như vậy, bài viết hôm nay Vietnix đã hướng dẫn bạn cách thêm JavaScript vào WordPress cho các trang và bài đăng bất kỳ một cách đơn giản và hiệu quả. Hy vọng rằng bạn đọc sẽ có được những thông tin cần thiết và áp dụng thành công khi thực hiện. Nếu có thắc mắc cũng như khó khăn trong quá trình thao tác, bạn có thể để lại bình luận Vietnix hỗ trợ bạn trong thời gian sớm nhất nhé.

THEO DÕI VÀ CẬP NHẬT CHỦ ĐỀ BẠN QUAN TÂM

Đăng ký ngay để nhận những thông tin mới nhất từ blog của chúng tôi. Đừng bỏ lỡ cơ hội truy cập kiến thức và tin tức hàng ngày

Chọn chủ đề :

Lê Nam

WordPress Expert
tại

Kết nối với mình qua

Kết nối với mình qua

Theo dõi
Thông báo của
guest
0 Comments
Phản hồi nội tuyến
Xem tất cả bình luận

Tăng tốc độ website - Nâng tầm giá trị thương hiệu

Tăng tốc tải trang

95 điểm

Nâng cao trải nghiệm người dùng

Tăng 8% tỷ lệ chuyển đổi

Thúc đẩy SEO, Google Ads hiệu quả

Tăng tốc ngay

SẢN PHẨM NỔI BẬT

7 NGÀY DÙNG THỬ HOSTING

NẮM BẮT CƠ HỘI, THÀNH CÔNG DẪN LỐI

Cùng trải nghiệm dịch vụ hosting tốc độ cao được hơn 100,000 khách hàng sử dụng

ĐĂNG KÝ NHẬN TÀI LIỆU THÀNH CÔNG
Cảm ơn bạn đã đăng ký nhận tài liệu mới nhất từ Vietnix!
ĐÓNG

ĐĂNG KÝ DÙNG THỬ HOSTING

7 NGÀY MIỄN PHÍ

ĐĂNG KÝ DÙNG THỬ HOSTING

7 NGÀY MIỄN PHÍ

XÁC NHẬN ĐĂNG KÝ DÙNG THỬ THÀNH CÔNG
Cảm ơn bạn đã đăng ký thông tin thành công. Đội ngũ CSKH sẽ liên hệ trực tiếp để kích hoạt dịch vụ cho bạn nhanh nhất!
ĐÓNG