Thêm js vào quản trị wordpress

Bạn có thể thêm javascript vào quản trị viên WordPress mà không cần chạm vào lõi WordPress. Nói cách khác, không chạm vào bất cứ thứ gì bên trong thư mục wp-admin. Nếu không, tùy chỉnh của bạn sẽ bị ghi đè trong bản cập nhật lõi WordPress tiếp theo

Bạn muốn thêm móc hành động “admin_init” vào các chức năng của chủ đề. php

Thêm đoạn mã sau vào dưới cùng của chức năng. tập tin php…

móc admin_init

Codex WordPress cho trạng thái hook này

“admin_init được kích hoạt trước bất kỳ hook nào khác khi người dùng truy cập vào khu vực quản trị. Móc này không cung cấp bất kỳ tham số nào, vì vậy nó chỉ có thể được sử dụng để gọi lại một chức năng đã chỉ định. ”

Khi admin_init được kích hoạt, nó sẽ gọi hàm “enqueue_admin_script”. Đây là một chức năng được đặt tên tùy ý mà bạn chọn. Bởi vì bạn sẽ xây dựng định nghĩa hàm đó trong dòng tiếp theo. Trong định nghĩa hàm của chúng tôi cho enqueue_admin_script, chúng tôi gọi hàm wordpress tích hợp wp_enqueue_script để thêm tập lệnh của chúng tôi vào hệ thống

Tham số đầu tiên của wp_enqueue_script là tên tập lệnh của chúng ta (không có. js). Tham số thứ hai là đường dẫn uri đến tập lệnh đó. Tham số thứ ba là các phụ thuộc mà tập lệnh có thể phụ thuộc vào. Ở đây chúng tôi chỉ định không có mảng trống. Nếu tập lệnh của chúng tôi phụ thuộc vào jQuery, chúng tôi sẽ đặt

array( 'jquery' )

Tham số thứ tư phiên bản của tập lệnh. Tham số thứ năm là đúng nếu chúng ta muốn tập lệnh được đặt ở chân trang

JavaScript có thể giúp bạn thêm tất cả các loại chức năng hữu ích vào trang web WordPress của mình. Tuy nhiên, nếu bạn muốn tận dụng những lợi ích đó, bạn không thể chỉ sao chép và dán JavaScript vào trình chỉnh sửa WordPress

Rất may, vẫn có một số cách dễ dàng để thêm JavaScript vào WordPress, bằng cách sử dụng plugin WordPress miễn phí hoặc đoạn mã DIY của riêng bạn

Trong bài đăng này, bạn sẽ tìm hiểu tất cả về cách JavaScript có thể mang lại lợi ích cho trang web của bạn và cách bạn có thể thêm JavaScript vào WordPress đúng cách.  

Ngoài phương pháp thủ công, bao gồm các hướng dẫn từng bước cho ba plugin JavaScript WordPress phổ biến nhất – tất cả đều miễn phí sử dụng

JavaScript là gì?

JavaScript, đôi khi được viết tắt là JS, là ngôn ngữ lập trình phía máy khách phổ biến mà bạn có thể sử dụng để thêm nhiều chức năng vào trang web WordPress của mình

Hầu hết WordPress được viết bằng PHP, là ngôn ngữ phía máy chủ. Điều này có nghĩa là máy chủ trang web của bạn thực thi mã trước khi cung cấp sản phẩm cuối cùng cho trình duyệt của khách truy cập

Tuy nhiên, JavaScript là ngôn ngữ phía máy khách, có nghĩa là nó chạy trong trình duyệt của người dùng chứ không phải trên máy chủ của bạn. Điều này mở ra rất nhiều cơ hội để thêm chức năng động vào trang web của bạn, ngay cả sau khi trang đã được tải

Ngoài ra, bạn cũng sẽ thường sử dụng JavaScript để tích hợp các dịch vụ của bên thứ ba vào trang web của mình, chẳng hạn như đoạn mã theo dõi như Google Analytics hoặc công cụ trò chuyện trực tiếp

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

Có – bạn hoàn toàn có thể sử dụng JavaScript trong WordPress. Trên thực tế, bạn đã tận hưởng sức mạnh của JavaScript trên trang web của mình

