Dưới đây là một đoạn mã mẫu để tạo một Custom MetaBox WordPress nhằm cập nhật giá cho một bài viết hoặc sản phẩm. Đoạn mã này sẽ thêm một MetaBox vào trang chỉnh sửa bài viết và lưu giá trị giá khi bài viết được lưu.
function my_custom_meta_box() { add_meta_box( 'my_meta_box_id', // ID của MetaBox 'Cập nhật giá sản phẩm', // Tiêu đề của MetaBox 'my_meta_box_callback', // Hàm hiển thị nội dung của MetaBox 'post', // Post type mà MetaBox này được thêm vào (ở đây là 'post') 'normal', // Vị trí hiển thị của MetaBox ('normal', 'side', 'advanced') 'high' // Mức độ ưu tiên của MetaBox ('high', 'low') ); } add_action('add_meta_boxes', 'my_custom_meta_box');
function my_meta_box_callback($post) { // Tạo nonce field để bảo vệ dữ liệu wp_nonce_field('save_meta_box_data', 'my_meta_box_nonce'); // Lấy giá trị hiện tại của giá (nếu có) $value = get_post_meta($post->ID, '_my_meta_key', true); // Hiển thị trường nhập liệu để người dùng nhập giá echo '<label for="my_meta_field">Giá sản phẩm:</label>'; echo '<input type="number" id="my_meta_field" name="my_meta_field" value="' . esc_attr($value) . '" />'; }
function save_my_meta_box_data($post_id) { // Kiểm tra nếu nonce không hợp lệ if (!isset($_POST['my_meta_box_nonce']) || !wp_verify_nonce($_POST['my_meta_box_nonce'], 'save_meta_box_data')) { return; } // Kiểm tra nếu đây là một autosave if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) { return; } // Kiểm tra quyền của người dùng if (!current_user_can('edit_post', $post_id)) { return; } // Kiểm tra và lưu giá trị của trường nhập liệu if (isset($_POST['my_meta_field'])) { $my_data = sanitize_text_field($_POST['my_meta_field']); update_post_meta($post_id, '_my_meta_key', $my_data); } } add_action('save_post', 'save_my_meta_box_data');
Bạn có thể hiển thị giá trị của giá sản phẩm trong phần frontend bằng cách sử dụng hàm get_post_meta.
$price = get_post_meta(get_the_ID(), '_my_meta_key', true); if ($price) { echo '<p>Giá sản phẩm: ' . esc_html($price) . '</p>'; }
Đoạn mã này có thể được thêm vào trong tệp functions.php của theme hoặc tạo một plugin riêng để sử dụng.
Để hiển thị giá đã lưu ra ngoài danh sách bài viết hoặc sản phẩm trong trang quản trị WordPress, bạn có thể thêm một cột tùy chỉnh vào danh sách bài viết và hiển thị giá trong cột này. Dưới đây là các bước thực hiện:
Đầu tiên, bạn sẽ cần sử dụng hook manage_posts_columns để thêm một cột mới vào danh sách bài viết.
function add_price_column_to_post_list($columns) { $columns['product_price'] = 'Giá sản phẩm'; // Thêm cột mới với tiêu đề là "Giá sản phẩm" return $columns; } add_filter('manage_posts_columns', 'add_price_column_to_post_list');
Tiếp theo, bạn cần sử dụng hook manage_posts_custom_column để hiển thị giá trị giá cho từng bài viết trong cột mới.
function show_price_column_in_post_list($column, $post_id) { if ($column == 'product_price') { $price = get_post_meta($post_id, '_my_meta_key', true); // Lấy giá trị giá từ custom field if ($price) { echo esc_html($price) . ' đ'; // Hiển thị giá trị giá (có thể thêm 'đ' để biểu thị đơn vị tiền) } else { echo 'Chưa có giá'; // Hiển thị nếu chưa có giá trị } } } add_action('manage_posts_custom_column', 'show_price_column_in_post_list', 10, 2);
Nếu bạn muốn cột này có thể sắp xếp theo giá trị giá, bạn cần thêm tính năng sắp xếp cho cột này.
function make_price_column_sortable($columns) { $columns['product_price'] = 'product_price'; return $columns; } add_filter('manage_edit-post_sortable_columns', 'make_price_column_sortable'); function sort_price_column($query) { if(!is_admin()) { return; } $orderby = $query->get('orderby'); if('product_price' == $orderby) { $query->set('meta_key', '_my_meta_key'); $query->set('orderby', 'meta_value_num'); // Sắp xếp theo giá trị số } } add_action('pre_get_posts', 'sort_price_column');
Đoạn mã này sẽ giúp bạn hiển thị giá trị của giá sản phẩm trên danh sách bài viết trong trang quản trị WordPress và cho phép sắp xếp theo giá trị đó.
Nếu bạn gặp vấn đề với việc sử dụng orderby cho cột giá trị trong danh sách bài viết, hãy đảm bảo rằng bạn đã kiểm tra và thiết lập đúng cách. Dưới đây là một phiên bản điều chỉnh mà có thể giúp khắc phục vấn đề:
Trước tiên, hãy thêm cột giá và hiển thị giá trị đúng như đã hướng dẫn trước đó:
// Thêm cột giá vào danh sách bài viết function add_price_column_to_post_list($columns) { $columns['product_price'] = 'Giá sản phẩm'; return $columns; } add_filter('manage_posts_columns', 'add_price_column_to_post_list'); // Hiển thị giá trong cột giá function show_price_column_in_post_list($column, $post_id) { if ($column == 'product_price') { $price = get_post_meta($post_id, '_my_meta_key', true); if ($price) { echo esc_html($price) . ' đ'; } else { echo 'Chưa có giá'; } } } add_action('manage_posts_custom_column', 'show_price_column_in_post_list', 10, 2);
Để đảm bảo cột giá có thể sắp xếp được, bạn sẽ cần thực hiện một vài bước điều chỉnh:
// Đặt cột giá có thể sắp xếp được function make_price_column_sortable($columns) { $columns['product_price'] = 'product_price'; return $columns; } add_filter('manage_edit-post_sortable_columns', 'make_price_column_sortable'); // Tùy chỉnh truy vấn khi sắp xếp theo cột giá function sort_price_column($query) { if(!is_admin()) { return; } $orderby = $query->get('orderby'); // Kiểm tra nếu đang sắp xếp theo cột giá if('product_price' == $orderby) { $query->set('meta_key', '_my_meta_key'); // Thiết lập meta key cần sắp xếp $query->set('orderby', 'meta_value_num'); // Sắp xếp theo giá trị số } } add_action('pre_get_posts', 'sort_price_column');
Sau khi thêm đoạn mã trên vào theme hoặc plugin, hãy vào phần Danh sách bài viết trong trang quản trị WordPress và kiểm tra:
Nếu vẫn gặp khó khăn, hãy kiểm tra xem meta_key và meta_value được lưu đúng cách trong cơ sở dữ liệu, hoặc thử debug bằng cách in ra giá trị $orderby để chắc chắn rằng nó nhận đúng tên cột.
Để thêm biểu tượng sắp xếp giá vào cột giá trong danh sách bài viết, bạn có thể điều chỉnh hàm add_price_column_to_post_list để thêm một phần tử HTML với biểu tượng mũi tên hoặc biểu tượng tương tự vào tiêu đề của cột. Dưới đây là cách thực hiện:
Chỉnh sửa hàm add_price_column_to_post_list để thêm biểu tượng sắp xếp vào tiêu đề cột giá:
function add_price_column_to_post_list($columns) { $columns['product_price'] = __('Giá sản phẩm') . ' <span></span>'; return $columns; } add_filter('manage_posts_columns', 'add_price_column_to_post_list');
WordPress đã có sẵn một lớp CSS sorting-indicator cho biểu tượng sắp xếp. Bạn có thể sử dụng nó để hiển thị biểu tượng mũi tên lên hoặc xuống khi sắp xếp:
<style> .sorting-indicator { display: inline-block; margin-left: 5px; } .column-product_price .sorting-indicator:before { content: '\25B2'; /* Biểu tượng mũi tên lên */ font-size: 12px; margin-right: 3px; position: relative; top: 1px; } .sorted .column-product_price .sorting-indicator:before { content: '\25BC'; /* Biểu tượng mũi tên xuống khi đã sắp xếp */ } </style>
Bạn có thể thêm CSS trên vào trang quản trị bằng cách sử dụng hàm admin_head:
function add_custom_admin_styles() { echo '<style> .sorting-indicator { display: inline-block; margin-left: 5px; } .column-product_price .sorting-indicator:before { content: "\25B2"; /* Biểu tượng mũi tên lên */ font-size: 12px; margin-right: 3px; position: relative; top: 1px; } .sorted .column-product_price .sorting-indicator:before { content: "\25BC"; /* Biểu tượng mũi tên xuống khi đã sắp xếp */ } </style>'; } add_action('admin_head', 'add_custom_admin_styles');
Bằng cách thêm biểu tượng mũi tên vào tiêu đề của cột giá, bạn có thể cải thiện trải nghiệm người dùng, giúp họ dễ dàng nhận biết trạng thái sắp xếp hiện tại. Nếu bạn muốn sử dụng các biểu tượng khác hoặc điều chỉnh kiểu dáng, bạn chỉ cần thay đổi nội dung trong content của CSS.
Leave A Comment