Contact Form 7 là một trong những plugin chính của WordPress để tạo biểu mẫu. Nó có hơn năm triệu lượt cài đặt đang hoạt động, được xếp hạng bốn sao. Trong số các xếp hạng hơn một nghìn là 5 sao. Nó đi kèm với tài liệu tốt
Tuy nhiên, điều đó không có nghĩa là nó hoàn hảo. Một số người có thể nhầm lẫn với giao diện người dùng của họ. Theo tôi, Contact Form 7 nhắm mục tiêu đến các nhà phát triển hơn một chút so với những người không phải là nhà phát triển
Do đó, tùy thuộc vào từng nhà phát triển để tối đa hóa lợi ích mà bạn có thể nhận được từ plugin
Tôi đã làm việc trên một dự án rất gần đây. Một ngày nọ, khách hàng của tôi hỏi tôi "Chúng tôi có thể quản lý các tùy chọn của hộp kiểm theo cách có thể quản lý được không?"
Nếu bạn muốn thực hiện mười tùy chọn cho một trong các nhóm hộp kiểm, thẻ biểu mẫu trong Biểu mẫu liên hệ 7 sẽ giống như
Nhưng họ muốn làm
Contact Form 7 tốt nhưng nó có một vài nhược điểm khi thiết lập các tùy chọn theo cách truyền thống
- Khi số lượng tùy chọn là rất lớn, nó sẽ không thể duy trì được
- Đôi khi các tùy chọn được yêu thích đối với dữ liệu được lưu trữ ở nơi khác trong cơ sở dữ liệu, như wp_posts
- Chỉnh sửa sai các tùy chọn có thể làm hỏng HTML, sau đó là toàn bộ biểu mẫu
Bài viết này chỉ cho bạn cách tạo động các tùy chọn cho hộp kiểm, nút radio và chọn trong Biểu mẫu liên hệ 7 ở phía máy chủ bằng cách sử dụng bộ lọc wpcf7_form_tag_data_option
Căn bản
Những người không phải là nhà phát triển có thể khó thực hiện theo quy trình tiếp theo, nhưng nếu bạn là nhà phát triển, điều đó thật dễ dàng
Nhãn
Đầu tiên, để tạo động các tùy chọn, bạn thêm dữ liệu. data_type vào thẻ biểu mẫu trong trình chỉnh sửa biểu mẫu. Ví dụ: nếu bạn muốn tùy chọn sản phẩm, thẻ sẽ là
[checkbox product data:products]Trong Listo, các tên khóa được định nghĩa ở dạng số nhiều. Vì vậy, tôi nghĩ tốt hơn hết là chúng ta nên tuân theo thông lệ này khi xác định các loại dữ liệu của mình
wpcf7_form_tag_data_option
Sau khi đưa dữ liệu. data_type cho trường đầu vào, chúng ta phải thêm mã để phân tích các loại dữ liệu đó
Bộ lọc wpcf7_form_tag_data_option được gọi mỗi khi bất kỳ [hộp kiểm], [radio] và [select] nào được xử lý trong khi the_content[] hiển thị mã ngắn
Cách sử dụng bộ lọc như sau
function option_callback[$data, $options, $args] {
…
return $data;
}
add_filter['wpcf7_form_tag_data_option' 'option_callback', 10, 3];Có ba đối số được chuyển đến cuộc gọi lại
- dữ liệu $. Luôn rỗng
- tùy chọn $. Mảng giá trị được gắn với dữ liệu. trong trình chỉnh sửa biểu mẫu
- $args. Chuỗi luôn rỗng
Bạn có thể thắc mắc tại sao $data và $args lại rỗng và trống rỗng, điều này chẳng có ý nghĩa gì cả. Tôi cũng không biết lý do nhưng nếu bạn thực sự tò mò về nó, hãy xem bao gồm/thẻ biểu mẫu. php và các mô-đun/danh sách. php. Các thông số này là để cập nhật trong tương lai, tôi nghĩ vậy
Mã số
Biểu mẫu và mã sau đây sẽ tạo các tùy chọn cho ba trường được xác định trong các hàm. php
Biểu mẫu[checkbox checkbox use_label_element data:checkbox_options]
[radio radio use_label_element default:1 data:radio_options data:checkbox_options "Option A" "Option B" "Option C"]
[select select include_blank data:select_options]add_filter['wpcf7_form_tag_data_option', function[$data, $options, $args] {
$data = [];
foreach [$options as $option] {
if [$option === 'checkbox_options'] {
$data = array_merge[$data, ['Checkbox Option A', 'Checkbox Option B']];
}
if [$option === 'radio_options'] {
$data = array_merge[$data, ['Radio Option A', 'Radio Option B']];
}
if [$option === 'select_options'] {
$data = array_merge[$data, ['Select Option A', 'Select Option B']];
}
}
return $data;
}, 10, 3];Điều này sẽ làm cho HTML tiếp theo
Bạn có thể thêm nhiều dữ liệu vào một trường. Các tùy chọn dữ liệu đó sẽ được thêm vào sau các tùy chọn được xác định trong trình chỉnh sửa biểu mẫu
Thông thường, bạn xác định một cuộc gọi lại trước khi gọi add_filter[], đặt tên cho nó. Tôi bỏ qua phong tục này vì mục đích đơn giản. Tôi tin rằng trong nhiều trường hợp lập trình trong thế giới thực, các nhà phát triển chủ đề sẽ không phải xác định các hàm gọi lại cho các bộ lọc và hành động vì nhiều lần các lệnh gọi lại đó chỉ được sử dụng một lần và sẽ không bao giờ được sử dụng lại. Chuyển trực tiếp chức năng gọi lại tới các bộ lọc và hành động sẽ thực hiện công việc và dẫn đến mã ngắn hơn
Nhận bài viết mới nhất
Đến thời điểm này, bạn chỉ có thể tạo các tùy chọn động được viết trong cơ sở mã, có khả năng ứng dụng hạn chế. Hiểu cách wpcf7_form_tag_data_option hoạt động, bước tiếp theo là lấy một số dữ liệu được lưu trữ trong cơ sở dữ liệu. WordPress chủ yếu để viết blog. Thật hữu ích khi hiểu cách tải các bài đăng mới nhất, sau đó hiển thị chúng dưới dạng các tùy chọn trong biểu mẫu
Hãy gọi kiểu dữ liệu latest_posts. WordPress có một chức năng được xác định trước tốt để nhận các bài đăng mới nhất get_posts[]
Thẻ biểu mẫu trong trình chỉnh sửa và logic trong bộ lọc sẽ là
Biểu mẫu[checkbox post_title use_label_element data:latest_posts]add_filter['wpcf7_form_tag_data_option', function[$data, $options, $args] {
$data = [];
foreach [$options as $option] {
…
if [$option === 'latest_posts'] {
$titles = array_map[function[$post] {
return $post->post_title;
}, get_posts[]];
$data = array_merge[$data, $titles];
}
}
return $data;
}, 10, 3];Điều này sẽ làm cho HTML sau
Vượt qua ['post_type' => 'custom_post_type'] bạn có thể nhận bất kỳ loại bài đăng nào có thể kiểm tra và chọn trong biểu mẫu. Nếu bạn thay thế get_posts[] bằng get_terms[], khả năng tạo động sẽ là vô hạn, thẻ, màu sắc, kích thước, thể loại, bạn đặt tên cho nó
Tiếp theo
Là một nội dung bổ sung, tôi muốn chỉ cho bạn cách tích hợp phương pháp tạo tùy chọn động này với Trường tùy chỉnh nâng cao, hệ thống quản lý trường meta phổ biến nhất trong WordPress