Cách tự tạo một Meta Box đơn giản toàn tập [NEW]



Các tính năng của WordPress Trường tùy chỉnh giúp người dùng dễ dàng thêm dữ liệu bổ sung vào một loại bài đăng nhất định. Nhưng khi sử dụng Custom Field, chúng ta hầu như chỉ thực hiện được với một thao tác là chọn tên khóa rồi nhập giá trị, rất bất tiện.

Chắc hẳn mọi người ở đây đều biết qua plugin SEO by Yoast rồi đúng không? Các dữ liệu liên quan đến SEO của plugin này được người dùng khai báo thông qua khung như bên dưới.

Cách tự tạo một Meta Box đơn giản toàn tập [NEW]

Những dữ liệu như vậy cũng là một trường tùy chỉnh trong WordPress nhưng nó sẽ giúp người dùng dễ dàng khai báo thông tin thuận tiện hơn. Và những khung này được gọi là Hộp Meta.

Nếu bạn không thích viết mã, plugin Trường tùy chỉnh nâng cao sẽ giúp bạn tạo các hộp meta một cách dễ dàng.

MetaBox là gì?

Hộp Meta có nghĩa là một hộp nhập liệu được tích hợp trong khu vực biên tập nội dung, và dữ liệu sẽ được gửi vào cơ sở dữ liệu của trang web. Nhưng ngày nay, Meta Box chủ yếu được sử dụng để làm việc với Meta Data (bao gồm wp_usermeta, wp_commentmetawp_postmeta).

Trong bài viết này, tôi sẽ hướng dẫn bạn cách tạo hộp meta của riêng bạn để xử lý dữ liệu meta bài đăng (dữ liệu trường tùy chỉnh). Một cái gì đó như thêm hoặc chỉnh sửa giá trị trong trường tùy chỉnh.

Nên xem trước:

  • Hướng dẫn về trường bài đăng tùy chỉnh của WordPress
  • Cách sử dụng Action & Filter Hook

Các bước tạo hộp meta

Chuẩn bị – Tạo một plugin mới

Để thực hành trong bài học này, tốt hơn bạn nên tự tạo một plugin mới bằng cách tạo một tệp demo-metabox.php trong thư mục / wp-content / plugins /sau đó khai báo thông tin plugin.

<?php
/*
Plugin Name: Ví dụ Meta Box
Author: Thạch Phạm
Description: Hướng dẫn tạo meta box
Author URI: https://thachpham.com
*/

Và nhớ kích hoạt plugin này.

Bước 1. Khai báo hộp meta

Trong bước này, chúng tôi sẽ tạo một hộp meta trong khu vực chỉnh sửa trước. Để tạo khung meta box, chúng ta sẽ sử dụng hàm add_meta_box () trong WordPress với cấu trúc như sau:

add_meta_box( $id, $title, $callback, $screen, $context, $priority, $callback_args );

Trong đó:

  • $id: Tên ID của khung.
  • $title: Hiển thị tiêu đề của khung meta box.
  • $callback: Hàm hiển thị các biểu mẫu trong HTML để nó hoạt động với dữ liệu.
  • $screen: Tên của loại bài đăng mà hộp meta này sẽ hiển thị, nó có các giá trị là bài đăng, trang, bảng điều khiển, liên kết, tệp đính kèm hoặc tên loại bài đăng tùy chỉnh (lưu ý rằng tên được viết dưới dạng slug).
  • $context: Hộp meta loại hiển thị, bao gồm bình thường, nâng cao hoặc bên cạnh.
  • $priority: Hiển thị thứ tự ưu tiên, bao gồm cao, cốt lõi, mặc định hoặc thấp.
  • $callback_args: Các tham số mà bạn muốn trả về cho hàm gọi lại.

Tuy nhiên khi làm việc chúng ta có thể không cần sử dụng tất cả các tham số trong hàm này mà chỉ sử dụng các tham số quan trọng (5 tham số đầu tiên trở xuống).

Bạn phải lưu ý rằng chức năng add_meta_box() không thể được gọi riêng lẻ, bạn cần đặt nó vào một số chức năng của riêng bạn, sau đó hook vào action hook là add_meta_boxes để thực hiện.

Ví dụ, trong bài viết này, tôi sẽ tạo một hộp meta với tên Liên hệ như sau:


/**
Khai báo meta box
**/
function thachpham_meta_box()
{
add_meta_box( ‘thong-tin’, ‘Thông tin ứng dụng’, ‘thachpham_thongtin_output’, ‘post’ );
}
add_action( ‘add_meta_boxes’, ‘thachpham_meta_box’ );

Trong đó,

  • thông tin: là $ id.
  • Thông tin ứng dụng: là $ title.
  • thachpham_thongtin_output: là $ gọi lại.
  • post: là $ màn hình.

Bây giờ, hãy chuyển đến khu vực Đăng và thêm / chỉnh sửa một bài đăng để xem hộp meta của bạn.

Hiển thị hộp meta với add_meta_box.  hàm số

Hiển thị hộp meta với add_meta_box. hàm số

