Phát triển plugin nâng cao WordPress

Có rất nhiều lợi ích khi học lập trình hướng đối tượng nếu bạn là nhà phát triển WordPress. Mã OOP có thể giúp sắp xếp mã của bạn và làm cho mã có thể tái sử dụng. Nó có thể mở rộng hơn, dễ bảo trì hơn và khuyến khích văn hóa sử dụng các mẫu thiết kế

Đây là bài đăng thứ hai trong loạt bài gồm sáu phần của chúng tôi tập trung vào WordPress dành cho nhà phát triển nâng cao. Loạt bài này tiếp nối từ phần Phát triển WordPress dành cho Người dùng Trung cấp phổ biến của chúng tôi, đã giới thiệu cho bạn một số chủ đề mã hóa quan trọng, bao gồm phát triển chủ đề một cách chi tiết, làm cho chủ đề sẵn sàng tùy chỉnh, xây dựng plugin, loại bài đăng tùy chỉnh và phân loại, truy vấn và vòng lặp, trường tùy chỉnh và

Tuần trước chúng ta đã xem xét cơ sở của OOP. Trong hướng dẫn này, bạn sẽ bắt đầu xây dựng plugin bằng kiến ​​thức mới về kỹ thuật lập trình hướng đối tượng. Chúng ta sẽ bắt đầu với việc chỉ sử dụng nó để thực hiện các thay đổi cấu trúc đối với mã bằng cách sử dụng những điều cơ bản của phương pháp tiếp cận đối tượng

Mã của bên thứ ba trong các plugin và chủ đề thường sử dụng rất nhiều “mì ống” – còn được gọi là “cao bồi” – mã hóa so với các nền tảng sử dụng OOP. Vào thời điểm bạn đọc xong bài đăng này, tôi hy vọng bạn sẽ được truyền cảm hứng để thử OOP và làm sạch mã của mình

Hãy để bị mắc kẹt trong

Ghi chú. Điều quan trọng là bạn phải có kiến ​​thức về PHP vì đây là ngôn ngữ nền tảng của WordPress cho loạt bài này, bao gồm các chủ đề nâng cao dành cho các nhà phát triển. Tôi sẽ đề cập đến các đoạn mã trong suốt loạt bài này. Đặc biệt, điều quan trọng đối với hướng dẫn này là bạn phải có kiến ​​thức cơ bản về cách tạo plugin. Cần giúp đỡ? . Hướng dẫn cuối cùng

Viết Plugin hướng đối tượng. Dự án

Với mục đích của bài học này, hãy tạo một plugin sẽ thêm biểu mẫu đăng ký sau nội dung của các bài đăng đơn lẻ của chúng ta. Biểu mẫu đăng ký sẽ gửi dữ liệu trực tiếp tới MailChimp. Đây là một việc đơn giản, có thể dễ dàng thực hiện bằng mã thủ tục nhưng yêu cầu cách tiếp cận OOP

Đây là một dự án dễ nhận thấy khả năng mở rộng. Bạn có thể thêm biểu mẫu ở các vị trí khác, bạn có thể triển khai biểu mẫu đó để hoạt động với các API khác như MadMimi hoặc thậm chí để thêm dữ liệu vào cơ sở dữ liệu cục bộ

Bạn sẽ thấy điều này dễ dàng như thế nào sau này

mã thủ tục

Trước tiên, hãy xem mã thủ tục đầy đủ, hiểu điều gì đang xảy ra và sau đó thực hiện một số tái cấu trúc để thêm một số phép thuật OOP

Đang tải ý chính cb790e16c4aae22f91e32407c4dcd9c7

Có hai điều chúng ta cần làm. tạo biểu mẫu trên giao diện người dùng và gửi dữ liệu đã nhập tới MailChimp. Hàm msf_post_form() đảm nhiệm chức năng cũ. Nó được nối với the_content và trả về nội dung như thể chúng ta không ở trên một trang duy nhất

