Lập Trình Theme WordPress – Phần 8 – Xây Dựng 1 Widget

Các bạn có thể hình dung, Widget là một tiện ích nhỏ nhỏ, thường được đặt ở sidebar hoặc một số khu vực được chỉ định sẵn trong theme (Widget Area).

Người ta thường sử dụng Widget để tăng mức trải nghiệm của người dùng trên website, cung cấp các công cụ, thông tin tiện ích dến người dùng một cách nhanh nhất (thanh tìm kiếm, các bài viết mới nhất, các sản phẩm vừa xem qua…vv).

Mặc định, WordPress cung cấp cho chúng ta khoảng 17 Widget, ngoài ra các theme cũng có tích hợp sẵn một số Widget cho chúng ta sử dụng.

Tuy nhiên, trong một số trường hợp, chúng ta cần 1 Widget cho công việc của riêng mình và chúng ta sẽ phải phát triển nó. Nhưng các bạn yên tâm, việc phát triển Widget khá đơn giản và Widget của bạn có thể tái sử dụng nhiều lần.

Class WP_Widget

WordPress cung cấp tài liệu hướng dẫn phát triển Widget rất rõ ràng, và lành mạch, các bạn có thể tham khảo tại đây.

Về mặt kỹ thuật, WordPress Widget là một PHP object, nó sẽ hiển thị thông tin của Widget khi hàm widget() được gọi. WordPress cung cấp sẵn cho chúng ta một lớp WP_Widget, để tạo mới một Widget, lập trình viên chỉ cần kế thừa và ghi đè (override) một số phương thức của nó.

Việc đầu tiên chúng ta cần làm là tìm hiểu về lớp WP_Widget. Lớp WP_Widget được định nghĩa tại file wp-includes/class-wp-widget.php, các bạn có thể mở ra, đọc qua 600 dòng mã nguồn để hình dung được cách một Widget hoạt động.

Mình sẽ tóm tắt lại các phương thức nên và phải khai báo trong một lớp Widget mới:

  • __costruct: hàm khởi tạo có nhiệm vụ khao báo thông tin Widget
  • form: hàm xây dựng form cấu hình cho Widget (tại giao diện admin)
  • update: phương thức hỗ trợ cập nhật dữ liệu từ form
  • widget: hiển thị dữ liệu ra ngoài giao diện

Xây dựng Widget

rong phạm vi bài viết này, mình sẽ tạo 1 Widget mới, để hiển thị địa chỉ, số điện thoại và email (thông tin liên hệ). Để xây dựng Widget, chúng ta sẽ cần thực hiện 1 vài bước sau:

Bước 1: Tạo file, include và đăng ký Widget.

Như các bạn đã biết, về lý thuyết, khi thêm các phần code mở rộng, chúng ta sẽ nghĩ ngay đến file functions.php. Tuy nhiên, lạm dụng nó quá sẽ khiến file functions rất dài và khó quản lý. Do đó, chúng ta sẽ tạo 1 file chứa class Widget mới, sau đó sử dụng các lệnh require, include …vv để nhúng file Widget và functions.php.

Đầu tiên, mình sẽ tạo 1 folder mới tên classes tại thư mục gốc của theme, kế đến mình tạo 1 file mang tên class-svh-contact-widget.php chứa class SVH_Widget. Lúc này, chúng ta sẽ có.

Kế đến, chúng ta khởi tạo 1 class mới, bên trong file vừa tạo với các thành phần thiết yếu của một Widget.

Cuối cùng, ở file functions.php, chúng ta cần nhúng class Widget và khai báo Widget với WordPress.

Bước 2: Hoàn thiện lớp SVH_Widget

Bây giờ, chúng ta sẽ bắt đầu hoàn thiện class SVH_Widget để hoàn thiện chức năng Widget của mình. Mình sẽ chia tiếp bước này thành 4 phần nhỏ.

(1) Đầu tiên là hàm khởi tạo. Chúng ta khai báo một mảng options, và gọi lại hàm khởi tạo của class cha (class Widget).

Sau khi xong hàm khởi tạo, các bạn có thể vào giao diện Widget để xem thành quả của mình.

Widget của chúng ta đã hiển thị, các bạn có thể thêm widget của mình vào các Widget Area, nhưng tất nhiên, Widget của chúng ta chưa có gì, và cũng chưa hiển thị bất cứ gì.

(2) Kế đến, chúng ta sẽ tạo form để người dùng điền các thông tin liên quan đến Widget, ở đây là địa chỉ, số điện thoại và email

Phần này cũng đơn giản, không có gì khó khăn lắm đúng không nào? Và bây giờ quay trở lại giao diện quản trị Widget, chúng ta thêm Widget vào 1 Widget Area bất kỳ, mở rộng giao diện Widget, chúng ta sẽ thấy được form nhập liệu của Widget.

Các bạn thử nhập và lưu dữ liệu lại, form của chúng ta sẽ reload mất hết dữ liệu vừa nhập. Vì sao vậy? Vì chúng ta chưa hướng dẫn Widget cách lưu dữ liệu mà 🙂

(3) Tiếp đến là phần lưu dữ liệu từ người dùng. Như phía trên, các bạn đã thử, dữ liệu sẽ không được lưu lại cho đến khi chúng ta hiện thực hàm update

Trong đoạn code trên cũng khá dễ hiểu, có hàm sanitize_text_field tương đối mới, nó sẽ giúp chuẩn hóa dữ liệu trước khi lưu vào database. Sau khi cập nhật lại hàm update, các bạn thử lại việc nhập dữ liệu và lưu dữ liệu ở Widget và chắc chắn lần này mọi thứ đã hoạt động tốt.

(4) Cuối cùng là khâu hiển thị ra ngoài giao diện.

Khi đọc mã nguồn của class cha WP_Widget các bạn sẽ thấy hàm widget được khai báo một cách rất cục cằn

Nó yêu cầu Sub-class sẽ phải định nghĩa cách hiển thị Widget, nếu không Widget của bạn sẽ hoàn toàn không thể sử dụng ngoài giao diện người dùng. Và phần ghi chú có nhắc tới 4 biến được lưu trong mảng $args là before_widget, after_widget, before_title, after_title. Và tạo tiền đề cho một số bài viết sau, mình sẽ sử dụng filter trong phần này luôn.

Các bạn sẽ thấy rất đơn giản đúng không nào, hiển thị các biến trong mảng $args đúng vị trí của nó. Kiểm tra dữ liệu và hiển thị dưới dạng một unorder list (ul).

Bước 3: Cấu hình và sử dụng Widget

Ở giao diện cấu hình Widget, do hiện tại ở theme của mình đang chỉ có 1 Widget Area nằm ở footer được hiển thị, nên mình sẽ tháo Widget Facebook – Fanpage ở để tạm Widget liên hệ vào. Sau đó, điền các thông số tương ứng vào form và tiến hành lưu lại.

Bước 4: Kiểm tra Widget ngoài giao diện người dùng

Mọi thông tin đã hiển thị đúng như chúng ta cấu hình. Như vậy, Widget của chúng ta đã hoạt động đúng.

Chúc các bạn tạo mới Widget thành công.