Làm cách nào để thêm tệp css vào plugin wordpress?

Biết cách thích hợp để bao gồm các tệp JavaScript và CSS trong các chủ đề và plugin WordPress của bạn là rất quan trọng đối với các nhà thiết kế và nhà phát triển. Nếu không tuân thủ các phương pháp hay nhất, bạn sẽ gặp rủi ro xung đột với các chủ đề và plugin khác, đồng thời có khả năng tạo ra sự cố mà lẽ ra có thể dễ dàng tránh được. Bài viết này nhằm mục đích tham khảo để chơi đẹp với những người khác

Trước khi chúng tôi bắt đầu, bạn có thể duyệt qua các Chủ đề WordPress và Plugin WordPress của chúng tôi, nếu bạn cần bắt đầu dự án tiếp theo của mình một cách chuyên nghiệp.  

Thực tiễn tốt nhất làm cho mọi người hạnh phúc

Nếu bạn đã từng phát triển một chủ đề hoặc plugin cho WordPress hoặc làm việc với một chủ đề hoặc plugin do người khác tạo, thì có lẽ bạn đã bắt gặp một số phương pháp khác nhau để bao gồm JavaScript và CSS. Mặc dù có một số phương pháp có thể hoạt động trong một nhóm trường hợp cụ thể, nhưng có một phương pháp chính được đề xuất trong WordPress Codex. Cách ưu tiên này sẽ đảm bảo chủ đề hoặc plugin của bạn hoạt động trong mọi trường hợp, giả sử những người khác cũng viết mã đúng cách

Cũng có một số hiểu lầm về chính xác những gì Codex nói về điều này, tôi sẽ giúp làm rõ

Có cái gì trong hộp vậy?

Khi bạn tải xuống WordPress, đã bao gồm một số thư viện JavaScript phổ biến mà bạn có thể sử dụng để phát triển JavaScript của mình. Bạn có thể tìm thấy danh sách các thư viện được bao gồm trong bài viết WordPress Codex

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

Tất cả các thư viện đó đều được bao gồm, nhưng theo mặc định, WordPress chỉ tải những thư viện cần và chỉ khi cần chúng trong quản trị viên. Nếu bạn viết JavaScript sử dụng một trong những thư viện này, bạn cần thông báo cho WordPress rằng tập lệnh của bạn cần tải thư viện trước

Nói với WordPress về tập lệnh của bạn và những gì nó cần

Một số điều cần suy nghĩ khi bạn viết mã JavaScript cho WordPress là

• Có một thư viện bao gồm tôi có thể sử dụng?
• Tôi có thể sử dụng phiên bản đi kèm không?
• Tôi có cần tải tập lệnh của mình ở giao diện người dùng và trong quản trị viên không?
• Tôi cần tải tập lệnh của mình trên trang giao diện người dùng và trang quản trị nào?

Trả lời những câu hỏi này giúp bạn biết mình cần làm gì để đăng ký và tải tập lệnh của mình. Điều này được thực hiện bằng cách sử dụng chức năng WordPress có tên là

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

Vậy những biến này là gì và chúng ta có cần chúng mọi lúc không?

• wp_register_script( $handle, $src, $deps, $ver, $in_footer );
  

  90 – những gì bạn sẽ sử dụng để tham chiếu đến tập lệnh cụ thể này ở bất cứ nơi nào bạn có thể cần liệt kê nó và ít nhất bạn phải bao gồm biến này

• wp_register_script( $handle, $src, $deps, $ver, $in_footer );
  

  91 – đường dẫn đến tệp nguồn trong plugin hoặc chủ đề của bạn

• wp_register_script( $handle, $src, $deps, $ver, $in_footer );
  

  92 – một mảng chứa

  wp_register_script( $handle, $src, $deps, $ver, $in_footer );
  

  90 cho bất kỳ tập lệnh nào khác mà tập lệnh của bạn cần chạy (i. e. một sự phụ thuộc)

• wp_register_script( $handle, $src, $deps, $ver, $in_footer );
  

  94 – số phiên bản cho tập lệnh của bạn, có thể được sử dụng để chặn truy xuất bộ đệm. Theo mặc định, WordPress sẽ sử dụng số phiên bản của chính nó làm số phiên bản cho tập lệnh của bạn

• wp_register_script( $handle, $src, $deps, $ver, $in_footer );
  

  95 – bạn có muốn tập lệnh của mình tải ở chân trang không? . Nó là

  wp_register_script( $handle, $src, $deps, $ver, $in_footer );
  

  97 theo mặc định, vì vậy nó sẽ tải trong tiêu đề nơi có

  wp_register_script( $handle, $src, $deps, $ver, $in_footer );
  

  99 và nếu bạn chỉ định

  wp_register_script( $handle, $src, $deps, $ver, $in_footer );
  

  96 thì nó sẽ tải ở nơi mà

  1

  01 xuất hiện trong chủ đề

