Cách tạo Plugin Widget cho WordPress

WordPress là một Hệ thống quản lý nội dung tuyệt vời với nhiều tính năng tuyệt vời như widget. Trong hướng dẫn này, tôi sẽ giải thích cho bạn cách tạo các widget của riêng bạn trong một plugin nhỏ. Bài đăng này sẽ đề cập đến một số điểm bổ sung mà bạn cần hiểu trước khi tự tạo widget. Chúng ta đi đây!


Bước 1: Tạo Plugin Widget của bạn

Gần đây tôi đã tạo một plugin có tên là Freelancer Freelancer Widgets Bundle và một số người hỏi tôi làm thế nào để tạo một plugin như vậy, vì vậy tôi quyết định viết bài này. Bước đầu tiên là tạo ra các plugin. Và như bạn thấy, đó là phần khó nhất. Một plugin là mã bổ sung được thêm vào WordPress khi bạn kích hoạt nó. WordPress tạo một vòng lặp thông qua một thư mục để lấy tất cả các plugin có sẵn và liệt kê chúng trong văn phòng hỗ trợ. Để tạo plugin của bạn, bạn sẽ cần một trình soạn thảo như Coda (Mac) hoặc Dreamweaver (PC & Mac). Tôi khuyên bạn nên tạo plugin của mình trong bản cài đặt cục bộ của WordPress, làm cho nó trên máy chủ trực tiếp có thể gây ra một số rắc rối nếu bạn gặp lỗi. Vì vậy, xin vui lòng, chờ để kiểm tra plugin của chúng tôi trước khi đặt nó vào máy chủ của bạn.

Mở ngay thư mục wp-content / plugin. Đây là nơi bạn sẽ thêm plugin của bạn. Tạo một thư mục mới và gọi nó là tiện ích bổ trợ của Haiti (plugin thực sự, tên này có thể là bất cứ thứ gì bạn muốn). Ngay cả khi plugin của chúng tôi sẽ chỉ có một tệp duy nhất, nó vẫn luôn tốt hơn để sử dụng một thư mục cho mỗi plugin. Trong thư mục của bạn, hãy tạo một tệp mới có tên là widget widget-plugin.php. (Tên này cũng có thể được thay đổi) và mở nó. Bây giờ chúng tôi sắp thêm các dòng mã đầu tiên của chúng tôi. Định nghĩa của một plugin trong WordPress tuân theo một số quy tắc mà bạn có thể đọc ở đây trên codex. Đây là cách WordPress định nghĩa một plugin:

Vì vậy, chúng tôi phải sửa đổi mã này để phù hợp với nhu cầu của chúng tôi:

Lưu tập tin của bạn. Bằng cách chỉ thêm mã vào tệp widget-plugin.php, chúng tôi đã tạo ra một plugin! Chà, bây giờ plugin này không làm gì cả, nhưng WordPress nhận ra nó. Để chắc chắn rằng nó có trường hợp khác, hãy quản trị và vào menu Menu Plugins. Nếu plugin của bạn xuất hiện trong danh sách plugin bạn giỏi, nếu không, hãy đảm bảo bạn đã làm theo hướng dẫn của tôi và thử lại. Bây giờ bạn có thể kích hoạt plugin.

Bước 2: Tạo Widget

Bây giờ chúng ta sẽ tạo ra các widget chính nó. Tiện ích này sẽ là một lớp PHP mở rộng lớp WordPress cốt lõi WP_Wget. Về cơ bản, widget của chúng tôi sẽ được định nghĩa theo cách này:

// Lớp widget
lớp My_Custom_Widget mở rộng WP_Widget {

// Trình xây dựng chính
hàm công khai __construct () {
/ * ... * /
}

// Biểu mẫu widget (cho phần phụ trợ)
biểu mẫu chức năng công cộng ($ dụ) {
/ * ... * /
}

// Cập nhật cài đặt widget
cập nhật chức năng công cộng ($ new_instance, $ old_instance) {
/ * ... * /
}

// Hiển thị widget
tiện ích chức năng công cộng ($ args, $ dụ) {
/ * ... * /
}

}

// Đăng ký widget
hàm my_register_custom_widget () {
register_widget ('My_Custom_Widget');
}
add_action ('widget_init', 'my_register_custom_widget');