Ví dụ: mặc dù phần mềm cốt lõi của WordPress chủ yếu được viết bằng PHP, nhưng nó vẫn dựa vào JavaScript cho nhiều chức năng quan trọng, chẳng hạn như trình chỉnh sửa nội dung và nhiều khối của nó

Nhiều chủ đề và plugin WordPress cũng sử dụng JavaScript để tăng sức mạnh cho chức năng của chúng, chẳng hạn như menu điều hướng bóng bẩy và hiệu ứng trượt ra

Và tất nhiên, như bạn mong đợi từ thực tế là bài đăng này tồn tại, bạn cũng có thể thêm JavaScript tùy chỉnh của riêng mình vào trang web của mình khi cần

JavaScript có thể làm gì cho các trang web WordPress?

Khả năng thêm JavaScript vào WordPress là vô tận

Đối với hầu hết người dùng, trường hợp sử dụng phổ biến nhất để thêm JavaScript vào WordPress là tích hợp các công cụ và dịch vụ của bên thứ ba vào trang web của bạn

Ví dụ: hầu hết các dịch vụ phân tích/theo dõi đều dựa vào việc thêm đoạn mã JavaScript vào trang web của bạn. Điều này đúng với Google Analytics, Facebook Pixel, thẻ Pinterest, v.v.

Tương tự, rất nhiều dịch vụ của bên thứ ba sử dụng đoạn mã JavaScript để tích hợp với trang web của bạn. Dưới đây là một vài ví dụ, nhưng đây không phải là một danh sách đầy đủ

• Một công cụ trò chuyện trực tiếp có thể cung cấp cho bạn một đoạn mã JavaScript để thêm tiện ích trò chuyện trực tiếp vào trang web của bạn
• Dịch vụ tiếp thị qua email của bạn có thể sử dụng JavaScript để cho phép bạn nhúng các biểu mẫu đăng ký tùy chỉnh hoặc chức năng khác trên trang web của mình
• Công cụ biểu mẫu liên hệ có thể sử dụng JavaScript để giúp bạn nhúng biểu mẫu vào trang web của mình. Ví dụ: Typeform nhúng các biểu mẫu hội thoại của nó bằng JavaScript

Cuối cùng, bạn cũng có thể thêm JavaScript tùy chỉnh của riêng mình vào trang web của mình để thêm tất cả các loại chức năng khác nhau. Tuy nhiên, đối với điều cuối cùng này, bạn sẽ cần một số kiến ​​thức về phát triển nếu bạn muốn tùy chỉnh trang web của mình bằng JavaScript của riêng bạn (hoặc bạn sẽ phải trả tiền cho nhà phát triển để làm điều đó cho bạn)

Ba cách để thêm JavaScript vào WordPress

Khi nói đến việc thêm JavaScript vào WordPress, bạn có nhiều tùy chọn

Đối với hầu hết mọi người, sử dụng plugin JavaScript WordPress cung cấp cách tiếp cận đơn giản nhất, nhưng cũng có các phương pháp thủ công nếu bạn thích cách tiếp cận DIY hơn

1. Sử dụng Plugin JavaScript WordPress (Tốt nhất cho hầu hết mọi người)

Tùy chọn tốt nhất và đơn giản nhất cho hầu hết mọi người là sử dụng plugin JavaScript WordPress mà bạn cũng có thể thấy được gọi là plugin trình quản lý đoạn mã hoặc thứ gì đó tương tự

Mặc dù các tính năng chính xác sẽ phụ thuộc vào plugin, nhưng ý tưởng cơ bản là các plugin này cung cấp cho bạn giao diện dễ sử dụng để thêm và quản lý các đoạn mã JavaScript trực tiếp từ Quản trị viên WP của bạn

Đây là một ví dụ

Cách tiếp cận này có một số ưu điểm

