Thêm thư viện JS vào WordPress

JavaScript là ngôn ngữ lập trình có thể thêm các tính năng tương tác vào trang web của bạn. Học cách sử dụng nó trên trang web WordPress của bạn, bao gồm các phần cụ thể, có thể giúp bạn tận dụng mã hiệu quả hơn.  

Có nhiều cách để thêm JavaScript vào các trang và bài đăng WordPress của bạn. Cho dù bạn sử dụng plugin, sử dụng chức năng và hook hay chỉnh sửa tệp của chủ đề, bạn đều có thể nhận được tùy chỉnh mình muốn

Trong bài đăng này, chúng tôi sẽ xem xét JavaScript là gì và cách bạn có thể thêm mã tùy chỉnh vào WordPress. Chúng tôi sẽ hướng dẫn bạn quy trình của từng phương pháp và trả lời một số câu hỏi thường gặp.  

Bạn có thể sử dụng JavaScript trong WordPress không?

JavaScript là ngôn ngữ lập trình mà bạn có thể sử dụng để cải thiện trải nghiệm người dùng [UX] của trang web bằng cách làm cho trang web tương tác và phản hồi nhanh hơn.  

Ví dụ: bạn có thể sử dụng JavaScript để tạo cửa sổ bật lên khi khách truy cập nhấp vào nút. Bạn cũng có thể hiển thị thông báo khi ai đó di chuột qua một thành phần trên trang của bạn

JavaScript có thể thêm máy tính, trình phát video và các công cụ khác vào các trang và bài đăng của WordPress. Mặc dù bạn sẽ cần một số kiến ​​thức cơ bản về HTML và CSS để thêm JavaScript vào WordPress, nhưng đây là một quy trình khá đơn giản

Phải làm gì trước khi thêm mã JavaScript vào WordPress

Khi thêm mã JavaScript vào trang web WordPress của bạn, điều quan trọng cần nhớ là các lỗi trong mã có thể phá vỡ toàn bộ trang web của bạn. Nếu bạn không thoải mái khi làm việc với mã, bạn có thể muốn thuê một nhà phát triển để giúp bạn

Nếu không, hãy đảm bảo bạn có bản sao lưu trang web trước khi thực hiện bất kỳ thay đổi nào. Bằng cách đó, nếu xảy ra sự cố, bạn luôn có thể hoàn nguyên về phiên bản hoạt động của trang web của mình

Có hai phần của trang web WordPress của bạn, bạn cần sao lưu trước khi thêm bất kỳ tùy chỉnh nào

1. cơ sở dữ liệu. Nơi lưu trữ tất cả các bài đăng, trang, cài đặt và cấu hình của bạn
2. Các tập tin. Hình ảnh, video, chủ đề và plugin của bạn

Bạn có thể sử dụng một plugin như Jetpack để sao lưu trang web WordPress của mình một cách nhanh chóng và dễ dàng. Một tùy chọn khác là sao lưu các tệp của bạn theo cách thủ công. Bạn cũng nên xem xét việc tạo một chủ đề con để thêm mã tùy chỉnh

Chủ đề con là bản sao của chủ đề hiện tại mà bạn có thể tùy chỉnh mà không ảnh hưởng đến mã gốc. Bạn có thể chỉ cần kích hoạt chủ đề ban đầu để hoàn nguyên mọi thay đổi nếu bạn mắc lỗi. Điều này cũng cho phép bạn cập nhật chủ đề gốc mà không làm mất các thay đổi mã bạn đã thực hiện

Ngoài ra, bạn có thể xem xét thử nghiệm JavaScript tùy chỉnh của mình trên trang web dàn dựng trước khi thêm nó vào trang web trực tiếp của mình. Trang web dàn dựng là bản sao của trang web trực tiếp mà bạn có thể sử dụng cho mục đích thử nghiệm. Bạn nên thiết lập một tài khoản phòng trường hợp có sự cố xảy ra với các thay đổi JavaScript của bạn

Cách thêm JavaScript vào toàn bộ trang web WordPress của bạn

Nếu bạn muốn thêm JavaScript vào toàn bộ trang web WordPress của mình, có một vài cách tiếp cận khác nhau. Một phương pháp là thêm tệp HTML tùy chỉnh vào chủ đề của bạn rồi chèn mã JavaScript vào tệp đó

Một cách khác là tạo một plugin WordPress chứa mã JavaScript của bạn. Bạn cũng có thể chỉ cần chỉnh sửa các chức năng của mình. php và chèn mã vào đó

Ngoài ra, để thực hiện các thay đổi trên toàn bộ trang web WordPress của bạn, bạn có thể thêm JavaScript vào đầu trang hoặc chân trang. Cách đơn giản nhất là cài đặt và kích hoạt plugin Insert Headers and Footers. Hãy khám phá sâu cả bốn phương pháp.  

