Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Widgets
Code

Tạo Widget Của Riêng Bạn Bằng Nhiều WordPress APIs: Phần Giới Thiệu

by
Difficulty:IntermediateLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Na Dang (you can also view the original English article)

Final product image
What You'll Be Creating

Widget là một cách để cho người sở hữu trang web kiểm soát được giao diện (và đôi khi là chức năng) của các trang web WordPress của họ. Trong loạt bài này, chúng tôi sẽ tạo ra một số ít các WordPress Widgets bằng cách kết hợp Widgets API với các API bên ngoài khác.

Loạt bài này sẽ bao gồm các hướng dẫn sau:

  1. Giới thiệu
  2. Wiget về các bài đăng tải có liên quan
  3. Widget đăng nhập
  4. FAQ Widget (các câu hỏi thường gặp)
  5. Những Widget phổ biết nhất có tích hợp Google Analytics
  6. Những Widget về địa chỉ thực có tích hợp Google Maps
  7. Tổng kết

Trong hướng dẫn này, tôi sẽ giới thiệu cho bạn về WordPress Widgets API bằng cách tạo lại một widget đơn giản. Chúng ta sẽ soi xét và kiểm tra các chức năng khác nhau tạo nên widget để hiểu những WordPress Widget hoạt động như thế nào.

Widget này cũng sẽ đảm nhận vai trò cơ sở cho chúng tôi dựng các widget khác trong các phần tiếp theo của loạt bài này.

WordPress Widget

WordPress widget thêm nội dung và các tính năng cho sidebar hoặc các lĩnh vực được tiện ích hoá trong giao diện của bạn. Vật dụng được thiết kế để cung cấp một cách đơn giản và dễ dàng sử dụng cho thiết kế và cấu trúc điều khiển của giao diện WordPress cho người dùng mà không đòi hỏi họ phải biết code.

Hầu hết WordPress Widget cung cấp các tuỳ biến và các tùy chọn như form để điền, chọn lựa hình ảnh và các tính năng tùy biến khác.

Nghiên cứu Widget Class

Cách dễ nhất để tạo ra một widget WordPress là thừa kế WP_Widget class. Bằng cách này bạn có thể sử dụng các chức năng được xây dựng trong để cập nhật các widget, Hiển thị các widget và tạo ra một giao diện quản trị cho widget.

Để hiểu đầy đủ widget hoạt động như thế nào, chúng tôi sẽ tạo ra và kiểm tra một widget rỗng. Sau đó, chúng tôi sẽ định nghĩa mỗi chức năng làm cho lên các widget để xem cách chúng làm việc cùng nhau để tạo ra một widget đang hoạt động.

Định nghĩa Widget của chúng tôi



Các chức năng cụ thể

Chúng ta hãy xem xét mỗi chức năng cụ thể hơn:

__construct()

Hàm này đăng ký widget với WordPress

widget()

Hàm này chịu trách nhiệm cho việc hiển thị ở front-end của widget. Nó xuất ra nội dung của các widget

update()

Xử lý các tùy chọn của widget khi lưu lại. Sử dụng hàm này để cập nhật widget của bạn (tùy chọn). Hàm này phải cần hai tham số:

  1. $new_instance - Các giá trị chỉ gửi đi để được lưu lại. Những giá trị này sẽ đến từ form được định nghĩa trong phương thức form()
  2. $old_instance - những giá trị đã được lưu lại trước đó từ cơ sở dữ liệu

Hãy chắc chắn đã sanitize (chuẩn hoá) tất cả các giá trị được gửi ở đây. Những giá trị do người dùng gửi đi luôn cần chuẩn hoá trước khi gửi đến cơ sở dữ liệu.

form()

Phương thức/hàm form() được sử dụng để xác định form widget ở back-end mà bạn nhìn thấy trong bảng điều khiển của Widget trong bảng điều khiển. Form này cho phép người dùng thiết lập các tiêu đề và các tùy chọn khác cho widget.

Hàm này phải cần tham số sau:

  • $instance - giá trị đã lưu trước đó từ cơ sở dữ liệu 

Tạo widget của chúng tôi

