管理面板中的自定义分类图像选项 [英] custom taxonomy image option in admin panel
问题描述
我创建了一个自定义分类法，并且希望每个类别都有一个图像选项。
I have created a custom taxonomy and want to have a image option for each category.
function create_product_taxonomies()
{
// Add new taxonomy, make it hierarchical (like categories)
$labels = array(
'name' => _x('product_categories', 'taxonomy general name'),
'singular_name' => _x('Product', 'taxonomy singular name'),
'search_items' => __('Search Product Category'),
'all_items' => __('All Product Categorie(s)'),
'parent_item' => __('Parent Product Category'),
'parent_item_colon' => __('Parent Product Category:'),
'edit_item' => __('Edit Product Category'),
'update_item' => __('Update Product Category'),
'add_new_item' => __('Add New'),
'new_item_name' => __('New Product Name'),
'menu_name' => __('Product Categories'),
);
$args = array(
'hierarchical' => true,
'labels' => $labels,
'show_ui' => true,
'show_admin_column' => true,
'query_var' => true,
'rewrite' => array('slug' => 'product_categories', 'with_front' => true));
register_taxonomy('product_categories', array('products'), $args);
flush_rewrite_rules();
}
//hooks
add_action('init', 'create_product_taxonomies', 0);
如何为用户提供为每个类别上传图像的选项？
How can I provide user the option to upload a image for each category?
推荐答案
在WordPress v4.4.2之前，这非常困难，但不可能为术语创建自定义元字段，但现在非常简单。
Before WordPress v4.4.2 Its very difficult but not possible to make custom meta field for terms but now its very easy and simple.
您想上传图像，所以我们创建了一个js文件，并在 functions.php 中编写了一些代码。
And you want to upload image so we create a js file and write some code in functions.php.
但是首先我们创建自定义上传元字段。
But first we create custom upload meta field.
在您的 function.php 或在其中编写用于注册自定义分类法的代码并编写以下代码的地方：
In your function.php or where you write a code for register custom taxonomy and write this code:
首先，我们创建自定义元术语字段
add_action('product_categories_add_form_fields', 'add_term_image', 10, 2);
function add_term_image($taxonomy){
?>
<div class="form-field term-group">
<label for="">Upload and Image</label>
<input type="text" name="txt_upload_image" id="txt_upload_image" value="" style="width: 77%">
<input type="button" id="upload_image_btn" class="button" value="Upload an Image" />
</div>
<?php
}
在<$ c之前编写自定义分类法$ c> _add_form_fields 在add_action（）中就像我在上面写的 product_categories _add_form_fields
Write your custom taxonomy before _add_form_fields in add_action() Like I write above"product_categories"_add_form_fields
然后我们保存元项值
<?php
add_action('created_product_categories', 'save_term_image', 10, 2);
function save_term_image($term_id, $tt_id) {
if (isset($_POST['txt_upload_image']) && '' !== $_POST['txt_upload_image']){
$group = '#' . sanitize_title($_POST['txt_upload_image']);
add_term_meta($term_id, 'term_image', $group, true);
}
}
?>
与上面相同，在 created _ 在add_action中，例如 created_product_categories
Same as above write your taxonomy name after created_ in add_action Like created_product_categories
现在，我们为编辑
add_action('product_categories_edit_form_fields', 'edit_image_upload', 10, 2);
function edit_image_upload($term, $taxonomy) {
// get current group
$txt_upload_image = get_term_meta($term->term_id, 'term_image', true);
?>
<div class="form-field term-group">
<label for="">Upload and Image</label>
<input type="text" name="txt_upload_image" id="txt_upload_image" value="<?php echo $txt_upload_image ?>" style="width: 77%">
<input type="button" id="upload_image_btn" class="button" value="Upload an Image" />
</div>
<?php
}
现在保存修改后的值
add_action('edited_product_categories', 'update_image_upload', 10, 2);
function update_image_upload($term_id, $tt_id) {
if (isset($_POST['txt_upload_image']) && '' !== $_POST['txt_upload_image']){
$group = '#' . sanitize_title($_POST['txt_upload_image']);
update_term_meta($term_id, 'term_image', $group);
}
}
现在我们将移至** JS 用于WordPress Media Uploader的文件**
Now we Move to **JS File for WordPress Media Uploader**
media-uploader.js
media-uploader.js
jQuery(document).ready(function($){
// Instantiates the variable that holds the media library frame.
var meta_image_frame;
// Runs when the image button is clicked.
$('#upload_image_btn').click(function(e){
// Prevents the default action from occuring.
e.preventDefault();
// If the frame already exists, re-open it.
if ( meta_image_frame ) {
meta_image_frame.open();
return;
}
// Sets up the media library frame
meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
title: meta_image.title,
button: { text: meta_image.button },
library: { type: 'image' }
});
// Runs when an image is selected.
meta_image_frame.on('select', function(){
// Grabs the attachment selection and creates a JSON representation of the model.
var media_attachment = meta_image_frame.state().get('selection').first().toJSON();
// Sends the attachment URL to our custom image input field.
$('#txt_upload_image').val(media_attachment.url);
});
// Opens the media library frame.
meta_image_frame.open();
});
});
现在是最后一步
转到 functions.php
function image_uploader_enqueue() {
global $typenow;
if( ($typenow == 'products') ) {
wp_enqueue_media();
wp_register_script( 'meta-image', get_template_directory_uri() . '/js/media-uploader.js', array( 'jquery' ) );
wp_localize_script( 'meta-image', 'meta_image',
array(
'title' => 'Upload an Image',
'button' => 'Use this Image',
)
);
wp_enqueue_script( 'meta-image' );
}
}
add_action( 'admin_enqueue_scripts', 'image_uploader_enqueue' );
调用图片
调用图像
<?php
$categories = get_terms('product_categories');
foreach($categories as $term) {
$upload_image = get_term_meta($term->term_id, 'term_image', true);
?>
<img src="<?php echo $upload_image ?>">
<?php
}
?>
这是我的工作代码，请谨慎使用。
Its my working code so please use it carefully.
希望此代码对您有帮助。如果此代码有效，请接受我的回答：）
Hope this code will help you. And if this code work just accept my answer :)
这篇关于管理面板中的自定义分类图像选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
