Hướng dẫn Meta Boxes

Ngày nay, nhiều người trong chúng ta nghĩ về các Meta Box trong WordPress giống như một thứ gì đó đã lỗi thời. Chà, bạn biết đấy, Gutenberg , Chỉnh sửa toàn bộ trang web và tất cả những thứ đó. Nhưng tôi có thể nói, rằng nó chưa phải là sự thật.

Cho dù Gutenberg trở nên vĩ đại đến đâu, cho dù có bao nhiêu plugin thú vị xuất hiện cho phép bạn quản lý các trường tùy chỉnh, thì việc biết cách tạo metabox từ đầu luôn hữu ích. Ít nhất hãy nhìn vào WooCommerce, loại bài đăng Sản phẩm hoạt động mà không cần Gutenberg ngay bây giờ. Và có thể đối với dự án cụ thể của bạn, bạn sẽ cần một loại bài đăng mà không cần chỉnh sửa trực quan. Đó là nơi mà các hộp meta phát huy tác dụng.

Meta Boxes chính xác là gì? 

Hộp meta là các khối giao diện người dùng trong quản trị viên WordPress cho phép bạn quản lý siêu dữ liệu bài đăng.

Được rồi, siêu dữ liệu là gì?

Mọi loại nội dung trong WordPress như bài đăng, điều khoản, người dùng và nhận xét đều có bảng riêng trong cơ sở dữ liệu WordPress wp_posts, và theo đó wp_terms. Các bảng này nhằm mục đích lưu trữ một số dữ liệu mặc định, như tiêu đề bài đăng và ngày xuất bản cho bài đăng.wp_userswp_comments

Nhưng điều gì sẽ xảy ra nếu bạn cần lưu trữ một thứ gì đó siêu tùy chỉnh? Giống như một tiêu đề SEO cho bài viết hoặc độ tuổi cho người dùng hoặc… giá sản phẩm cho sản phẩm? Câu trả lời là – siêu dữ liệu. WordPress cũng có các bảng cơ sở dữ liệu cụ thể cho điều đó – wp_postmeta,, .wp_termmetawp_usermetawp_commentmeta

Đây là cách nó trông như thế nào trong phpMyAdmin:

data metabox

Và các hộp meta cho phép quản lý dữ liệu này, ví dụ như trong WooCommerce. Bạn có thể thấy _sale_pricegiá trị trong bảng trên giống với giá trị trong trường Giá ưu đãi bên dưới.

woocommerce product metabox

Cách xóa hộp meta mặc định 

Trên mỗi trang chỉnh sửa loại bài đăng, WordPress đã có các hộp meta được xác định trước, nếu bạn mở bất kỳ trang chỉnh sửa bài đăng nào có plugin “Trình chỉnh sửa cổ điển” đang hoạt động, bạn sẽ thấy chúng.

Có hai cách để loại bỏ một metabox mặc định – sử dụng remove_meta_box()chức năng hoặc với sự trợ giúp của remove_post_type_support().

remove_meta_box () 

Đi thẳng vào ví dụ. Giả sử rằng chúng ta phải xóa cả hai metabox – “Page Attributes” cho các trang và “Custom Fields” cho bài đăng. Mã sẽ là:

Tham số đầu tiên của hàm là một ID hộp meta. Cách dễ nhất để tìm ra nó là kiểm tra mã trong trình duyệt của bạn, nhưng chỉ trong một trường hợp ở đây là danh sách các ID hộp meta mặc định.

  • commentstatusdiv – Discussion,
  • slugdiv – Slug,
  • commentsdiv – Comments,
  • postexcerpt – Excerpt,
  • authordiv – Author,
  • revisionsdiv – Revisions,
  • postcustom – Custom Fields,
  • trackbacksdiv – Send Trackbacks,
  • categorydiv – Categories,
  • tagsdiv-post_tag – Tags,
  • {Taxonomy name}div – Any taxonomy,
  • postimagediv – You can not remove Featured image metabox using remove_meta_box() function, use remove_post_type_support() instead,
  • pageparentdiv – Page Attributes,
  • submitdiv – Publish.

Tham số thứ hai của remove_meta_box()hàm là loại bài đăng mà bạn muốn xóa.

remove_post_type_support () 

Hãy thử làm giống như những gì chúng ta đã làm khi sử dụng hàm remove_meta_box () trước đây. Về mặt kỹ thuật remove_post_type_support(), chức năng không loại bỏ một hộp meta, nó vô hiệu hóa một chức năng cụ thể cho một loại bài đăng.

Điều thú vị về remove_post_type_support()cách tiếp cận là nó hoạt động cho cả Gutenberg và Classic Editor.

Như bạn có thể thấy mã tương tự.

Tôi nghĩ rằng cách chính xác nhất để loại bỏ các hộp meta WordPress mặc định là sử remove_post_type_support()dụng hàm, vì nó thực sự tắt một tính năng cụ thể cho một loại bài đăng cụ thể và remove_meta_box()hàm chỉ loại bỏ một hộp meta.

Tính năng / Hộp Meta:

  • thumbnail — Featured Image metabox
  • author — Author metabox
  • excerpt — Excerpt metabox
  • trackbacks — Send trackbacks metabox
  • custom-fields — Custom Fields metabox
  • comments — Comments metabox
  • revisions — Revisions metabox
  • page-attributes — Page Attributes metabox (Gutenberg only)

Bạn cũng có thể xóa các khu vực như trình chỉnh sửa tiêu đề hoặc nội dung:

  • title
  • editor

unregister_taxonomy_for_object_type () 

Bạn có thể nhận thấy rằng trong chương trước không có đề cập đến việc loại bỏ các hộp meta phân loại. Đó là bởi vì không có cách nào để sử dụng remove_post_type_support()hàm cho các đơn vị phân loại cho dù nó có phải là một đơn vị phân loại tùy chỉnh hay không.