Để tạo widget, chúng ta sẽ thực hiện theo các bước sau:

  • Xác định những gì chúng ta tạo ra
  • Đăng ký widget của chúng ta với WordPress
  • Xây dựng form ở back-end
  • Lưu giá trị cơ sở dữ liệu
  • Xác định Hiển thị cho front-end
  • Đăng ký widget

Chúng ta đang tạo những gì?

Như đã đề cập trước đó, chúng tôi đang tạo ra một widget văn bản đơn giản cho phép người dùng nhập một tiêu đề và một số văn bản tùy ý mà sau đó sẽ xuất ra hiển thị ở front-end website của họ, nơi chứa widget.

Constructor của widget

Constructor cho phép chúng ta khởi tạo widget bằng cách overwrite lên class cha (class WP_Widget chuẩn).



Trong đoạn code ở trên, chúng tôi gọi các hàm construct của class WP_Widget và truyền vào tham số sau đây:

  • Base ID - một identifier duy nhất cho widget. Phải bằng chữ in thường. Nếu để trống phần tên class của widget sẽ được sử dụng.
  • Name - đây là tên cho widget được hiển thị trên trang cấu hình (trong dashborad).
  • Và một mảng (tùy chọn) có chứa một classname (tên lớp) và phần mô tả. Mô tả được hiển thị trên trang cấu hình (trong bảng điều khiển của WordPress).

Xây dựng Form cho Back-end

Form cho back-end sẽ bao gồm hai trường dữ liệu – một trường tiêu đề và một trường textarea. Dưới đây là ảnh chụp màn hình của form trong bảng điều khiển Widget:

Our widgets back-end configuration form

Để tạo ra form phía trên, chúng ta sẽ bắt đầu với HTML thuần t uý và sau đó thay thế một số giá trị thuộc tính với một số biến PHP  và những biểu thức. Sau đây là code HTML để tạo ra hai trường này:



Để đi từ phần này đến phần code cuối cùng của chúng ta cho hàm form(), chúng tôi sẽ cần phải thực hiện một số các thuộc tính động - cụ thể là, name, id và label cho thuộc tính (nó cần phù hợp với id của HTML của label đó). Chúng tôi sẽ còn thay thế giá trị của trường text và nội dung của trường textarea với các giá trị động từ cơ sở dữ liệu nếu chúng đã được lưu lại.

Đây là code chúng ta xây dựng được:



Code phía trên truy xuất và gán giá trị đã lưu trước đó từ cơ sở dữ liệu cho hai biến - $title$message. Chúng tôi sử dụng esc_attr() để mã hóa các giá trị trả về và để tránh phá vỡ code của chúng tôi. Sau đó, chúng tôi echo các thuộc tính $title vào thuộc tính giá trị của trường văn bản và echo $message như nội dung của trường textarea.

Trong đoạn code ở trên, bạn sẽ thấy hai phương thức có lẽ khá mới với bạn – get_field_id() và get_field_name().

  • get_field_id()- Xem trường name như là tham số và cấu trúc thuộc tính id để sử dụng trong các trường của form(). Nó đảm bảo rằng giá trị trả về của id là duy nhất
  • get_field_name() - Xem trường name như là tham số và xây dựng thuộc tính name để sử dụng trong các trường của form(). Nó đảm bảo rằng tên trường name là duy nhất.

Những thẻ label có thuộc tính for được xây dựng để in ra ra giá trị id của các thành phần mà chúng gắn nhãn.

Class widefat được dùng để đảm bảo rằng các trường của widget của bạn có cùng diện mạo giống như các trường khác trong bảng điều khiển WordPress.


Cập Nhật của Widget của chúng tôi (các tùy chọn)

Để cập nhật các widget, chúng tôi sẽ viết code thích hợp trong các phương thức update. Đây là code của chúng tôi:


Hàm ở trên có hai tham số - $new_instance$old_instance

  • $new_instance là một mảng chứa các thiết lập mới (của instance này trong widget) mà chỉ được nhập vào bởi người dùng thông qua các form từ back-end mà chúng tôi định nghịa trong hàm form().
  • $old_settings là một mảng chứa các thiết lập cũ. Đây là những giá trị mà hiện đang được lưu trữ trong cơ sở dữ liệu.