Mặt khác, chúng tôi xây dựng một biểu mẫu gửi tới tệp admin-ajax.php. Tôi đã thêm hai yếu tố bảo mật vào biểu mẫu. Cái rõ ràng nhất là trường nonce, cái lén lút hơn là trường văn bản tên honeypot. Trường này không được sử dụng và bị ẩn qua CSS. Tôi đã cố tình đặt cho nó một cái tên thường được sử dụng (trái ngược với “honeypot”) để thu hút các bot điền vào nó

Hàm msf_assets() thêm biểu định kiểu cho chúng tôi. Lưu ý rằng tôi đăng ký nó trong chức năng này nhưng tôi liệt kê nó trong msf_post_form(). Điều này đảm bảo rằng nó chỉ được tải khi cần thiết

Cuối cùng, hàm msf_form_submit()> chịu trách nhiệm xử lý việc gửi. Khi nonce và honeypot được xác minh, chúng tôi sẽ gửi yêu cầu đăng bài từ xa đến vị trí thích hợp với dữ liệu được yêu cầu. Xem tài liệu API MailChimp để biết thêm thông tin

Có một số kiểm tra bổ sung mà chúng ta có thể (nên) thực hiện nhưng đây không phải là trọng tâm chính của hướng dẫn này nên tôi sẽ chỉ liệt kê chúng ở đây

• Kiểm tra cả phía máy chủ email
• Khớp máy chủ (us6) trong URL với máy chủ trong khóa API

Tôi đã thêm một số kiểu dáng cơ bản để làm cho biểu mẫu phù hợp với chủ đề Twenty Fifteen một cách độc đáo

Đang tải ý chính cb790e16c4aae22f91e32407c4dcd9c7

Biến chứng tiềm ẩn

Mã này hiện tại vẫn ổn, nhưng khi bạn cố gắng thêm các tính năng, nó sẽ nhanh chóng trở nên phức tạp hơn rất nhiều. Làm thế nào bạn sẽ xử lý nhiều danh sách?

Bạn sẽ kết thúc với rất nhiều câu lệnh if trong mã của mình khiến nó khó theo dõi và khó bảo trì, chưa kể đến một số tên hàm dài mà bạn cần nghĩ ra. Tôi cũng thấy rằng đặt tất cả các hành động của chúng tôi ở khắp mọi nơi sẽ gây bất lợi cho chất lượng mã. Hãy khắc phục một số vấn đề này bằng kiến ​​thức OOP cơ bản của chúng tôi

Viết lại với OOP trong tâm trí

Hãy viết lại từ đầu và sao chép-dán mã hiện có khi cần. Đối với hầu hết các dự án, tôi muốn tạo một lớp trình bao bọc có đầy đủ chức năng. Đây là bộ xương cơ bản

Đang tải ý chính cb790e16c4aae22f91e32407c4dcd9c7

Tôi đang chuyển một mảng cấu hình sang đối tượng mới. Điều này sẽ giúp dễ dàng thiết lập mọi thứ cho các môi trường khác nhau nếu cần. Tôi có thể sửa đổi mảng và lớp sẽ sử dụng thông tin trong đó – tương tự như cách hoạt động của wp-config.php cho WordPress

Hàm khởi tạo chạy ngay khi lớp được tạo, nghĩa là đây là nơi đặt tất cả các hành động và bộ lọc của chúng ta

Đang tải ý chính cb790e16c4aae22f91e32407c4dcd9c7

Tôi thấy cấu trúc này tốt hơn rất nhiều vì nó tự ghi lại nhiều hơn. Bạn có thể thấy tất cả các điểm mà lớp cắm vào WordPress ở một nơi

Lưu ý rằng khi bạn sử dụng hook trong các lớp, bạn không thể chỉ định tên của hàm, bạn cần sử dụng quy ước array( $this, 'name_of_function' ). Điều này là do chức năng mà chúng ta đang đề cập đến nằm trong lớp chứ không phải trong không gian chung. Tôi cũng đã loại bỏ các tiền tố chức năng và đơn giản hóa tên của chúng để mục đích của chúng dễ xác định hơn