Mã này cung cấp cho WordPress tất cả thông tin mà hệ thống cần để có thể sử dụng tiện ích con:

  1. Các constructor, để bắt đầu các widget
  2. Các hàm form () để tạo biểu mẫu widget trong quản trị
  3. Các Hàm update (), để lưu dữ liệu widget trong phiên bản
  4. Và hàm widget () để hiển thị nội dung widget trên giao diện người dùng

1 - Nhà xây dựng

Hàm tạo là một phần của mã xác định tên widget và các đối số chính, bên dưới là một ví dụ về giao diện của nó.

// Trình xây dựng chính
hàm công khai __construct () {
cha mẹ :: __ xây dựng (
'my_custom_widget',
__ ('Tiện ích tùy chỉnh của tôi', 'text_domain'),
mảng(
'custom_selective_Vfresh' => true,
)
);
}

Vui lòng không sử dụng __ () xung quanh tên widget, chức năng này được WordPress sử dụng để dịch. Tôi thực sự khuyên bạn nên luôn luôn sử dụng những chức năng này, để làm cho chủ đề của bạn hoàn toàn có thể dịch. Và việc sử dụng tham số ‘custom_selective_Vfresh, cho phép tiện ích được làm mới trong Ngoại hình> Tùy chỉnh khi chỉnh sửa widget, thay vì làm mới toàn bộ trang, chỉ có widget được làm mới khi thực hiện thay đổi.

2 - Hàm biểu mẫu ()

Chức năng này là chức năng tạo cài đặt biểu mẫu tiện ích trong khu vực quản trị viên WordPress (trong Giao diện> Tiện ích hoặc Giao diện> Tùy chỉnh> Tiện ích). Đây là bạn sẽ nhập dữ liệu của bạn để được hiển thị trên trang web. Vì vậy, tôi sẽ giải thích cách bạn có thể thêm các trường văn bản, vùng văn bản, chọn hộp và hộp kiểm vào cài đặt biểu mẫu tiện ích con của bạn.