"Xóa bộ nhớ đệm" là gì?

Trình duyệt ghi nhớ tập lệnh và biểu định kiểu nào họ đã tải xuống cho một trang web cụ thể dựa trên URL của tập lệnh và biểu định kiểu. Nếu bạn thay đổi URL, thậm chí chỉ bằng cách thêm một chuỗi truy vấn, trình duyệt sẽ cho rằng đó là một tệp mới và tải xuống

Ok, vậy hãy thử một số ví dụ

Đây là ví dụ cơ bản nhất để tải tập lệnh tùy chỉnh

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

1

1

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

1

1

1

1

Đầu tiên, chúng tôi đăng ký tập lệnh, để WordPress biết chúng tôi đang nói về điều gì. Cách tìm đường dẫn cho tệp JavaScript của chúng tôi là khác nhau cho dù chúng tôi đang mã hóa plugin hay chủ đề, vì vậy tôi đã bao gồm các ví dụ về cả hai bên trên. Sau đó, chúng tôi xếp nó vào hàng đợi để được thêm vào HTML cho trang khi nó được tạo, theo mặc định trong

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

Đầu ra chúng tôi nhận được từ ví dụ cơ bản đó là

1

1

Bây giờ nếu tập lệnh của bạn dựa trên một trong các thư viện có trong WordPress, như jQuery, thì bạn có thể thực hiện một thay đổi rất đơn giản đối với mã

1

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

1

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

1

1

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

Ghi chú. Theo mặc định, jQuery được tải với noConflict để tránh xung đột với các thư viện khác (chẳng hạn như Prototype). Xem phần không có Xung đột của Codex nếu bạn không biết cách giải quyết vấn đề đó

Xem những gì tôi đã làm ở đó? . Nó sử dụng một mảng ở đây, vì tập lệnh của bạn có thể có nhiều phần phụ thuộc. Nếu tập lệnh của bạn sử dụng giao diện người dùng jQuery và jQuery, thì bạn nên thêm giao diện người dùng jQuery vào mảng phụ thuộc của mình, chẳng hạn như

1

Vì vậy, bây giờ đầu ra đã thay đổi và chúng ta có thể thấy rằng jQuery cũng đã được thêm vào

1

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

Hãy thử một ví dụ với tất cả chuông và còi

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

1

1

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

1

1

1

1

Ok, vì vậy tôi hiện đã thêm một phiên bản và chỉ định rằng tập lệnh này cần được tải ở chân trang. Đối với số phiên bản, tôi đã chọn sử dụng ngày hôm nay vì nó dễ theo dõi, nhưng bạn có thể sử dụng bất kỳ số phiên bản nào bạn muốn. Đầu ra cho cái này cũng hơi khác một chút, jQuery được xuất trong

1

1

1

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

1

1

1

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

Làm rõ các ưu tiên của bạn

Một số người có thể không muốn sử dụng các phương pháp xếp hàng thích hợp vì họ cảm thấy họ có ít quyền kiểm soát hơn đối với thứ tự tải tập lệnh. Ví dụ: trong một chủ đề sử dụng Modernizr, tác giả chủ đề có thể muốn đảm bảo rằng Modernizr được tải sớm

Một điều tôi chưa đề cập trước đó là chi tiết hơn về cách hoạt động của hàm

1

1

1

Lưu ý rằng thông thường và cho đến bây giờ trong bài viết này, chỉ các tham số

1

1

1

1

1

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

1

1

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

1

1

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

Đầu ra sẽ giống như chúng ta đã thấy trước đây, nhưng nó sẽ xuất hiện sớm hơn trong tài liệu HTML

Ghi đè thư viện mặc định và sử dụng mạng phân phối nội dung

Có thể đôi khi bạn muốn sử dụng một phiên bản khác của thư viện có trong WordPress. Có lẽ bạn muốn sử dụng phiên bản tiên tiến hoặc bạn không muốn đợi bản phát hành tiếp theo của WordPress trước khi sử dụng phiên bản ổn định mới nhất của jQuery. Một lý do khác có thể là bạn muốn tận dụng phiên bản thư viện CDN của Google

Điều quan trọng cần lưu ý là điều này chỉ nên được thực hiện trên các plugin hoặc chủ đề được sử dụng trên các trang web mà cá nhân bạn sẽ duy trì. Bất kỳ plugin hoặc chủ đề nào bạn phát hành cho mục đích sử dụng chung nên sử dụng các thư viện đi kèm với WordPress

"Tại sao?. ", tôi nghe bạn hỏi. Vì lý do đơn giản là bạn không kiểm soát các trang web đó. Bạn không biết những plugin và chủ đề nào khác có thể được sử dụng ở đó và bạn không biết tần suất họ sẽ cập nhật plugin hoặc chủ đề của bạn. Sử dụng các thư viện đóng gói với WordPress là lựa chọn an toàn nhất

