Nhiều người trong chúng ta sử dụng các kiểu để thay đổi giao diện trang web của mình và các tập lệnh để nâng cao chức năng. Tuy nhiên, điều quan trọng cần lưu ý là cách bạn thêm các tập lệnh này vào WordPress cũng quan trọng như nội dung của các tệp này. Thay vì đưa chúng vào tệp đầu trang hoặc chân trang, chúng tôi cần sử dụng chức năng enqueue của WordPress
Trong bài viết này, tôi sẽ chỉ cho bạn cách thêm tập lệnh và kiểu vào chủ đề và plugin của bạn, cho dù bạn đang tạo thứ gì đó ở giao diện người dùng hay ở phần phụ trợ
Chúng tôi sẽ bao gồm
Enqueueing là gì?
Enqueueing là một cách thân thiện với CMS để thêm tập lệnh và kiểu vào trang web WordPress. Nhiều plugin bạn có có thể sử dụng jQuery và các tập lệnh được chia sẻ khác. Nếu mỗi plugin được liên kết riêng với các nội dung này, sự hỗn loạn sẽ xảy ra và tất cả JavaScript của bạn có thể ngừng hoạt động
Bằng cách liệt kê các tập lệnh, bạn đang nói với WordPress về nội dung bạn muốn thêm và nó sẽ đảm nhiệm việc thực sự liên kết với chúng trong đầu trang và chân trang. Bạn thậm chí có thể chỉ định các phụ thuộc của tập lệnh và kiểu của mình và WordPress sẽ thêm chúng theo đúng thứ tự
Nó lấy tất cả thông tin từ những gì cốt lõi cần, theo chủ đề và plugin của bạn, tạo danh sách các tập lệnh và kiểu cần thiết và xuất chúng ở đúng vị trí
mê hoặc. Điểm mấu chốt
Bất kể bạn đính kèm nội dung của mình như thế nào, kết quả cuối cùng sẽ là thẻ hoặc thẻ ở đâu đó trong HTML của trang web của bạn. Ví dụ bên dưới hiển thị ba tập lệnh và hai kiểu được tải trên một trang web
Đang tải ý chính 37363697ded3703b37c38c13dcb26a7b
Về mặt chức năng, điều này hoàn toàn ổn, nhưng đừng quên rằng WordPress được giao nhiệm vụ nhiều hơn một chút so với những gì tôi đã trình bày ở trên. Có thể có một vài kịch bản và phong cách khác treo xung quanh. Vì thứ tự bạn bao gồm các tập lệnh và kiểu dáng rất quan trọng, nếu bạn chỉ bắt đầu đặt chúng vào đầu trang hoặc chân trang của chủ đề, bạn có thể bị lạc rất sớm
Ngoài ra, phần lớn các tập lệnh này không hiển thị trong mã PHP của chủ đề của bạn. Tất cả các tập lệnh mà WordPress và các plugin khác cần được thêm vào thông qua các hàm wp_head[] và wp_footer[]
Enqueueing tài sản một cách chính xác
Enqueueing là một cách để cho WordPress biết về tập lệnh của bạn và phần phụ thuộc của chúng. Dựa trên điều này, WordPress tìm ra vị trí của tập lệnh cho bạn. Vì tất cả điều này được thực hiện bằng mã, bạn sẽ không phải lo lắng về việc sắp xếp lại các tập lệnh khi bạn cần thêm một tập lệnh mới. Hãy xem qua các tập lệnh trong phần trước, thêm chúng bằng cách xếp hàng
Đang tải ý chính 5eba5ee051046813680204a397a4949a
Mã này phải được đặt trong tệp functions.php của chủ đề, chủ đề con của chúng tôi hoặc trong tệp plugin. Lưu ý rằng cả tập lệnh và kiểu đều được xử lý bằng cách đính kèm hàm vào móc wp_enqueue_scripts
Hai điều đầu tiên tôi mê mẩn là phong cách của chúng tôi. Tôi đã xác định kiểu chủ đề của mình trước, mặc dù nó phụ thuộc vào kiểu đặt lại. Đây không phải là vấn đề vì tôi đã xác định sự phụ thuộc này trong tham số thứ ba. Tham số đầu tiên là tên duy nhất của nội dung, tham số thứ hai là vị trí của nó
Nội dung thứ ba mà tôi đã thêm là Băng chuyền cú tuyệt vời. Trong tham số thứ ba, tôi đã chỉ định jQuery làm phụ thuộc. Tôi không cần phải tự mình xếp hàng vì nó được tích hợp sẵn trong WordPress. Hãy xem danh sách các tập lệnh được bao gồm
Cuối cùng, tôi bao gồm kịch bản chủ đề. Tập lệnh của chúng tôi phụ thuộc vào jQuery và Owl Carousel. Trong thực tế, bạn có thể thoát khỏi việc chỉ cần xác định Owl Carousel là phần phụ thuộc. Vì jQuery là một phụ thuộc cho Owl Carousel nên nó sẽ được đưa vào trước nó trong mọi trường hợp. Điều đó nói rằng, tôi muốn nêu đầy đủ các phụ thuộc của mình, nó cung cấp cho tôi nhiều thông tin hơn khi xem mã
Phần cuối cùng của câu đố là đảm bảo rằng tập lệnh chủ đề của chúng tôi được tải ở chân trang. Điều này có thể được thực hiện bằng cách xác định tham số thứ năm là true. Tham số thứ tư là số phiên bản tùy chọn mà tôi đã đặt thành 1. 0
Tài khoản WPMU DEV PRO
Các công cụ WP chuyên nghiệp tốt nhất của chúng tôi trong một gói
Nhập email của bạn
Bắt đầu dùng thử miễn phí
Dùng thử miễn phí trong 7 ngày
hoàn tiền trong 30 ngày
Enqueueing trong chi tiết
Bây giờ bạn đã xem một ví dụ, hãy bắt tay vào và xem xét tất cả các chức năng và thông số có sẵn cho chúng tôi
Chúng tôi đã sử dụng hai chức năng. wp_enqueue_script[] và wp_enqueue_style[]. Cả hai đều có năm tham số, chia sẻ bốn tham số đầu tiên
Đang tải ý chính 915b8254122a3e704612867f8e1f1379
- xử lý. Đây là tên của kịch bản hoặc phong cách của bạn. Tốt nhất là chỉ sử dụng các chữ cái viết thường và dấu gạch ngang ở đây và đảm bảo sử dụng một tên duy nhất
- nguồn. URL của tập lệnh hoặc kiểu của bạn. Đảm bảo sử dụng các hàm như get_template_directory_uri[] hoặc plugins_uri[]
- phụ thuộc. Một mảng xử lý nội dung mà tập lệnh hoặc kiểu của bạn phụ thuộc vào. Chúng sẽ được tải trước tập lệnh mê hoặc của bạn
- phiên bản. Số phiên bản sẽ được thêm vào truy vấn. Điều này đảm bảo rằng người dùng nhận được phiên bản chính xác, bất kể bộ nhớ đệm
- in_footer. Tham số này chỉ khả dụng cho tập lệnh. Nếu được đặt thành true, tập lệnh sẽ được tải qua wp_footer[] ở cuối trang của bạn
- phương tiện truyền thông. Tham số này dành cho kiểu, nó cho phép bạn chỉ định loại phương tiện mà kiểu sẽ được hiển thị. Ví dụ. màn hình, in ấn, cầm tay, vv
Hy vọng rằng lời giải thích về các tham số đã làm cho ví dụ của chúng ta trong phần trước rõ ràng hơn nhiều. Giờ đây, bạn có thể bắt đầu thử nghiệm với phong cách và tập lệnh của riêng mình
Đăng ký tài sản
Thực tế, có hai bước để thêm một nội dung, nhưng chức năng xếp hàng có thể hoàn thành việc đó trong một lần. Về mặt kỹ thuật, các tập lệnh và kiểu được đăng ký đầu tiên và sau đó được đưa vào hàng đợi. Đăng ký cho phép WordPress biết về nội dung của bạn, trong khi thực sự thêm chúng vào trang. Đây là một cách khác để thêm Băng chuyền cú của chúng tôi
Đang tải ý chính a5eaebbbb15320a1c7de7716ec02a3b9
Vậy tại sao làm điều này trong hai bước khi một bước là đủ? . Một ví dụ điển hình là mã ngắn. Giả sử một mã ngắn bạn tạo yêu cầu một số Javascript. Nếu bạn đưa nó vào hàng đợi bằng cách gắn nó vào móc wp_enqueue_scripts, nó sẽ được tải theo mọi yêu cầu, ngay cả khi mã ngắn không được sử dụng
Câu trả lời là đăng ký tập lệnh bằng cách sử dụng móc nối wp_enqueue_scripts, nhưng đưa nó vào hàng đợi trong hàm shortcode. Điều này sẽ chỉ tải nó khi mã ngắn thực sự được sử dụng. Nếu mã ngắn được sử dụng nhiều lần, tập lệnh sẽ chỉ được đưa vào một lần, vì vậy chúng tôi đã đề cập đến tất cả các cơ sở
Các hàm 1 và 2 chia sẻ các tham số giống như các hàm anh em trong hàng đợi của chúng. Sự khác biệt duy nhất là các hàm enqueue cho phép bạn chỉ định handle miễn là handle đó đã được đăng ký
Xóa tập lệnh và kiểu
WordPress cung cấp các chức năng hủy đăng ký và hủy đăng ký cho cả tập lệnh và kiểu
3456
Các chức năng này cho phép chúng tôi loại bỏ nội dung theo mô-đun. Ví dụ sau đây cho thấy cách jQuery có thể dễ dàng bị xóa và thay thế bằng phiên bản mới hơn
Đang tải ý chính 702c31353253e89913a7a42b4b2a59f8
Điều đó đang được nói, hầu như không bao giờ là một ý tưởng hay khi thay thế jQuery bằng một phiên bản mới. WordPress được xây dựng để hoạt động trơn tru nhất có thể với phiên bản được thêm vào theo mặc định. Thay thế nó không nên được xem nhẹ
Tổng hợp
Hy vọng rằng, bây giờ bạn đã hiểu tại sao xếp hàng lại là một quá trình quan trọng như vậy. Nó trút bỏ gánh nặng bảo trì phụ thuộc và cho phép bạn thêm các tập lệnh của mình theo cách mô-đun và có thể quản lý được
Enqueueing là bắt buộc đối với tất cả các plugin và chủ đề WordPress. Sản phẩm của bạn [miễn phí hoặc cao cấp] sẽ không được chấp nhận vào kho lưu trữ WordPress và nhiều thị trường cao cấp nếu không có nó. Nó tạo thành nền tảng của việc “chơi đẹp với người khác” và mọi nhà phát triển nên tuân theo
Nếu bạn có bất kỳ câu hỏi hoặc nhận xét nào về quy trình, hãy cho chúng tôi biết trong phần bình luận bên dưới
Chia sẻ bài viết này
Daniel Pataki Daniel là CTO tại Kinsta và đã viết cho nhiều ấn phẩm nổi bật như WPMU DEV và Smashing Magazine. Trong thời gian rảnh rỗi, bạn sẽ thấy anh ấy chơi các trò chơi cờ bàn hoặc lên kế hoạch cho trò chơi văn phòng tuyệt vời tiếp theo như Megaball không phá hoại chút nào.
Xây dựng doanh nghiệp WordPress tốt hơn
Bắt đầu dùng thử miễn phí 7 ngày
Theo chúng tôi
Liên kết tới Facebook của WPMU DEV Liên kết tới Twitter của WPMU DEV Liên kết tới LinkedIn của WPMU DEV Liên kết tới WPMU
Bài viết liên quan và gần đây nhất
Cách tạo Twenty Fourteen [Hoặc bất kỳ chủ đề WP nào khác. ] Siêu
Tăng tốc độ phát triển chủ đề WordPress của bạn bằng CodeKit
Hơn 35 tài nguyên để trở thành nhà phát triển Kick Ass WordPress
Cách trỏ tên miền đến WPMU DEV Hosting
Các dự án liên quan
chim ruồi chuyên nghiệp
Mọi thứ bạn cần để…
hậu vệ chuyên nghiệp
Thường xuyên quét bảo mật, lỗ hổng…
Smush Pro
Sự lựa chọn của người dùng, đoạt giải thưởng, và…
SmartCrawl Pro
Tăng PageRank của bạn và…
Nhận các bản cập nhật WP mới trực tiếp vào hộp thư đến của bạn.
Bằng cách nhấp vào đăng ký, tôi đồng ý nhận tin tức WP vui nhộn. P. S. Chúng tôi giữ email của bạn 100% riêng tư và không gửi thư rác. ]