Nếu bạn thấy lỗi call_user_func () nghĩa là chúng ta chưa viết hàm callback nên còn thiếu, chúng ta sẽ thực hiện ngay tại đây.

Bước 2. Thiết lập cuộc gọi lại

Callback có nghĩa là một hàm sẽ in ra nội dung bên trong hộp đó, chúng ta hãy lấy một ví dụ đơn giản như sau để hiển thị một đoạn văn bản.


function thachpham_thongtin_output()
{
echo ‘Đây là thông tin trong meta box’;
}

Tất nhiên kết quả bây giờ sẽ như thế này.

metabox-callback-simple

Nhưng với ví dụ trong bài đăng này, tôi sẽ tạo hai thẻ <input> Bên trong đó để mọi người nhập, ví dụ: nếu tôi muốn tạo trường nhập để nhập Tải xuống liên kết (sử dụng trường tùy chỉnh), tôi sẽ viết lại nó như sau:


/**
Khai báo callback
@param $post là đối tượng WP_Post để nhận thông tin của post
**/
function thachpham_thongtin_output( $post )
{
// Tạo trường Link Download
echo ( ‘<label for="link_download">Link Download: </label>’ );
echo (‘<input type="text" id="link_download" name="link_download" value="’.esc_attr( $link_download ).’" />’);
}

Kết quả là chúng tôi có:

metabox-callback-demo

Trong đoạn trên là nội dung HTML chỉ để tạo biểu mẫu, nhưng xin lưu ý rằng nó nằm trong biến $link_download Bên trên nó là biến mà chúng ta sẽ hiển thị nội dung mà người dùng đã nhập vào để nó hiển thị nếu nó đã được khai báo.

Nhưng vấn đề là nếu bạn cố gắng nhập giá trị ngay bây giờ và cập nhật lại bài đăng, nó sẽ không được lưu, chúng tôi chỉ đơn giản là chưa đặt nó để lưu đầu vào.

Nhưng trước khi lưu dữ liệu, chúng tôi thêm điều này vào hàm thachpham_thongtin_output khai báo cho hệ thống hiểu $link_download là một biến vì chúng ta chưa tạo nó.


/**
Khai báo callback
@param $post là đối tượng WP_Post để nhận thông tin của post
**/
function thachpham_thongtin_output( $post )
{
$link_download = get_post_meta( $post->ID, ‘_link_download’, true );
// Tạo trường Link Download
echo ( ‘<label for="link_download">Link Download: </label>’ );
echo (‘<input type="text" id="link_download" name="link_download" value="’.esc_attr( $link_download ).’" />’);
}

Trong đó, hàm get_post_meta mà tôi đã giải thích trong hướng dẫn trường tùy chỉnh.

Bước 3. Đặt lưu dữ liệu đầu vào trong hộp meta

Chúng ta đã có hộp meta, đã có trường đầu vào và trường đó sẽ in dữ liệu ra trên hộp nhập nếu nó có giá trị. Nhưng vấn đề là bây giờ nó không được lưu vào cơ sở dữ liệu khi import nên chúng ta phải tạo một hàm riêng để xử lý việc này, và hàm này chúng ta sẽ hook vào action save_post để thực thi khi lưu. dữ liệu kiểu hậu.


/**
Lưu dữ liệu meta box khi nhập vào
@param post_id là ID của post hiện tại
**/
function thachpham_thongtin_save( $post_id )
{
$link_download = sanitize_text_field( $_POST[‘link_download’] );
update_post_meta( $post_id, ‘_link_download’, $link_download );
}
add_action( ‘save_post’, ‘thachpham_thongtin_save’ );

Hàm này rất đơn giản, trước tiên nó sẽ làm sạch dữ liệu đã nhập trong link_download ($_POST['link_download'] là nó lấy dữ liệu được gửi từ trường dựa trên thuộc tínhname trong thẻ <input> nó là). Clean ở đây có nghĩa là nó sẽ loại bỏ các ký tự đặc biệt như <, ; để tránh gây ra lỗi và cũng hạn chế SQL Injection & XSS.

Sau đó, hàm update_post_meta sẽ tiến hành lưu dữ liệu trong biến $link_download ở trên vào trường tùy chỉnh có tên _link_download. Nếu không, nó sẽ tạo ra một cái mới.

Bây giờ bạn hãy thử nhập nội dung và nhập dữ liệu và lưu lại, bạn sẽ thấy nó đã được lưu.

metabox-callback-demo02

Toàn bộ mã cho phần này


<?php
/*
Plugin Name: Ví dụ Meta Box
Author: Thạch Phạm
Description: Hướng dẫn tạo meta box
Author URI: https://thachpham.com
*/

/**
Khai báo meta box
**/
function thachpham_meta_box()
{
add_meta_box( ‘thong-tin’, ‘Thông tin ứng dụng’, ‘thachpham_thongtin_output’, ‘post’ );
}
add_action( ‘add_meta_boxes’, ‘thachpham_meta_box’ );