• Quản lý đoạn mã – nếu bạn đang thêm nhiều đoạn mã vào trang web của mình, các plugin này sẽ giúp bạn dễ dàng quản lý từng đoạn mã. Bạn có thể đặt cho mỗi đoạn một tiêu đề và sử dụng các danh mục/thẻ để sắp xếp chúng. Bạn cũng có thể dễ dàng bật và tắt các đoạn riêng lẻ khi cần
• Không phụ thuộc vào chủ đề – bằng cách lưu trữ đoạn mã của bạn trong plugin, chúng sẽ vẫn hoạt động ngay cả khi bạn thay đổi chủ đề. Điều này có thể quan trọng nếu bạn đang thêm chức năng không liên quan đến chủ đề, chẳng hạn như sử dụng JavaScript để thêm Google Analytics vào WordPress
• Quy tắc có điều kiện – nếu bạn không muốn thêm đoạn mã JavaScript của mình trên toàn trang web, bạn có thể dễ dàng thêm quy tắc có điều kiện để chỉ tải JavaScript trên một số nội dung nhất định, cho một số người dùng nhất định, cho người dùng duyệt trên một số thiết bị (điện thoại thông minh so với máy tính để bàn), v.v.

Dưới đây là một số plugin WordPress tốt nhất để quản lý JavaScript

• WPCode – trước đây được gọi là Chèn đầu trang và chân trang
• CSS và JS tùy chỉnh đơn giản
• Quản lý mã Header Footer

Xa hơn một chút trong bài đăng này, bạn sẽ tìm thấy các hướng dẫn từng bước về cách sử dụng ba trong số các plugin phổ biến nhất (tất cả đều miễn phí)

2. Sử dụng WordPress Hooks và các chức năng. php của Child Theme (Phức tạp hơn một chút)

Nếu bạn không muốn cài đặt plugin đoạn mã JavaScript WordPress, bạn cũng có thể thêm JavaScript vào WordPress theo cách thủ công bằng các chức năng của chủ đề WordPress của mình. php và hệ thống hook WordPress

Phương pháp này phức tạp hơn một chút, nhưng nó cho phép bạn đạt được kết quả cuối cùng tương tự như các plugin ở trên

Về cơ bản, hệ thống hook WordPress cho phép bạn đưa bất kỳ nội dung nào vào đầu trang hoặc chân trang của trang web, bao gồm cả JavaScript

Khi kết hợp một số mã PHP cho hook với JavaScript của bạn, bạn có thể tự động đưa mã đó vào trang web của mình. Đây là một ví dụ về mã mà bạn sẽ sử dụng để thêm JavaScript vào tiêu đề trang web của mình

