Thiết Kế Website
SEO tổng thể
Sáng Tạo Nội Dung
Bộ nhận diện thương hiệuDưới đây là hướng dẫn cụ thể để thêm custom field ảnh đại diện cho danh mục sản phẩm:
- Thêm custom field vào form thêm và chỉnh sửa danh mục:
- Thêm custom field vào form thêm danh mục.
- Thêm custom field vào form chỉnh sửa danh mục.
- Lưu giá trị của custom field:
- Lưu giá trị của custom field khi danh mục được tạo mới hoặc cập nhật.
- Hiển thị giá trị của custom field:
- Hiển thị giá trị của custom field khi xem hoặc chỉnh sửa danh mục.
Dưới đây là ví dụ cụ thể để thêm một custom field ảnh đại diện vào taxonomy product_cat:
Thêm custom field vào form thêm danh mục mới
Bạn copy và paste toàn bộ code này vào Giao diện – Theme File Editor – Function.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
// Thêm custom field vào form thêm danh mục functionadd_product_cat_image_field(){ ?> <div class="form-field"> <label for="product_cat_image"><?php_e('Ảnh đại diện','thethaonamviet.vn');?></label> <input type="text"name="product_cat_image"id="product_cat_image"value=""> <button class="button"id="product_cat_image_button"><?php_e('Tải ảnh lên','thethaonamviet.vn');?></button> <pclass="description"><?php_e('Tải ảnh đại diện cho danh mục này','thethaonamviet.vn');?></p> <div id="product_cat_image_preview"style="margin-top: 10px;"></div> </div> <script> jQuery(document).ready(function($){ varmediaUploader; $('#product_cat_image_button').click(function(e){ e.preventDefault(); if(mediaUploader){ mediaUploader.open(); return; } mediaUploader=wp.media.frames.file_frame=wp.media({ title:'Choose Image', button:{ text:'Choose Image' }, multiple:false }); mediaUploader.on('select',function(){ varattachment=mediaUploader.state().get('selection').first().toJSON(); $('#product_cat_image').val(attachment.url); $('#product_cat_image_preview').html('<img src="'+attachment.url+'" style="max-width: 100%; height: auto;">'); }); mediaUploader.open(); }); }); </script> <?php } add_action('product_cat_add_form_fields','add_product_cat_image_field',10,2); |
Thêm custom field vào form chỉnh sửa danh mục đã có
Bạn copy và paste toàn bộ code này vào Giao diện – Theme File Editor – Function.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
// Thêm custom field vào form chỉnh sửa danh mục functionedit_product_cat_image_field($term){ $product_cat_image=get_term_meta($term->term_id,'product_cat_image',true); ?> <tr class="form-field"> <th scope="row"valign="top"><label for="product_cat_image"><?php_e('Ảnh đại diện','thethaonamviet.vn');?></label></th> <td> <input type="text"name="product_cat_image"id="product_cat_image"value="<?phpechoesc_attr($product_cat_image);?>"> <button class="button"id="product_cat_image_button"><?php_e('Tải ảnh lên','thethaonamviet.vn');?></button> <pclass="description"><?php_e('Tải ảnh đại diện cho danh mục này','thethaonamviet.vn');?></p> <div id="product_cat_image_preview"style="margin-top: 10px;"> <?phpif($product_cat_image):?> <img src="<?phpechoesc_url($product_cat_image);?>"style="max-width: 100%; height: auto;"> <?phpendif;?> </div> <script> jQuery(document).ready(function($){ varmediaUploader; $('#product_cat_image_button').click(function(e){ e.preventDefault(); if(mediaUploader){ mediaUploader.open(); return; } mediaUploader=wp.media.frames.file_frame=wp.media({ title:'Choose Image', button:{ text:'Choose Image' }, multiple:false }); mediaUploader.on('select',function(){ varattachment=mediaUploader.state().get('selection').first().toJSON(); $('#product_cat_image').val(attachment.url); $('#product_cat_image_preview').html('<img src="'+attachment.url+'" style="max-width: 100%; height: auto;">'); }); mediaUploader.open(); }); }); </script> </td> </tr> <?php } add_action('product_cat_edit_form_fields','edit_product_cat_image_field',10,2); |
Lưu giá trị custom field vào database
Vẫn tiếp tục copy và paste đoạn code dưới đây vào function.php nha
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// Lưu giá trị của custom field khi tạo mới danh mục functionsave_product_cat_image_field($term_id){ if(isset($_POST['product_cat_image'])&&''!==$_POST['product_cat_image']){ update_term_meta($term_id,'product_cat_image',sanitize_text_field($_POST['product_cat_image'])); } } add_action('created_product_cat','save_product_cat_image_field',10,2); // Lưu giá trị của custom field khi chỉnh sửa danh mục functionupdate_product_cat_image_field($term_id){ if(isset($_POST['product_cat_image'])&&''!==$_POST['product_cat_image']){ update_term_meta($term_id,'product_cat_image',sanitize_text_field($_POST['product_cat_image'])); }else{ delete_term_meta($term_id,'product_cat_image'); } } add_action('edited_product_cat','update_product_cat_image_field',10,2); |
Hiển thị ảnh đại diện ra trang danh mục sản phẩm ngoài front end
Ở bước này, tùy vào theme bạn đang sử dụng sẽ có vị trí hiển thị ảnh đại diện khác nhau. Ví dụ, theme flatsome – woocommerce – layout – có các layout khác nhau của trang danh mục, bạn chỉ cần tìm được vị trí cần hiển thị ảnh đại diện rồi paste đoạn code sau vào:
|
1 2 3 4 5 6 7 8 9 |
<?php // Chèn mã này vào template của danh mục sản phẩm (ví dụ: taxonomy-product_cat.php hoặc archive-product.php) $term_id=get_queried_object_id(); $product_cat_long_description=get_term_meta($term_id,'product_cat_long_description',true); if($product_cat_long_description){ echo'<div class="noi-dung-dau-archive">'; echowpautop($product_cat_long_description); echo'</div>'; }?> |
Với các đoạn mã trên, bạn sẽ có thể thêm, lưu và hiển thị custom field ảnh đại diện cho taxonomy product_cat một cách dễ dàng.