/**
Khai báo callback
@param $post là đối tượng WP_Post để nhận thông tin của post
**/
function thachpham_thongtin_output( $post )
{
$link_download = get_post_meta( $post->ID, ‘_link_download’, true );
// Tạo trường Link Download
echo ( ‘<label for="link_download">Link Download: </label>’ );
echo (‘<input type="text" id="link_download" name="link_download" value="’.esc_attr( $link_download ).’" />’);
}

/**
Lưu dữ liệu meta box khi nhập vào
@param post_id là ID của post hiện tại
**/
function thachpham_thongtin_save( $post_id )
{
$link_download = sanitize_text_field( $_POST[‘link_download’] );
update_post_meta( $post_id, ‘_link_download’, $link_download );
}
add_action( ‘save_post’, ‘thachpham_thongtin_save’ );

Bước 4. Lấy dữ liệu ra khỏi mẫu

Tất nhiên bạn đã có giá trị trong trường custom rồi thì việc hiển thị nó ra ngoài template của theme chỉ là chuyện nhỏ, bạn cứ làm cho nó hiển thị bằng hàm get_post_meta như bên dưới để lấy giá trị của trường _link_download.

get_post_meta( $post->ID, ‘_link_download’, true );

Vấn đề an ninh

Khi chúng ta làm việc với việc gửi và lưu dữ liệu từ biểu mẫu thì vấn đề bảo mật là vô cùng quan trọng và đáng phải lo lắng, vì khi lưu dữ liệu sẽ lưu vào cơ sở dữ liệu, vì vậy chúng ta phải chắc chắn rằng các dữ liệu được lưu là an toàn và đáng tin cậy.

Ngoài việc thoát các ký tự đặc biệt bằng các hàm esc_attr và sanitize_text_field mà tôi đã sử dụng trong bài viết, một điều khác bạn nên sử dụng khi làm việc với các hộp meta là sử dụng Nonce (Số lượng sử dụng một lần).

Nonce Ở đây bạn hiểu rằng nó sẽ tạo ra một chuỗi mã xác nhận (với dạng số) mỗi khi chúng ta gửi dữ liệu vào biểu mẫu. Sau đó, chúng tôi có thể xác thực Nonce này để xem nó có hợp lệ hay không, nếu có, chúng tôi sẽ để nó xử lý việc lưu dữ liệu và nếu không, chúng tôi nên loại bỏ nó. Điều này sẽ bảo vệ bạn chống lại một số cuộc tấn công phổ biến như XSS hoặc CSRF.

Bước 1. Tạo Nonce

Bây giờ chúng ta hãy quay lại hàm gọi lại thachpham_thongtin_output ở đây chúng ta sẽ tạo một nonce với hàm wp_nonce_field và gán cho nó một tên và một hành động.


function thachpham_thongtin_output( $post )
{
$link_download = get_post_meta( $post->ID, ‘_link_download’, true );
wp_nonce_field( ‘save_thongtin’, ‘thongtin_nonce’ );
// Tạo trường Link Download
echo ( ‘<label for="link_download">Link Download: </label>’ );
echo (‘<input type="text" id="link_download" name="link_download" value="’.esc_attr( $link_download ).’" />’);
}

Trong đó,save_thongtin là tên hành động mà chúng tôi sẽ sử dụng để kiểm tra sau này,thongtin_nonce là tên của nonce để nhận giá trị nonce.

Ngay sau khi thêm đoạn văn đó, bạn nhìn vào mã nguồn HTML của trang soạn thảo nội dung sẽ thấy nó tạo ra một trường ẩn với tên là info_nonce và có giá trị là một con số, chúng ta sẽ dùng giá trị đó để kiểm tra. kiểm tra khi lưu dữ liệu.

metabox-callback-demo03

Bây giờ, tại chức năngthachpham_thongtin_savechúng ta chỉ cần thêm hai điều kiện nhánh sẽ không lưu dữ liệu nếu nonce là null và giá trị nonce không hợp lệ như hình dưới đây.


function thachpham_thongtin_save( $post_id )
{

$thongtin_nonce = $_POST[‘thongtin_nonce’];
// Kiểm tra nếu nonce chưa được gán giá trị
if( !isset( $thongtin_nonce ) ) {
return;
}
// Kiểm tra nếu giá trị nonce không trùng khớp
if( !wp_verify_nonce( $thongtin_nonce, ‘save_thongtin’ ) ) {
return;
}

// Lưu dữ liệu nếu thoả điều kiện
$link_download = sanitize_text_field( $_POST[‘link_download’] );
update_post_meta( $post_id, ‘_link_download’, $link_download );
}
add_action( ‘save_post’, ‘thachpham_thongtin_save’ );

Vậy là xong. : D

Phần kết

Trong bài viết này, tôi sẽ tạm dừng việc tạo một trường nhập liệu đơn giản. Và khi có nhiều thời gian, tôi sẽ hướng dẫn các bạn cách tạo các loại trường khác như nút radio, danh sách sổ xuống,… vì nó khá dài dòng.

3.5 / 5 – (2 phiếu bầu)

Tiếp tục đọc trong bộ truyện