function wpcom_javascript() {
    ?>
    
    

Bạn cũng có thể sử dụng PHP phức tạp hơn để thêm các câu lệnh IF có điều kiện, chẳng hạn như chỉ thêm JavaScript vào một bài đăng hoặc trang nhất định trên trang web của bạn

Dưới đây là ví dụ về việc chỉ thêm JavaScript vào một trang bằng cách nhắm mục tiêu ID của trang

function wpcom_javascript() {
if (is_page ('42')) { 
    ?>
    
    

Nếu bạn sử dụng các chức năng của chủ đề. php, điều quan trọng là sử dụng chủ đề con WordPress để đoạn mã JavaScript của bạn không bị ghi đè khi bạn cập nhật chủ đề của mình

Thay thế cho việc sử dụng các chức năng của chủ đề con bạn. php, bạn cũng có thể tạo plugin tùy chỉnh của riêng mình để chứa các đoạn mã này

Ưu điểm chính của việc sử dụng plugin tùy chỉnh thay vì các chức năng của chủ đề con của bạn. php là nó làm cho đoạn mã của bạn không theo chủ đề. Tức là bạn có thể thay đổi chủ đề và tất cả các đoạn mã JavaScript của bạn sẽ vẫn hoạt động

Bạn vẫn có thể sử dụng các ví dụ mã tương tự ở trên khi tạo plugin WordPress tùy chỉnh

3. Enqueue JavaScript Sử dụng wp_enqueue_script (Chủ yếu chỉ dành cho nhà phát triển)

Phương pháp cuối cùng này phức tạp hơn một chút và sẽ không áp dụng cho hầu hết các trường hợp sử dụng khi bạn thêm JavaScript vào trang web của mình

Tuy nhiên, bạn có thể gặp các tình huống phức tạp hơn khi bạn cần tải tệp JavaScript của riêng mình lên trang web của mình và sử dụng tệp đó, thay vì nhúng đoạn mã JavaScript từ dịch vụ của bên thứ ba như Google Analytics hoặc Facebook

Điều này thường chỉ áp dụng cho các nhà phát triển đang làm việc trên các chủ đề hoặc plugin tùy chỉnh, nhưng nó có thể xảy ra trong các tình huống khác

Trong trường hợp này, bạn sẽ muốn sử dụng hàm wp_enqueue_script để đăng ký tệp JavaScript đó với trang web WordPress của mình và cho WordPress biết nơi tải tệp

Cách thêm JavaScript vào WordPress bằng Plugin

Mặc dù tất cả các phương pháp trên đều cung cấp các cách khả thi để thêm JavaScript vào WordPress, nhưng cách tiếp cận plugin là cách tốt nhất vì những lý do đã thảo luận ở trên. Dưới đây là tóm tắt nhanh về những lý do đó

• Chúng giúp quản lý nhiều đoạn trích dễ dàng hơn vì mỗi đoạn mã là một mục riêng biệt và bạn có thể sử dụng tiêu đề, danh mục và thẻ để sắp xếp các đoạn trích
• Bạn có thể lưu trữ đoạn trích bên ngoài chủ đề của mình, điều đó có nghĩa là chúng sẽ vẫn hoạt động trên trang web của bạn ngay cả khi bạn chuyển đổi chủ đề
• Bạn có thể sử dụng các quy tắc có điều kiện để chỉ tải đoạn trích trong một số trường hợp nhất định

Dưới đây, bạn sẽ tìm thấy hướng dẫn cho ba trong số các plugin WordPress JavaScript phổ biến nhất

Nếu bạn đang sử dụng WordPress. com, ít nhất bạn phải sử dụng WordPress. com Kế hoạch kinh doanh để cài đặt các plugin tùy chỉnh của riêng bạn. Nếu bạn chưa nâng cấp, bạn có thể nâng cấp bằng cách làm theo các hướng dẫn sau

Nếu bạn đã sử dụng các gói Kinh doanh hoặc Thương mại điện tử nhưng bạn không chắc chắn cách cài đặt plugin tùy chỉnh, bạn có thể xem hướng dẫn này để cài đặt plugin trên WordPress. com

Cách sử dụng WPCode để thêm JS vào WordPress

Trước đây được gọi là Chèn đầu trang và chân trang, WPCode là một trong những plugin WordPress phổ biến nhất dành cho các đoạn mã JavaScript

Mặc dù plugin giúp dễ dàng đưa các tập lệnh trên toàn trang web vào đầu trang và chân trang của bạn, nhưng một trong những tính năng nổi bật của nó là nó cũng cho phép bạn thêm các quy tắc có điều kiện để kiểm soát thời điểm tải tập lệnh

Ví dụ: bạn chỉ có thể tải JavaScript trên một số nội dung nhất định hoặc cho người dùng đã đăng nhập vào trang web của bạn (hoặc chưa đăng nhập). Hoặc, bạn có thể làm cả hai cùng một lúc. Tức là thêm JavaScript vào một trang cụ thể trên trang web của bạn và chỉ tải tập lệnh đó nếu người dùng đã đăng nhập

Đây là cách để bắt đầu

1. Cài đặt và kích hoạt plugin miễn phí trên trang web của bạn
2. Chuyển đến Đoạn mã → + Thêm đoạn mã trong Quản trị viên WP của bạn
3. Di chuột qua tùy chọn Thêm mã tùy chỉnh của bạn (Đoạn mã mới) và chọn Sử dụng đoạn mã

Bây giờ, bạn sẽ ở trong giao diện trình chỉnh sửa đoạn trích đầy đủ

Ở trên cùng, bạn sẽ muốn làm ba điều

1. Thêm tiêu đề để giúp bạn nhớ tác dụng của đoạn trích. Bạn là người duy nhất sẽ nhìn thấy điều này
2. Đặt Loại mã bằng Đoạn mã JavaScript
3. Add the code for your snippet to the Code Preview. The plugin will automatically add the opening and closing