Gần đây, tôi đang làm việc trên một plugin/thư viện ví dụ để thêm hình ảnh vào các thuật ngữ phân loại (chẳng hạn như danh mục, thẻ bài đăng hoặc thuật ngữ phân loại tùy chỉnh). Plugin thêm trường tải lên hình ảnh để tạo và chỉnh sửa biểu mẫu thuật ngữ  Như thể hiện trong ảnh chụp màn hình ở trên, tôi đã đặt tiêu đề, nhãn trường. Tên trường được tạo tự động từ nhãn trường. Trong loại trường, tôi đã chọn tùy chọn Hình ảnh. Tùy chọn này hoạt động như tải lên tệp cho phép sử dụng trình tải lên phương tiện WordPress Cuộn xuống trên cùng một trang, chọn Return Format as Image Array Trong Vị trí, đối với Quy tắc, cần thêm một điều kiện sẽ áp dụng cho nhóm trường hiện tại. Trong trường hợp của chúng tôi, tôi chọn Taxonomy bằng Category Khi bạn đã hoàn tất các cài đặt ở trên, hãy lưu các thay đổi Bây giờ, nếu chúng ta vào trang chỉnh sửa danh mục, chúng ta sẽ thấy trường Tải lên hình ảnh Bây giờ người dùng có thể tải lên hình ảnh cho một danh mục. Tiếp theo, hãy xem cách hiển thị hình ảnh này ở giao diện người dùng Hiển thị danh mục hình ảnh trên giao diện người dùngPlugin trường tùy chỉnh nâng cao cung cấp phương thức Giả sử chúng tôi đã tải lên một hình ảnh cho danh mục có ID 7. Sau đó để hiển thị hình ảnh, mã của chúng tôi sẽ như sau <?php
$term_id = 7;
$image = get_field('category_image', 'category_'. $term_id); //'category_image' is our field name
echo '<img src="'.$image['url'].'" alt="'.$image['alt'].'" />';
Biến Thêm trường hình ảnh vào phân loại mà không cần pluginChúng tôi đã thấy cách thêm trường hình ảnh vào phân loại thông qua plugin. Cách tiếp cận này là tốt cho một người phi kỹ thuật. Nếu bạn là nhà phát triển WordPress thì rõ ràng bạn sẽ không muốn sử dụng plugin. Hãy làm điều đó theo chương trình Để hoàn thành nhiệm vụ này, chúng tôi cần sử dụng một vài hành động WordPress. Đầu tiên, chúng ta cần thêm một trường hình ảnh trên biểu mẫu Danh mục. Đối với điều này, hãy thêm mã bên dưới vào tệp function taxonomy_add_custom_field() {
?>
<div class="form-field term-image-wrap">
<label for="cat-image"><?php _e( 'Image' ); ?></label>
<p><a href="#" class="aw_upload_image_button button button-secondary"><?php _e('Upload Image'); ?></a></p>
<input type="text" name="category_image" id="cat-image" value="" size="40" />
</div>
<?php
}
add_action( 'category_add_form_fields', 'taxonomy_add_custom_field', 10, 2 );
function taxonomy_edit_custom_field($term) {
$image = get_term_meta($term->term_id, 'category_image', true);
?>
<tr class="form-field term-image-wrap">
<th scope="row"><label for="category_image"><?php _e( 'Image' ); ?></label></th>
<td>
<p><a href="#" class="aw_upload_image_button button button-secondary"><?php _e('Upload Image'); ?></a></p><br/>
<input type="text" name="category_image" id="cat-image" value="<?php echo $image; ?>" size="40" />
</td>
</tr>
<?php
}
add_action( 'category_edit_form_fields', 'taxonomy_edit_custom_field', 10, 2 );
1 của bạnfunction taxonomy_add_custom_field() {
?>
<div class="form-field term-image-wrap">
<label for="cat-image"><?php _e( 'Image' ); ?></label>
<p><a href="#" class="aw_upload_image_button button button-secondary"><?php _e('Upload Image'); ?></a></p>
<input type="text" name="category_image" id="cat-image" value="" size="40" />
</div>
<?php
}
add_action( 'category_add_form_fields', 'taxonomy_add_custom_field', 10, 2 );
function taxonomy_edit_custom_field($term) {
$image = get_term_meta($term->term_id, 'category_image', true);
?>
<tr class="form-field term-image-wrap">
<th scope="row"><label for="category_image"><?php _e( 'Image' ); ?></label></th>
<td>
<p><a href="#" class="aw_upload_image_button button button-secondary"><?php _e('Upload Image'); ?></a></p><br/>
<input type="text" name="category_image" id="cat-image" value="<?php echo $image; ?>" size="40" />
</td>
</tr>
<?php
}
add_action( 'category_edit_form_fields', 'taxonomy_edit_custom_field', 10, 2 );
Kiểm tra trang Danh mục của bạn và bây giờ bạn sẽ thấy trường Hình ảnh có nút Tải lên và trường nhập. Tải lên và lưu trữ hình ảnhTiếp theo, những gì tôi sẽ đạt được là chỉ cần nhấp vào nút Tải lên, chế độ phương tiện quản trị sẽ mở và đường dẫn hình ảnh đã chọn sẽ được đặt trong trường nhập liệu. Giá trị này sau đó được lưu vào bảng ‘wp_termmeta’ với khóa meta ‘category_image’ Để sử dụng trình tải lên phương tiện WordPress, bạn cần viết mã JavaScript. Tạo một tệp function taxonomy_add_custom_field() {
?>
<div class="form-field term-image-wrap">
<label for="cat-image"><?php _e( 'Image' ); ?></label>
<p><a href="#" class="aw_upload_image_button button button-secondary"><?php _e('Upload Image'); ?></a></p>
<input type="text" name="category_image" id="cat-image" value="" size="40" />
</div>
<?php
}
add_action( 'category_add_form_fields', 'taxonomy_add_custom_field', 10, 2 );
function taxonomy_edit_custom_field($term) {
$image = get_term_meta($term->term_id, 'category_image', true);
?>
<tr class="form-field term-image-wrap">
<th scope="row"><label for="category_image"><?php _e( 'Image' ); ?></label></th>
<td>
<p><a href="#" class="aw_upload_image_button button button-secondary"><?php _e('Upload Image'); ?></a></p><br/>
<input type="text" name="category_image" id="cat-image" value="<?php echo $image; ?>" size="40" />
</td>
</tr>
<?php
}
add_action( 'category_edit_form_fields', 'taxonomy_edit_custom_field', 10, 2 );
0 và liệt kê nófunction aw_include_script() {
if ( ! did_action( 'wp_enqueue_media' ) ) {
wp_enqueue_media();
}
wp_enqueue_script( 'awscript', get_stylesheet_directory_uri() . '/js/awscript.js', array('jquery'), null, false );
}
add_action( 'admin_enqueue_scripts', 'aw_include_script' );
Trong tệp function taxonomy_add_custom_field() {
?>
<div class="form-field term-image-wrap">
<label for="cat-image"><?php _e( 'Image' ); ?></label>
<p><a href="#" class="aw_upload_image_button button button-secondary"><?php _e('Upload Image'); ?></a></p>
<input type="text" name="category_image" id="cat-image" value="" size="40" />
</div>
<?php
}
add_action( 'category_add_form_fields', 'taxonomy_add_custom_field', 10, 2 );
function taxonomy_edit_custom_field($term) {
$image = get_term_meta($term->term_id, 'category_image', true);
?>
<tr class="form-field term-image-wrap">
<th scope="row"><label for="category_image"><?php _e( 'Image' ); ?></label></th>
<td>
<p><a href="#" class="aw_upload_image_button button button-secondary"><?php _e('Upload Image'); ?></a></p><br/>
<input type="text" name="category_image" id="cat-image" value="<?php echo $image; ?>" size="40" />
</td>
</tr>
<?php
}
add_action( 'category_edit_form_fields', 'taxonomy_edit_custom_field', 10, 2 );
1, hãy viết mã JavaScript bên dưới để mở phương thức phương tiện, cho phép bạn chọn hình ảnh và chèn đường dẫn hình ảnh vào trường nhập liệujQuery(function($){
$('body').on('click', '.aw_upload_image_button', function(e){
e.preventDefault();
aw_uploader = wp.media({
title: 'Custom image',
button: {
text: 'Use this image'
},
multiple: false
}).on('select', function() {
var attachment = aw_uploader.state().get('selection').first().toJSON();
$('#cat-image').val(attachment.url);
})
.open();
});
});
Để tìm hiểu thêm về phương thức quản trị phương tiện, vui lòng tham khảo wp. tài liệu truyền thông Bây giờ bạn có thể chọn hình ảnh từ thư viện phương tiện WordPress. Hãy lưu nó thông qua mã bên dưới function save_taxonomy_custom_meta_field( $term_id ) {
if ( isset( $_POST['category_image'] ) ) {
update_term_meta($term_id, 'category_image', $_POST['category_image']);
}
}
add_action( 'edited_category', 'save_taxonomy_custom_meta_field', 10, 2 );
add_action( 'create_category', 'save_taxonomy_custom_meta_field', 10, 2 );
Chúng tôi đã hoàn thành quy trình thủ công để thêm trường hình ảnh vào phân loại. Cuối cùng, bạn có thể hiển thị hình ảnh ở mặt trước như sau <?php $term_id = 39; $image = get_term_meta($term_id, 'category_image', true); echo '<img src="'.$image.'" />'; Tôi hy vọng bạn hiểu cách thêm trường hình ảnh vào phân loại trong WordPress. Tôi muốn nghe những suy nghĩ và đề xuất của bạn trong phần bình luận bên dưới |
