Hướng dẫn how to include js file in wordpress - cách gộp file js vào wordpress

Một trong những cách tốt nhất để tăng cường chức năng phía trước của trang web của bạn là thêm JavaScript tùy chỉnh WordPress. Tuy nhiên, việc tìm ra cách thực hiện nó có thể khó khăn, đặc biệt là nếu bạn đã từng làm việc với tùy chỉnh để chèn CSS tùy chỉnh.

May mắn thay, bạn có thể sử dụng một vài chiến lược khác nhau tùy thuộc vào cấp độ kinh nghiệm của bạn và những gì bạn đang cố gắng đạt được. Khi bạn tìm hiểu các tùy chọn của bạn là gì, bạn sẽ có thể chọn giải pháp JavaScript tùy chỉnh có ý nghĩa nhất đối với bạn.

Trong bài đăng này, chúng tôi sẽ hướng dẫn bạn qua ba phương pháp bạn có thể sử dụng để thêm JavaScript tùy chỉnh vào trang web WordPress của bạn, cũng như thảo luận về ưu và nhược điểm của từng tùy chọn. Dưới đây là ba phương pháp mà chúng tôi bao gồm - bạn có thể nhấp để nhảy thẳng vào một phương pháp cụ thể:

1. Sử dụng plugin mã đầu & chân trang (tùy chọn đơn giản nhất cho người dùng phi kỹ thuật)
2. Thêm mã vào tệp function.php
3. Thêm mã vào tiêu đề (sử dụng hàm wp_enqueue_script hoặc hook wp_head)

Hãy để nhảy vào!

1. Cài đặt một plugin như mã đầu & chân trang

Sử dụng plugin là một trong những cách dễ nhất để thêm JavaScript tùy chỉnh WordPress vào trang web của bạn. Ví dụ, mã đầu & chân trang là một công cụ tốt:

Plugin miễn phí này cho phép bạn chèn mã theo nhiều cách khác nhau. Bạn có thể sử dụng nó cho Facebook Pixel, Google Analytics, CSS tùy chỉnh và hơn thế nữa.

Để bắt đầu, hãy thêm plugin vào trang web của bạn bằng cách điều hướng đến các plugin → Thêm mới từ bảng điều khiển quản trị viên của bạn, sau đó tìm kiếm mã đầu & chân trang.

Khi bạn nhấp vào cài đặt ngay bây giờ và kích hoạt các nút, bạn có thể xác định vị trí cài đặt plugin bằng cách truy cập Công cụ → Mã đầu & chân trang. Trên màn hình này, có ba hộp cho phần tiêu đề, chân trang và phần thân máy:

Bạn có thể nhập JavaScript tùy chỉnh WordPress của mình vào bất kỳ hộp nào trong số này. Khi bạn hoàn thành, chọn nút Lưu thay đổi ở dưới cùng của màn hình. Mã sau đó sẽ tải đến mỗi trang của trang web của bạn.

Ưu và nhược điểm của việc sử dụng plugin

Ưu điểm chính của việc sử dụng plugin là nó là một tùy chọn thân thiện với người mới bắt đầu. Bạn không cần phải lo lắng về việc chỉnh sửa các tập tin chủ đề của bạn. Plugin đầu & chân trang cũng có thể có ích nếu bạn đang tìm kiếm một cách liền mạch để thêm các loại mã và CS tùy chỉnh khác.

Tuy nhiên, nhược điểm của phương pháp này là nó liên quan đến việc cài đặt một plugin của bên thứ ba, mà một số chủ sở hữu trang web cố gắng tránh. Nếu bạn muốn giữ các phần mở rộng của mình ở mức tối thiểu, bạn có thể tốt hơn khi sử dụng một trong các phương pháp khác. Hơn nữa, plugin được thiết kế cho các thay đổi JavaScript trên toàn trang web thay vì các trang hoặc bài đăng cụ thể.

2. Sử dụng tệp chức năng của bạn.php

Một phương pháp khác để thêm JavaScript tùy chỉnh WordPress vào trang web của bạn là tận dụng các chức năng và móc nối tích hợp để chỉnh sửa tệp function.php. Cách tiếp cận này liên quan đến việc tải lên thủ công các tập lệnh lên máy chủ của bạn.

Trước khi bắt đầu, chúng tôi khuyên bạn nên tạo một chủ đề trẻ em. Bước này giúp đảm bảo bạn vẫn có thể cập nhật chủ đề cha mẹ một cách an toàn. Bạn cũng nên sao lưu trang web của bạn chỉ trong trường hợp có sự cố.

Phương pháp này liên quan đến việc sử dụng hàm IS_PAGE. Bạn có thể thêm logic có điều kiện để áp dụng JavaScript tùy chỉnh của bạn vào một bài hoặc trang.

Để bắt đầu, hãy xác định vị trí và mở tệp chức năng của bạn.php, sau đó sao chép và dán đoạn mã sau:

function ti_custom_javascript() {
    ?>
        
    

Mã này sẽ thêm JavaScript vào tiêu đề của bạn. Để áp dụng nó vào một bài đăng, bạn có thể sử dụng các bài sau:

function ti_custom_javascript() {
  if (is_single ('3')) { 
    ?>
        
    

Lưu ý rằng bạn sẽ cần thay thế 3 trong ví dụ trên bằng số ID bài đăng mà bạn muốn thêm mã. Để xác định vị trí số đó, điều hướng đến bài viết từ bảng điều khiển quản trị viên của bạn, sau đó nhấp vào Chỉnh sửa. Trong URL thanh của trình duyệt, số ID là số bên cạnh Post Post = Tiết:

Lưu tệp của bạn khi bạn thay thế số ID và thêm JavaScript tùy chỉnh của bạn vào khu vực được chỉ định. Bạn cũng có thể lặp lại quy trình tương tự này cho một trang WordPress duy nhất.

Ưu và nhược điểm của việc chỉnh sửa tệp chức năng của bạn.php

Một lợi thế của việc chỉnh sửa tệp chức năng của bạn.php là bạn không cần phải cài đặt một plugin khác. Bạn cũng có thể sử dụng kỹ thuật này để thêm các tính năng và chức năng cho cả chủ đề của bạn và chính WordPress. Ví dụ, phương pháp này có thể chèn JavaScript vào một bài hoặc trang hoặc tất cả các trang.

Nhược điểm duy nhất của phương pháp này là nó liên quan đến việc làm việc với mã và chỉnh sửa các tệp trang web của bạn. Do đó, nó có thể không phải là lựa chọn tốt nhất nếu bạn không có kinh nghiệm trong bộ phận này.

Có một cách để thêm JavaScript WordPress tùy chỉnh bằng cách chèn thẻ