Hàm update() trả về một mảng gồm các thiết lập để lựu lại hoặc trả về false để hủy bỏ lưu.

Trong đoạn code ở trên, chúng tôi gán $old_instance vào biến $instance và thay thế các phím tiêu đề và thông báo với các giá trị từ $new_instance. Bằng cách trả lại mảng mới và đã cập nhật, chúng tôi cập nhật một cách hiệu quả các thiết lập cho widget.

Hàm strip_tags() xoá bỏ các thẻ HTML và PHP khỏi một string được truyền đến nó. Chúng tôi thêm vào hàm này để tránh tình huống khi mà người sử dụng giao diện của bạn không đóng các thẻ (tags) đã nhập thông qua form của back-endi, dẫn đến việc trang web của bạn bị phá vỡ (không suôn sẻ hiển thị được).

Định nghĩa cho Front-End

Hàm widget() chịu trách nhiệm cho việc hiển thị của widget ở front-end. Nó cần hai tham số – $args$instance.

$args là một mảng truyền vào hàm register_sidebar() khi định nghĩa ở sidebar hoặc khu vực được tiện ích hoá ở chỗ chúng ta đặt các widget. Nó được tìm thấy trong file functions.php của bạn. Dưới đây là một ví dụ về việc khai báo register_sidebar()

Sample register_widget declaration

Các mảng chứa định nghĩa về các thẻ đóng và mở cho chính widget đó và cho tiêu đề của widget.

$instance là một mảng chứa các thiết lập cho giá trị cụ thể của widget. Các thiết lập này sẽ có được từ cơ sở dữ liệu.

Chúng tôi tận dụng các thẻ đã đề cập ở trên trong đoạn code cuối cùng của widget như dưới đây:


Trong đoạn code ở trên, chúng tôi cuối cùng đã đến phần code cho front-end của widget. Phụ tùng của chúng tôi chỉ đơn giản hiển thị một tiêu đề và một số thông điệp tùy ý (văn bản). Phần code thực hiện chính xác việc đó và bao trùm widget đó và tiêu đề của nó  bên trong các thẻ đóng và mở được định nghĩa trong functions.php cho khu vực cụ thể của widget (sidebar), nơi đặt widget đó.

Chúng tôi giới thiệu hàm extract() mà một số người có thể không quá quen thuộc. Hàm này phải cần một mảng kết hợp và trả về các key như là các biến số. Nó cho phép chúng tôi in ra $before_widget thay vì $args['before_widget'], do đó, chỉ đơn giản hoá code của chúng ta một chút.

Kết quả cuối cùng trên một trang web thực sự sẽ trông giống như thế này:

Our text widget on an actual site

Đăng ký Widget

Widget phải được đăng ký với WordPress sau khi nó được định nghĩa để nó hoạt động được trong bảng điều khiển của widget trong bảng điều khiển WordPress của chúng ta.

Toàn bộ code

Để mọi thứ đơn giản cho người dùng những widget của chúng tôi, chúng tôi sẽ widget code trong plugin WordPress để nó dễ dàng cài đặt.

Điều này cũng sẽ cho phép chúng tôi lưu tất cả code chúng tôi sẽ tạo ra xuyên suốt loạt bài trong một file duy nhất.

Đây là toàn bộ code:


Tổng Kết

Trong hướng dẫn này, chúng tôi đã giới thiệu loạt bài - Tạo các widget WordPress của riêng bạn bằng cách sử dụng các API khác nhau. Chúng ta đã đào sâu hơn về chúng là gì, cách họ hoạt động và làm thế nào để tạo ra nó.

Mục đích của hướng dẫn này là mang đến phần giới thiệu kỹ lưỡng cho Widgets API và cung cấp một widget cơ bản từ đó các widget khác trong loạt này có thể được tạo ra.

Trong phần tiếp theo của loạt bài, chúng tôi sẽ tạo một tiện ích bài đăng có liên quan. Trong thời gian chờ đợi, vui lòng để lại bất kỳ câu hỏi hoặc nhận xét nào ở form bên dưới.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.