// Biểu mẫu widget (cho phần phụ trợ)
biểu mẫu chức năng công cộng ($ dụ) {

// Đặt mặc định widget
$ mặc định = mảng (
'tiêu đề' => '',
'văn bản' => '',
'văn bản' => '',
'hộp kiểm' => '',
'chọn' => '',
);

// Phân tích cài đặt hiện tại với mặc định
trích xuất (wp_parse_args ((mảng) $ dụ, $ mặc định)); ?>


/>

Mã này chỉ đơn giản là thêm 5 trường vào widget (Tiêu đề, văn bản, textarea, chọn và hộp kiểm). Vì vậy, trước tiên, bạn xác định mặc định cho tiện ích của mình, sau đó chức năng tiếp theo sẽ phân tích các cài đặt hiện tại được xác định / lưu cho tiện ích của bạn với các mặc định (vì vậy mọi cài đặt không tồn tại sẽ trở về mặc định, như khi bạn thêm tiện ích vào lần đầu tiên thanh bên của bạn). Và cuối cùng là html cho từng lĩnh vực. Lưu ý việc sử dụng esc_attr () khi thêm các trường biểu mẫu, điều này được thực hiện vì lý do bảo mật. Bất cứ khi nào bạn lặp lại một biến do người dùng xác định trên trang web của mình, bạn nên đảm bảo rằng nó đã được khử trùng lần đầu tiên.

3 - Hàm update ()

Hàm update () thực sự đơn giản. Khi các nhà phát triển cốt lõi WordPress đã thêm API tiện ích thực sự mạnh mẽ, chúng tôi chỉ cần thêm mã này để cập nhật từng trường:

// Cập nhật cài đặt widget
cập nhật chức năng công cộng ($ new_instance, $ old_instance) {
$ dụ = $ old_instance;
$ dụ ['title'] = isset ($ new_instance ['title'])? wp_strip_all_tags ($ new_instance ['title']): '';
$ dụ ['text'] = isset ($ new_instance ['text'])? wp_strip_all_tags ($ new_instance ['văn bản']): '';
$ dụ ['textarea'] = isset ($ new_instance ['textarea'])? wp_kses_post ($ new_instance ['textarea']): '';
$ dụ ['hộp kiểm'] = isset ($ new_instance ['hộp kiểm'])? 1: sai;
$ dụ ['select'] = isset ($ new_instance ['select'])? wp_strip_all_tags ($ new_instance ['select']): '';
trả về $ dụ;
}

Như bạn có thể thấy tất cả những gì chúng ta phải làm là kiểm tra từng cài đặt và nếu nó không trống thì hãy lưu nó vào cơ sở dữ liệu. Lưu ý việc sử dụng các hàm wp_strip_all_tags () và wp_kses_post (), chúng được sử dụng để vệ sinh dữ liệu trước khi nó được thêm vào cơ sở dữ liệu. Bất cứ khi nào bạn chèn bất kỳ người dùng nào gửi nội dung vào cơ sở dữ liệu, bạn cần chắc chắn rằng nó không có mã độc hại. Hàm đầu tiên wp_strip_all_tags loại bỏ mọi thứ trừ văn bản cơ bản để bạn có thể sử dụng nó cho bất kỳ trường nào có giá trị cuối là một chuỗi và hàm thứ hai wp_kses_post () là cùng một hàm được sử dụng cho nội dung bài đăng và nó loại bỏ tất cả các thẻ bên cạnh các liên kết cơ bản như html , nhịp, div, hình ảnh, vv.

4 - Hàm widget ()

Hàm widget () là hàm sẽ xuất nội dung trên trang web. Nó có những gì khách truy cập của bạn sẽ nhìn thấy. Chức năng này có thể được tùy chỉnh để bao gồm các lớp CSS và các thẻ cụ thể để phù hợp hoàn hảo với màn hình chủ đề của bạn. Đây là mã (xin vui lòng không phải là mã này có thể được sửa đổi dễ dàng để phù hợp với nhu cầu của bạn):

// Hiển thị widget
tiện ích chức năng công cộng ($ args, $ dụ) {

trích xuất ($ args);

// Kiểm tra các tùy chọn widget
$ title = isset ($ dụ ['title'])? áp dụng_filters ('widget_title', $ dụ ['title']): '';
$ text = isset ($ dụ ['text'])? $ dụ ['văn bản']: '';
$ textarea = isset ($ dụ ['textarea'])? $ dụ ['textarea']: '';
$ select = isset ($ dụ ['select'])? $ dụ ['select']: '';
$ hộp kiểm =! trống ($ dụ ['hộp kiểm'])? $ dụ ['hộp kiểm']: sai;

// Lõi WordPress trước_ hookget (luôn bao gồm)
echo $ before_widget;

// Hiển thị widget
tiếng vang '
'; // Hiển thị tiêu đề widget nếu được xác định if ($ title) { echo $ before_title. $ tiêu đề. $ after_title; } // Hiển thị trường văn bản if ($ văn bản) { tiếng vang '

'. $ văn bản. '

'; } // Hiển thị trường văn bản if ($ textarea) { tiếng vang '

'. $ văn bản. '

'; } // Hiển thị trường chọn if ($ select) { tiếng vang '

'. $ chọn. '

'; } // Hiển thị một cái gì đó nếu hộp kiểm là đúng if (hộp kiểm $) { tiếng vang '

Một cái gì đó tuyệt vời

'; } tiếng vang '
'; // Lõi WordPress sau móc nối (luôn bao gồm) tiếng vang $ after_widget; }

Mã này không phức tạp, tất cả những gì bạn cần nhớ là kiểm tra xem một biến có được đặt không, nếu bạn don và nếu bạn muốn in nó, bạn sẽ nhận được thông báo lỗi.

Mã Plugin đầy đủ

Bây giờ nếu bạn đã theo dõi chính xác thì plugin của bạn sẽ có đầy đủ chức năng và bạn có thể tùy chỉnh nó để phù hợp với nhu cầu của mình. Nếu bạn không theo dõi hướng dẫn hoặc muốn kiểm tra lại mã, bạn có thể truy cập trang Github để xem mã đầy đủ.

Xem toàn bộ mã trên Github

Phần kết luận

Chúng tôi thấy rằng việc tạo một widget bên trong một plugin rất thú vị, bây giờ bạn phải biết cách tạo một plugin đơn giản chứa một widget với các loại trường khác nhau và bạn đã học cách đi xa hơn một chút bằng cách sử dụng các kỹ thuật nâng cao để tùy chỉnh widget. Xin chúc mừng, bạn đã làm một công việc tuyệt vời!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map