Phải nói rằng, nếu bạn muốn làm điều này trên một trang web mà bạn kiểm soát, thì đây là cách nó được thực hiện

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

Vì vậy, trước hết, tôi hủy đăng ký phiên bản đi kèm của thư viện, nếu không có thể xảy ra xung đột giữa các phiên bản khác nhau. Sau đó đăng ký phiên bản thay thế, sử dụng cùng một tay cầm và tôi đã chọn chỉ định null làm phiên bản (nó đã có trong URL. ) và được chỉ định không có trong phần chân trang. Phần còn lại của mã của chúng tôi giống nhau, bởi vì chúng tôi phụ thuộc vào bất kỳ tập lệnh nào sử dụng trình xử lý 'jquery'. Đầu ra chúng tôi nhận được bây giờ trông giống như

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

Ghi chú. Một trong những lý do đây là một ý tưởng tồi khi thực hiện plugin hoặc chủ đề để phát hành công khai, đó là tất cả các plugin và chủ đề khác được sử dụng trên trang web này giờ đây sẽ phải sử dụng phiên bản jQuery này. Ngoài ra, phiên bản jQuery mới đăng ký không có bộ xung đột, vì vậy nếu bất kỳ plugin hoặc tập lệnh chủ đề nào khác sử dụng Prototype chẳng hạn, điều này sẽ phá vỡ mọi thứ

Đừng tham lam

Cho đến nay, chúng tôi chưa đề cập bất cứ điều gì về cách thực hiện tất cả điều này trong quản trị viên, chỉ trên giao diện người dùng. Sự khác biệt chính là sử dụng hành động nào. Thay vì

1

1

Điều quan trọng cần làm đối với cả giao diện người dùng và quản trị viên là chọn lọc những trang bạn tải tập lệnh của mình trên đó. Nếu plugin hoặc chủ đề của bạn có tập lệnh chỉ thực hiện điều gì đó trên một trang giao diện người dùng hoặc trang quản trị, chẳng hạn như trang tùy chọn của chủ đề hoặc có thể là một trang có tiện ích con cụ thể, thì bạn chỉ cần tải tập lệnh của mình trên trang đó. Không có điểm nào làm tắc nghẽn mọi thứ và tải tập lệnh trên các trang mà chúng không được sử dụng

Có một ví dụ tuyệt vời trong WordPress Codex về cách chỉ tải tập lệnh trên các trang plugin. Bởi vì các plugin và chủ đề có thể khác nhau rất nhiều về cách chúng được viết, nên tôi sẽ không đi vào chi tiết cụ thể ở đây về cách kén chọn trang nào bạn tải tập lệnh, nhưng điều quan trọng là phải đề cập để bạn biết về nó khi nào.

Đó là Scripts, Now Styles

Quy trình cho các kiểu gần giống hệt như quy trình cho các tập lệnh. Nó được thực hiện bằng cách sử dụng một chức năng WordPress có tên là

1

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

Lưu ý rằng sự khác biệt duy nhất giữa

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

1

1

1

1

Vì vậy, một ví dụ về cách bạn có thể liệt kê một phong cách sẽ là

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

1

1

1

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

Đây là một ví dụ khá toàn diện, sử dụng hầu hết các tham số và đầu ra mà nó tạo ra trông giống như

1

Vì vậy, tại sao không phải tất cả mọi người đã làm mọi thứ theo cách này?

Một câu hỏi hay, và câu hỏi khác mà tôi đoán bạn có thể hỏi là, "Điều gì khiến bạn nghĩ rằng đây là cách 'đúng' chứ không chỉ là sở thích của bạn?". Về cơ bản, câu trả lời là đây là phương pháp được WordPress đề xuất. Nó đảm bảo rằng bất kỳ sự kết hợp nào giữa các plugin và chủ đề đều có thể hoạt động cùng nhau một cách vui vẻ và không bị nhân đôi

Tôi đã thấy một vài chủ đề và khuôn khổ xung quanh nơi sử dụng các thẻ

1

1

1

1

1

Một ví dụ là tải jQuery bằng cách sử dụng các thẻ

1

1

Phần kết luận

WordPress là một hệ thống tuyệt vời và nó đã được phát triển với rất nhiều suy nghĩ. Nếu có sẵn một cơ chế để làm một việc gì đó, bạn nên sử dụng cơ chế đó. Khi phát triển các plugin và chủ đề của bạn, hãy cố gắng nhớ viết mã cẩn thận và chơi tốt với những người khác

Bạn nghĩ gì về việc sử dụng

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

Nếu bạn cần một giải pháp làm sẵn, bạn có thể duyệt qua các Chủ đề Wordpress và Plugin Wordpress của chúng tôi trên Envato Market.