Hướng dẫn tạo widget tự động lưu trong WordPress

1

Chào các bạn, hôm nay 2ndCapricorn’s Blog xin gửi đến các bạn một bài hướng dẫn tạo widget tự động lưu trong WordPress. Bài viết này là một bài viết nâng cao hướng tới độc giả đã biết chút ít về WordPress tuy nhiên mình cũng sẽ cố gắng diễn đạt thật dễ hiểu cho newbie. Với bài hướng dẫn này, bạn sẽ có thể tạo một widget với nhiều option một cách chuyên nghiệp.

Những thứ cần thiết khi bắt đầu đọc và thực hành theo hướng dẫn này:

  • Có hiểu biết về WordPress.
  • Đã tìm hiểu qua cách tạo plugin đơn giản.

Nếu bạn đã có những kiến thức trên rồi thì chúng ta sẽ bắt đầu viết widget:

Bước 1: Khai báo plugin

Để bắt đầu chúng ta sẽ tạo một file tên là sc-auto-save-widget.php  thư mục nằm bên trong thư mục plugins/sc-auto-save-widget  với cấu trúc như sau:

Ở đầu file ta khai báo tên plugin, tác giả, mô tả, phiên bản như sau:

Sau đó tạo ra class  sc_Auto_Save_Widget thừa kế lớp  WP_Widget , đồng thời đăng ký bằng hook widgets_init  luôn:

Bước 2: Thêm các function cơ bản của widget

Bên trong class  sc_Auto_Save_Widget tôi sẽ đặt các function cơ bản của một widget như  form, update, widget code thu được sẽ như sau:

  • Function  sc_Auto_Save_Widget ở trên dùng để khai báo class, mô tả và tên widget.
  • Function  form chứa các thành phần hiển thị trong form widget ở backend.
  • Function  update được gọi khi lưu form widget ở backend.
  • Function  widget chứa các thành phần hiển thị ở frontend.

Bước 3: Chi tiết các function:

Tôi sẽ thêm vào bên trong function  form nội dung như sau:

  • $default chứa các biến cần thiết để thao tác trong form widget ở backend.
  • Ở đoạn code trên tôi tạo ra 1 checkbox gán cho biến  $sc_checkbox và 1 input text gán cho biến  $sc_image chứa đường dẫn ảnh.
  • Hãy chú ý đến đoạn script auto save ở dưới cùng, đó chính là mấu chốt của bài viết này. Đoạn script này sẽ bắt sự kiện các thẻ input thay đổi giá trị, và gọi đến function save vốn được áp dụng cho nút save của mỗi widget.

huong-dan-tao-widget-tu-dong-luu-trong-wordpress2 huong-dan-tao-widget-tu-dong-luu-trong-wordpress-3

Ta tiếp tục viết mã hiển thị cho widget bằng cách viết function widget như sau:

huong-dan-tao-widget-tu-dong-luu-trong-wordpress-4

Ngoài frontend sẽ hiển thị ảnh được lấy từ link bạn nhập vào

Bây giờ hãy active plugin và kéo widget vào 1 sidebar thử, chúc các bạn thành công!

huong-dan-tao-widget-tu-dong-luu-trong-wordpress-1

Link download: link mega

Hướng dẫn tạo widget tự động lưu trong WordPress
5 (100%) 2 votes
Share.

About Author

Hãy để thứ bạn yêu thích trở thành nghề nghiệp của bạn, khi đó công việc sẽ giống như một trò chơi.

  • WordPress(1)
  • Google Plus(0)
  • Facebook(0)

1 Comment

Leave A Reply