Nhưng có một cách khác:

Xin lưu ý rằng cách tiếp cận này hoàn toàn ngắt kết nối một phân loại cụ thể khỏi một loại bài đăng. Nếu bạn chỉ muốn xóa metabox của nó, tôi thực sự khuyên bạn nên sử dụng phương pháp này .

Thêm hộp Meta tùy chỉnh 

Cuối cùng chúng ta đã đến phần của hướng dẫn, nơi tôi sẽ chỉ cho bạn cách tạo meta box trong WordPress, đây là ảnh chụp màn hình về những gì chúng ta sẽ tạo:

Thêm hộp Meta tùy chỉnh 
Hộp meta tùy chỉnh WordPress với nhiều trường cho loại bài đăng “Pages”.

Hướng dẫn tạo Metabox cho Page

Bước 1. add_meta_box () 

Hàm add_meta_box()nên được gọi bên trong một action hook, có 3 tùy chọn:

  • admin_menu
  • add_meta_boxes
  • add_meta_boxes_{post_type}– ở đây bạn có thể chỉ định tên loại bài đăng cụ thể, ví dụ add_meta_boxes_page– vì vậy mã sẽ chỉ chạy khi chỉnh sửa pageloại bài đăng.

Sau khi bạn chèn mã này vào functions.phpchủ đề con của mình hoặc trong một plugin tùy chỉnh, hộp meta này sẽ xuất hiện:

Metabox example
Ví dụ đơn giản về sử dụng add_meta_box()hàm.

Như bạn có thể thấy, tất cả những gì chúng ta đã in bên trong hàm gọi lại hiện được hiển thị bên trong hộp meta.

Hãy đi sâu vào nó và điền vào metabox của chúng tôi với các trường.

Bước 2. Chức năng gọi lại với HTML hộp meta 

Trong đoạn mã bên dưới, tôi đã điền vào hộp meta tùy chỉnh của chúng tôi với nhiều trường.

Trong đoạn mã trên:

  • Tôi đã sử dụng hàm get_post_meta()để lấy các giá trị trường meta hiện có và hiển thị chúng.
  • wp_nonce_field()là cần thiết để bảo mật bổ sung, khi  lưu dữ liệu hộp meta của mình, chúng tôi có thể kiểm tra giá trị nonce để đảm bảo rằng yêu cầu đến từ nơi thích hợp.
  • selected()là một chức năng tích hợp sẵn của WordPress giúp đơn giản hóa các điều kiện và hiển thị selected="selected"tại hiện <select>trường.

Hiển thị:

Thêm hộp Meta tùy chỉnh 
Bây giờ in trường trong hàm gọi lại.

Bước 3. Lưu dữ liệu hộp meta 

Nếu bạn đang sử dụng metabox này trên màn hình chỉnh sửa trang hoặc cho một loại bài đăng tùy chỉnh, đừng quên xác định lại các loại bài đăng được hỗ trợ trên dòng 23, nếu không, dữ liệu metabox sẽ không được lưu.

Các hàm  update_post_meta() và delete_post_meta()(dòng 27-36) phải được gọi cho mỗi trường đầu vào trong hộp meta của bạn.

Xin lưu ý rằng tùy thuộc vào loại trường của bạn mà bạn phải sử dụng sanitization, vì vậy trong ví dụ trên, tôi đang sử dụng sanitize_text_field()hàm, nhưng cũng có một số khác, như sanitize_textarea()đối với trường textarea, sanitize_email()v.v.

Ngoài ra, nó cũng không cần thiết để sử dụng delete_post_meta()cho một số trường hợp, ví dụ như cho các trường văn bản thông thường. Nhưng isset()hoặc empty()kiểm tra điều kiện vẫn được khuyến nghị vì bạn sẽ nhận được thông báo PHP nếu giá trị trường trống.

Tương thích Gutenberg 

Theo mặc định khi bạn thêm meta box, nó cũng sẽ xuất hiện trong trình soạn thảo Gutenberg, đôi khi điều đó không sao cả, nhưng bạn phải nhớ rằng nó chỉ là một phần của khả năng tương thích ngược và các hộp meta không nên được hiển thị trong Gutenberg.

Nếu không, bạn sẽ phải đối mặt với trình chỉnh sửa khối cồng kềnh:

meta boxes in gutenberg

Nhưng điều gì sẽ xảy ra nếu bạn không biết liệu khách hàng của mình sẽ sử dụng Gutenberg hay Classic Editor? Có hai cờ (tham số) mà bạn có thể chuyển cho add_meta_box()hàm có thể giúp chúng tôi làm điều đó.

  • __back_compat_meta_box– đặt nó thành truevà hộp meta của bạn sẽ chỉ được tải trong giao diện trình soạn thảo cổ điển.
  • __block_editor_compatible_meta_box– đặt nó thành falsevà sau đó trong Gutenberg, metabox sẽ hiển thị thông báo rằng nó không tương thích với trình chỉnh sửa khối và thay vào đó bạn nên sử dụng nó với trình soạn thảo cổ điển.

Ví dụ về việc sử dụng __back_compat_meta_box:

Ví dụ về việc sử dụng __block_editor_compatible_meta_box:

Đó là thông điệp trong Gutenberg:

block editor compatible Meta box
__block_editor_compatible_meta_boxđược đặt thành false.

Trong bài viết này giới thiệu cho A/E chi tiết về metabox, thấy hay và ý nghĩa chia sẻ bài viết giúp mình, hoặc để lại comment các vấn đề liên quan mình có thể giúp đỡ…. Chúc A/E thành công!

Xem thêm bài viết

TEMPLATES

PLUGIN

MỜI CAFE

ủng hộ tôi