Tất cả những gì còn lại là đưa các chức năng này vào phần thân của lớp. Hai nơi mà bạn sẽ nhận thấy các thay đổi là tên hàm (đã được đơn giản hóa) và việc sử dụng khóa API hiện được lấy từ thuộc tính $api_key. Đây là mã OOP đầy đủ

Đang tải ý chính cb790e16c4aae22f91e32407c4dcd9c7

Mã bây giờ dễ hiểu hơn rất nhiều, có cấu trúc tốt hơn và dễ mở rộng hơn

Tiện ích mở rộng cơ bản

Có rất nhiều điều chúng ta có thể làm để mở rộng mã của mình. Hãy tập trung vào hai khía cạnh. kiểm soát các trường biểu mẫu và thêm các nhà cung cấp khác

Trường biểu mẫu

Tùy thuộc vào nhu cầu của chúng tôi, có thể có thêm một vài trường biểu mẫu. Chúng tôi có thể mã hóa chúng mỗi khi chúng tôi cần thay đổi nhưng tôi thích sử dụng hook hơn để kiểm soát những thứ như vậy. Hãy nhớ rằng ngay cả khi bạn không phát hành tác phẩm của mình ra công chúng, bạn vẫn có thể tự mình sử dụng nó trong nhiều dự án. Làm cho nó dễ dàng mở rộng là một khoản đầu tư vào việc giảm khối lượng công việc của bạn theo thời gian

Để bắt đầu, tôi sẽ tách mọi thứ mà biểu mẫu phải có khỏi các thành phần tùy chọn. Đây là một nơi tuyệt vời để thảo luận nhanh. Bạn có coi trường email là bắt buộc không, hay nó là tùy chọn cho ứng dụng của bạn?

Đi đường nào cũng được. Nếu bạn sẽ luôn sử dụng triển khai này để sửa đổi danh sách người nhận thì có thể là một quyết định đúng đắn khi viết mã cứng cho nó. Nếu bạn có thể mở rộng nó để sửa đổi các bản tin, tạo danh sách mới – các quy trình không cần một địa chỉ email duy nhất – bạn nên xem xét các tùy chọn đó. Đối với mục đích của ví dụ này, tôi sẽ coi nó là tùy chọn nhưng bao gồm theo mặc định

Đây là cách mã của phương thức form() thay đổi theo ý nghĩ trên

Đang tải ý chính cb790e16c4aae22f91e32407c4dcd9c7

Tôi đã tạo một biến the_content0 chứa một mảng trường HTML. Thứ duy nhất tôi muốn thực thi làm mặc định là email, vì vậy tôi đã thêm nó. Tôi làm theo điều đó bằng cách áp dụng bộ lọc cho mảng mặc định. Bộ lọc cho phép tôi dễ dàng mở rộng chức năng bằng cách thêm bao nhiêu trường nếu cần

Để thêm trường "tuổi", chỉ cần sử dụng bộ lọc từ plugin của riêng bạn hoặc plugin khác. Để thêm trường tuổi từ một plugin khác, bạn có thể làm như thế này

Đang tải ý chính cb790e16c4aae22f91e32407c4dcd9c7

Thêm nhà cung cấp khác

Một khía cạnh khác của ứng dụng đã sẵn sàng để mở rộng là nhà cung cấp. Khả năng lựa chọn giữa MailChimp, MadMimi hoặc các nhà cung cấp danh sách email khác sẽ rất tuyệt vời, hãy bắt đầu

Thay vì sử dụng các câu lệnh if trong trình xử lý đệ trình của chúng ta - khiến nó trở nên siêu dài - hãy sử dụng một hàm riêng biệt để khởi chạy trình xử lý đệ trình chính xác. Hãy bắt đầu bằng cách viết lại mảng cấu hình của chúng ta

Đang tải ý chính cb790e16c4aae22f91e32407c4dcd9c7

Nhìn vào mảng này bạn có thể nghĩ. “Tại sao điều này lại phức tạp như vậy? . câu trả lời cho điều đó là. chắc chắn nó có thể