Bốn cách để thêm JavaScript tùy chỉnh vào WordPress

Có nhiều cách khác nhau để bạn có thể thêm WordPress JavaScript tùy chỉnh vào trang web của mình. Dưới đây là hướng dẫn từng bước cho từng

Phương pháp 1. Sử dụng một plugin

Cách dễ nhất để thêm JavaScript vào WordPress là sử dụng plugin. Phương pháp này linh hoạt và dễ quản lý hơn so với việc thêm mã trực tiếp vào chủ đề của bạn.  

Nếu bạn không thoải mái với mã hóa hoặc muốn một giải pháp thân thiện với người dùng hơn, chúng tôi khuyên bạn nên sử dụng một trong nhiều plugin có sẵn để thêm JavaScript vào WordPress.  

Đối với hướng dẫn này, chúng tôi sẽ sử dụng Chèn đầu trang và chân trang

Khi plugin được kích hoạt, hãy điều hướng đến Cài đặt → Chèn Đầu trang và Chân trang vào bảng điều khiển WordPress của bạn

Hãy nhớ thay thế tùy chỉnh. js” bằng tên tệp của bạn. Khi bạn đã thêm dòng mã đó, hãy lưu tiêu đề của bạn. php và tải nó lên máy chủ của bạn. Mã JavaScript của bạn bây giờ sẽ chạy trên toàn bộ trang web WordPress của bạn

Phương pháp 3. Sử dụng các chức năng và hook của WordPress

Bạn cũng có thể thêm mã tùy chỉnh với các chức năng và hook của WordPress. Hàm là một đoạn mã thực hiện một hành động cụ thể. Chẳng hạn, hàm wp_enqueue_script[] được sử dụng để tải tệp JavaScript

Móc là một tính năng của WordPress có thể thêm mã mà không cần chỉnh sửa bất kỳ tệp cốt lõi nào. Có hai loại móc. hành động và bộ lọc

Một hành động là một chức năng PHP được kích hoạt tại các điểm cụ thể trong quá trình tải trang. Ví dụ: móc hành động wp_head được kích hoạt trước thẻ trong tiêu đề chủ đề của bạn. tập tin php. Bạn có thể sử dụng hook này để thêm mã hoặc tập lệnh tùy chỉnh vào tiêu đề của mình

Bộ lọc sửa đổi mã hoặc dữ liệu hiện có. Ví dụ: bộ lọc the_content có thể thay đổi nội dung của bài đăng trước khi nó được hiển thị

Để thêm JavaScript tùy chỉnh vào trang web WordPress của bạn bằng các hàm và hook, bạn sẽ cần chèn mã của mình vào các hàm của chủ đề con của bạn. tập tin php

Thêm một thư mục mới trong thư mục WordPress của bạn để tạo một chủ đề con. Sau đó tạo kiểu. tệp css sẽ chứa các kiểu của chủ đề con bạn. Tiếp theo, bạn sẽ cần thêm đoạn mã sau vào kiểu của mình. tập tin css

/*
Theme Name: Twenty Twenty-Two Child
Template: twentytwentytwo
*/

Bây giờ bạn đã tạo chủ đề con của mình, bạn có thể kích hoạt nó bằng cách đi tới Giao diện → Trình chỉnh sửa tệp chủ đề từ bảng điều khiển WordPress của bạn. Điều hướng đến các chức năng. php, sau đó thêm đoạn mã sau

function ti_custom_javascript[] {
    ?>
        
          // your javascript code goes here
        
    

Thay thế các trường Tên plugin, URI plugin, Mô tả, Tác giả và URI tác giả bằng các giá trị của bạn. Đây chỉ là những trường thông tin chung mô tả plugin của bạn

Tiếp theo, bạn cần thêm mã JavaScript của mình vào tệp. Mã phải nằm bên dưới thông tin plugin ban đầu nhưng trước thẻ đóng PHP [?>]. Khi bạn đã thêm mã của mình, hãy lưu tệp và tải nó lên máy chủ của bạn

Plugin của bạn bây giờ sẽ được cài đặt và kích hoạt. Bạn có thể xác minh nó đang hoạt động bằng cách truy cập trang Plugin trong bảng quản trị WordPress của bạn. Bạn sẽ thấy plugin của mình được liệt kê ở đó

Cách thêm JavaScript vào một trang hoặc bài đăng WordPress cụ thể

Nếu bạn muốn thêm JavaScript vào một trang hoặc bài đăng WordPress cụ thể, bạn có thể chèn mã trực tiếp vào trình chỉnh sửa chủ đề. Điều hướng đến các chức năng. php, sau đó thêm đoạn mã sau

function ti_custom_javascript[] {
  if [is_single ['1']] { 
    ?>
        
          // your javascript code goes here
        
    
        
          // your javascript code goes here
        
      // Add your javascript here