Tạo các hộp meta tùy chỉnh cực kỳ đơn giản, ít nhất là khi bạn đã tạo hộp đầu tiên của mình bằng cách sử dụng các công cụ được đưa vào mã lõi của WordPress. Trong hướng dẫn này, tôi sẽ hướng dẫn bạn mọi thứ bạn cần biết về hộp meta - Tạo hộp meta
- Sử dụng hộp meta với bất kỳ loại bài đăng nào
- Xử lý xác thực dữ liệu
- Lưu dữ liệu meta tùy chỉnh
- Truy xuất dữ liệu meta tùy chỉnh ở giao diện người dùng
Ghi chú. Khi tôi sử dụng thuật ngữ “bài đăng” trong suốt hướng dẫn này, tôi đang đề cập đến một bài đăng thuộc bất kỳ loại bài đăng nào, không chỉ loại bài đăng blog mặc định đi kèm với WordPress Hộp Meta Post là gì?Hộp meta bài đăng là hộp có thể kéo được hiển thị trên màn hình chỉnh sửa bài đăng. Mục đích của nó là cho phép người dùng chọn hoặc nhập thông tin ngoài nội dung chính của bài đăng. Thông tin này phải liên quan đến bài đăng theo một cách nào đó Nói chung, hai loại dữ liệu được nhập vào hộp meta - Siêu dữ liệu (tôi. e. trường tùy chỉnh),
- thuật ngữ phân loại
Tất nhiên, có những cách sử dụng khác, nhưng hai cách đó là phổ biến nhất. Với mục đích của hướng dẫn này, bạn sẽ học cách phát triển các hộp meta xử lý siêu dữ liệu bài đăng tùy chỉnh Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓ Nâng cao kỹ năng UX của bạn với Khóa học video về mẫu thiết kế giao diện thông minh, thư viện video 8h của Vitaly Friedman. Với hàng trăm ví dụ thực tế, hướng dẫn thiết kế và danh sách kiểm tra UX. Kiểm tra bản xem trước miễn phí (video miễn phí, 15 phút) Chuyển đến khóa học video UX ↬Siêu dữ liệu bài đăng là gì?Siêu dữ liệu bài đăng là dữ liệu được lưu trong bảng /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
7 trong cơ sở dữ liệu. Mỗi mục nhập được lưu dưới dạng bốn trường trong bảng này/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
0. ID duy nhất cho siêu dữ liệu cụ thể này/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
1. ID bài đăng siêu dữ liệu này được đính kèm vào/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
2. Một khóa được sử dụng để xác định dữ liệu (bạn sẽ làm việc với điều này thường xuyên)/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
3. Giá trị của siêu dữ liệu
Trong ảnh chụp màn hình sau, bạn có thể thấy nó trông như thế nào trong cơ sở dữ liệu Khi bạn đi thẳng vào nó, siêu dữ liệu chỉ là các cặp khóa/giá trị được lưu cho một bài đăng cụ thể. Điều này cho phép bạn thêm tất cả các loại dữ liệu tùy chỉnh vào bài đăng của mình. Nó đặc biệt hữu ích khi bạn đang phát triển các loại bài đăng tùy chỉnh Giới hạn duy nhất là trí tưởng tượng của bạn Ghi chú. Một điều cần lưu ý là một khóa meta có thể có nhiều giá trị meta. Đây không phải là một cách sử dụng phổ biến, nhưng nó có thể cực kỳ mạnh mẽ Làm việc với siêu dữ liệu bài đăngĐến bây giờ, có lẽ bạn đang muốn xây dựng một số hộp meta tùy chỉnh. Tuy nhiên, để hiểu hộp meta tùy chỉnh hữu ích như thế nào, bạn phải hiểu cách thêm, cập nhật, xóa và nhận siêu dữ liệu bài đăng Tôi có thể viết một cuốn sách về nhiều cách khác nhau để sử dụng siêu dữ liệu, nhưng đó không phải là mục đích chính của hướng dẫn này. Bạn có thể sử dụng các liên kết sau để tìm hiểu cách hoạt động của các chức năng meta bài đăng trong WordPress nếu bạn không quen với chúng - add_post_meta()”). Thêm siêu dữ liệu bài đăng
- update_post_meta()”). Cập nhật siêu dữ liệu bài đăng
- xóa_post_meta()”). Xóa siêu dữ liệu bài đăng
- get_post_meta()”). Truy xuất siêu dữ liệu bài đăng
Phần còn lại của hướng dẫn này giả định rằng ít nhất bạn đã quen thuộc với cách các chức năng này hoạt động thiết lậpTrước khi xây dựng hộp meta, bạn phải có một số ý tưởng về loại siêu dữ liệu bạn muốn sử dụng. Hướng dẫn này sẽ tập trung vào việc xây dựng một hộp meta lưu một lớp CSS bài đăng tùy chỉnh, lớp này có thể được sử dụng để tạo kiểu cho bài đăng Tôi sẽ bắt đầu bằng cách hướng dẫn bạn phát triển mã tùy chỉnh để thực hiện một số điều cực kỳ đơn giản - Thêm một hộp đầu vào để bạn thêm một lớp bài đăng tùy chỉnh (hộp meta)
- Lưu lớp bài đăng cho khóa meta
/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
4 - Lọc móc
/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
5 để thêm lớp bài đăng tùy chỉnh của bạn
Bạn có thể làm nhiều việc phức tạp hơn với hộp meta, nhưng bạn cần học những điều cơ bản trước Tất cả mã PHP trong các phần sau sẽ đi vào tệp plugin tùy chỉnh của bạn hoặc các chức năng của chủ đề của bạn. tập tin php Bây giờ bạn đã biết mình đang xây dựng cái gì, đã đến lúc bắt đầu đi sâu vào một số mã. Hai đoạn mã đầu tiên trong phần này của hướng dẫn chủ yếu là về thiết lập mọi thứ cho chức năng hộp meta Vì bạn chỉ muốn hộp meta bài đăng của mình xuất hiện trên màn hình chỉnh sửa bài đăng trong quản trị viên, nên bạn sẽ sử dụng móc nối /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
6 và /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
7 để khởi tạo mã hộp meta của mình________số 8 Hầu hết các nhà phát triển WordPress đều đã quen thuộc với cách thức hoạt động của hook, vì vậy đây không phải là điều gì mới mẻ đối với bạn. Đoạn mã trên cho WordPress biết rằng bạn muốn kích hoạt chức năng /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
8 trên màn hình trình chỉnh sửa bài đăng. Bước tiếp theo là tạo chức năng nàyĐoạn mã sau sẽ thêm chức năng tạo meta box của bạn vào hook /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
9. WordPress cung cấp hook này để thêm các hộp meta/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
Bây giờ, bạn có thể vào nội dung thú vị Trong đoạn mã trên, bạn đã thêm hàm /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
20 vào móc /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
9. Mục đích của chức năng này là để thêm các hộp meta bài đăngTrong ví dụ tiếp theo, bạn sẽ tạo một hộp meta duy nhất bằng hàm add_meta_box() WordPress. Tuy nhiên, bạn có thể thêm bao nhiêu hộp meta tùy thích vào thời điểm này khi phát triển dự án của riêng mình Trước khi tiếp tục, hãy xem hàm /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
22/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
2/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
23. Đây là ID duy nhất được gán cho hộp meta của bạn. Nó phải có một tiền tố duy nhất và là HTML hợp lệ/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
24. Tiêu đề của hộp meta. Nhớ quốc tế hóa cái này cho người dịch/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
25. Hàm gọi lại hiển thị đầu ra của hộp meta của bạn/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
26. Màn hình hoặc các màn hình hiển thị hộp (chẳng hạn như loại bài đăng, /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
27 hoặc /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
28). Chấp nhận một ID màn hình, đối tượng /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
29 hoặc mảng ID màn hình. Mặc định là màn hình hiện tại/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
30. Hộp meta sẽ được hiển thị ở đâu trên trang. Các tùy chọn có sẵn là /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
31, /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
32 và /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
33/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
34. Hộp meta nên được ưu tiên cao/thấp như thế nào. Các tùy chọn có sẵn là /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
35, /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
36, /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
37 và /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
38/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
39. Một mảng các đối số tùy chỉnh mà bạn có thể chuyển đến hàm /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
25 của mình dưới dạng tham số thứ hai
Đoạn mã sau sẽ thêm hộp meta lớp bài đăng vào màn hình chỉnh sửa bài đăng /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
3Tuy nhiên, bạn vẫn cần hiển thị HTML của hộp meta. Đó là lúc hàm /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
51 xuất hiện (tham số /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
25 từ phía trên)/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
5Chức năng trên làm gì là hiển thị đầu ra HTML cho hộp meta của bạn. Nó hiển thị đầu vào nonce ẩn (bạn có thể đọc thêm về nonce trên WordPress Codex). Sau đó, nó sẽ hiển thị một yếu tố đầu vào để thêm một lớp bài đăng tùy chỉnh cũng như xuất lớp tùy chỉnh nếu một lớp đã được nhập Tại thời điểm này, bạn sẽ có một hộp meta đẹp mắt trên màn hình chỉnh sửa bài đăng của mình. Nó sẽ trông giống như ảnh chụp màn hình sau Mặc dù vậy, hộp meta chưa thực sự làm bất cứ điều gì. Ví dụ: nó sẽ không lưu lớp bài đăng tùy chỉnh của bạn. Đó là nội dung của phần tiếp theo của hướng dẫn này Bây giờ bạn đã học cách tạo hộp meta, đã đến lúc tìm hiểu cách lưu siêu dữ liệu bài đăng Hãy nhớ rằng chức năng /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
53 mà bạn đã tạo trước đó? . Bạn sẽ muốn thêm đoạn mã sau vào nó/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
9Vì vậy, chức năng đó thực sự sẽ trông như thế này /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
0Mã mới mà bạn đang thêm cho WordPress biết rằng bạn muốn chạy một chức năng tùy chỉnh trên hook /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
54. Chức năng này sẽ lưu, cập nhật hoặc xóa meta bài đăng tùy chỉnh của bạnKhi lưu meta bài đăng, chức năng của bạn cần chạy qua một số quy trình Tôi đã để chức năng sau hơi chung chung để bạn có một chút linh hoạt khi phát triển các hộp meta của riêng mình. Đây là đoạn mã cuối cùng mà bạn sẽ cần lưu siêu dữ liệu cho hộp meta lớp bài đăng tùy chỉnh của mình /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
3Tại thời điểm này, bạn có thể lưu, cập nhật hoặc xóa dữ liệu trong hộp meta “Lớp đăng bài” mà bạn đã tạo từ màn hình chỉnh sửa bài đăng Vì vậy, bạn có một hộp meta bài đăng tùy chỉnh hoạt động, nhưng bạn vẫn cần phải làm gì đó với siêu dữ liệu mà nó lưu. Đó là điểm tạo ra các hộp meta. Việc cần làm với siêu dữ liệu của bạn sẽ thay đổi từ dự án này sang dự án khác, vì vậy đây không phải là điều tôi có thể trả lời cho bạn. Tuy nhiên, bạn sẽ học cách sử dụng siêu dữ liệu từ hộp meta mà bạn đã tạo Vì bạn đang xây dựng một hộp meta cho phép người dùng nhập một lớp bài đăng tùy chỉnh, bạn sẽ cần lọc móc nối /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
5 của WordPress để lớp tùy chỉnh xuất hiện cùng với các lớp bài đăng khácHãy nhớ rằng chức năng /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
57 từ nhiều phần trước đó trong hướng dẫn? Đoạn mã sau thêm lớp bài đăng tùy chỉnh (nếu có) từ hộp meta tùy chỉnh của bạn /* Meta box setup function. */
function smashing_post_meta_boxes_setup() {
/* Add meta boxes on the 'add_meta_boxes' hook. */
add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}
6Nếu bạn xem mã nguồn của trang nơi bài đăng này được hiển thị ở mặt trước của trang web, bạn sẽ thấy một cái gì đó giống như ảnh chụp màn hình sau Khá mát mẻ, phải không? Bảo vệMột điều bạn cần lưu ý khi cứu dữ liệu là bảo mật. Bảo mật là một chủ đề dài và nằm ngoài phạm vi của bài viết này. Tuy nhiên, tôi nghĩ tốt nhất là ít nhất nên nhắc nhở bạn giữ an ninh trong tâm trí Bạn đã được cung cấp một liên kết giải thích các nonce trước đó trong hướng dẫn này. Tài nguyên khác mà tôi muốn cung cấp cho bạn là hướng dẫn WordPress Codex về xác thực dữ liệu. Tài liệu này sẽ là người bạn tốt nhất của bạn khi tìm hiểu cách lưu siêu dữ liệu bài đăng và sẽ cung cấp cho bạn các công cụ bạn cần để giữ an toàn cho plugin/chủ đề của mình Điểm thưởng cho bất kỳ ai có thể đặt tên cho tất cả các biện pháp bảo mật được sử dụng trong hướng dẫn này Khi bạn đã sao chép, dán và kiểm tra các đoạn mã từ hướng dẫn này, tôi khuyến khích bạn thử một thứ thậm chí còn phức tạp hơn. Nếu bạn thực sự muốn xem sức mạnh của các hộp meta và siêu dữ liệu bài đăng, hãy thử làm điều gì đó với một khóa meta duy nhất và nhiều giá trị meta cho khóa đó (việc này rất khó) Tôi hy vọng bạn thích hướng dẫn này. Vui lòng đăng câu hỏi về cách tạo hộp meta trong phần bình luận bên dưới
Siêu hộp. Khi bạn mở một bài đăng WordPress để chỉnh sửa nó, bạn sẽ thấy trang được chia thành các phần khác nhau (nhiều phần trong số đó nằm ở trong thanh bên ở phía bên tay phải). All of these sections are technically 'meta boxes'.
Chuyển đổi chuỗi màn hình thành đối tượng màn hình . add_meta_box() wp-admin/gồm/mẫu. php. Thêm một hộp meta vào một hoặc nhiều màn hình.
Hộp Meta là gì? . Trình chỉnh sửa, Xuất bản, Danh mục, Thẻ, v.v. When a user edits a post, the edit screen is composed of several default boxes: Editor, Publish, Categories, Tags, etc . Những hộp này là hộp meta. Các plugin có thể thêm các hộp meta tùy chỉnh vào màn hình chỉnh sửa của bất kỳ loại bài đăng nào.
Làm cách nào để thêm thông tin sản phẩm khác vào WooC Commerce Meta Box? . Chuyển đến trình chỉnh sửa sản phẩm và chọn tab “Dữ liệu sản phẩm” Tìm Hộp meta WooC Commerce ở bên phải màn hình Nhập văn bản, liên kết, hình ảnh mong muốn của bạn, v.v. vào Hộp Meta WooC Commerce Nhấp vào “Cập nhật” để lưu các thay đổi của bạn | 