Lý do tôi chọn đi sâu hơn một cấp là suy nghĩ về phía trước. Chúng tôi không thực sự đi sâu vào xác thực ở đây trong khi hầu hết các API đều yêu cầu điều đó. Điều đó có nghĩa là chúng tôi sẽ cần ít nhất hai bit thông tin cho mỗi nhà cung cấp. Ngoài ra, chúng tôi có thể muốn hợp lý hóa các lệnh gọi API sau này, thêm các URL cơ sở và thông tin khác vào mảng này

Ngay bây giờ, chúng tôi sẽ cần viết lại mã của mình một chút để hoạt động với mảng nhà cung cấp mới của chúng tôi. Vì chúng tôi đã cố gắng suy nghĩ trước, những thay đổi trong tương lai có thể sẽ không yêu cầu thay đổi mã hiện có

Bây giờ mảng cấu hình của chúng ta có cấu trúc khác, chúng ta cần cập nhật hàm tạo. Thay vì tài sản the_content1, tôi sẽ sử dụng the_content2 sẽ chứa thông tin của mọi nhà cung cấp mà chúng tôi sử dụng

Đang tải ý chính cb790e16c4aae22f91e32407c4dcd9c7

Tiếp theo, hãy đổi tên the_content3 thành the_content4 và đảm bảo rằng nó tham chiếu khóa api trong thuộc tính the_content2 mới của chúng ta. Có thể thấy sự thay đổi trong hàm the_content6, hãy xem bên dưới

Đang tải ý chính cb790e16c4aae22f91e32407c4dcd9c7

Cuối cùng, chúng ta cần khởi chạy trình xử lý chính xác vào đúng thời điểm. Để làm điều đó, hãy thay đổi mảng cấu hình của chúng ta lần cuối, bao gồm cả trình xử lý mà chúng ta muốn sử dụng

Đang tải ý chính cb790e16c4aae22f91e32407c4dcd9c7

Tôi cũng sẽ thêm trình cung cấp vào các thuộc tính trong lớp của chúng ta bằng cách gán nó trong hàm tạo

Đang tải ý chính cb790e16c4aae22f91e32407c4dcd9c7

Khi ai đó gửi biểu mẫu, hàm the_content7 vẫn được gọi, tuy nhiên nó không còn tồn tại vì chúng tôi đã đổi tên nó thành the_content8. Hãy tạo lại hàm xử lý đệ trình ngay bây giờ

Đang tải ý chính cb790e16c4aae22f91e32407c4dcd9c7

Trình xử lý gửi của chúng tôi kiểm tra xem có phương pháp nào để xử lý hành động không. Nó tìm kiếm tên của nhà cung cấp được thêm vào với “Trình xử lý”. Nếu không tìm thấy phương thức, nó sẽ hiển thị thông báo. Nếu không thì nó thực thi phương thức

Mã đầy đủ

Vì chúng tôi đã thực hiện rất nhiều sửa đổi nên tôi đăng mã đầy đủ cho plugin bên dưới. Cố gắng không sao chép-dán mã bên dưới;

Đang tải ý chính cb790e16c4aae22f91e32407c4dcd9c7

Từ cuối cùng

Làm việc với OOP cần một số thời gian để làm quen nhưng một khi đồng xu giảm xuống, bạn sẽ thông thạo nó. Tôi cũng đã vật lộn với nó trong lần đầu tiên, vì vậy đừng nản lòng nếu bạn cần một vài lần vượt qua nó trước khi nó nhấp chuột

Cuối cùng, có khá nhiều bổ sung khả thi và có những phương pháp OOP tốt hơn mà bạn có thể sử dụng để làm cho mã thậm chí còn tốt hơn. Nếu bạn cảm thấy thành thạo tài liệu mà chúng tôi đã trình bày cho đến nay, tôi khuyên bạn nên xem qua Giao diện mà bạn có thể sử dụng để thêm nhiều tích hợp mô-đun hơn với các dịch vụ của bên thứ ba

Bạn có thấy hướng dẫn này hữu ích không?