Hướng dẫn cách thêm ảnh vào category or tag or taxonomy (ok)

Bước 1: Tạo dư mục inc trong themes và tạo file brand.php
Nội dung file brand.php 
<?php
// hook into the init action and call create_product_taxonomies when it fires
add_action( 'init', 'create_product_taxonomies', 0 );

// create two taxonomies, brands and writers for the post type "product"
function create_product_taxonomies() {
	// Add new taxonomy, make it hierarchical (like categories)
	$labels = array(
		'name'              => _x( 'Brands', 'taxonomy general name', 'textdomain' ),
		'singular_name'     => _x( 'Brand', 'taxonomy singular name', 'textdomain' ),
		'search_items'      => __( 'Search Brands', 'textdomain' ),
		'all_items'         => __( 'All Brands', 'textdomain' ),
		'parent_item'       => __( 'Parent Brand', 'textdomain' ),
		'parent_item_colon' => __( 'Parent Brand:', 'textdomain' ),
		'edit_item'         => __( 'Edit Brand', 'textdomain' ),
		'update_item'       => __( 'Update Brand', 'textdomain' ),
		'add_new_item'      => __( 'Add New Brand', 'textdomain' ),
		'new_item_name'     => __( 'New Brand Name', 'textdomain' ),
		'menu_name'         => __( 'Brand', 'textdomain' ),
	);

	$args = array(
		'hierarchical'      => true,
		'labels'            => $labels,
		'show_ui'           => true,
		'show_admin_column' => true,
		'query_var'         => true,
		'rewrite'           => array( 'slug' => 'brand' ),
	);
	register_taxonomy( 'brand', array( 'post' ), $args );
	//	brand đây là taxonomy=brand
	//	array('post') ở đây bạn có thể thay là page ...
}
//Plugin Name: cat meta
function brand_term_meta_scripts_n_style($hook){
	global $typenow;
	if($typenow == 'post' && ($hook == 'edit-tags.php' ||  $hook == 'term.php' ) ){
		wp_enqueue_media();
		wp_enqueue_script('cat-term-img-js',   get_template_directory_uri() . '/js/cat_tmg.js', array('jquery') );
	}	
}
add_action('admin_enqueue_scripts','brand_term_meta_scripts_n_style');
// form field add
function brand_img_term_meta(){
	wp_nonce_field(basename(__FILE__),'cat_img_nonce');
	?>
	<div class="form-field ">
		<label for="cat_term_img">Image</label>
		<input name="cat_term_img" id="cat_term_img" type="text" value="" size="40" aria-required="true">
		<div class="cat-img-con"></div>
		<input type="button" id="add_cat_img" class="button button-primary cat__img" value="Add Image" />
		<p>Add brand Image</p>
	</div>
	<?php
}
add_action('brand_add_form_fields','brand_img_term_meta');
//	edit function
function edit_brand_trm_img($term){
	wp_nonce_field(basename(__FILE__),'cat_img_nonce');
	if(get_term_meta($term->term_id, 'cat_term_img', true )):
	?>
	<tr class="form-field ">
			<th scope="row"><label for="cat_term_img">url</label></th>
			<td><input name="cat_term_img" id="cat_term_img" type="text" value="<?php echo get_term_meta($term->term_id, 'cat_term_img', true ); ?>" size="40" aria-required="true">
			<div class="cat-img-con"> <img src="<?php echo get_term_meta($term->term_id, 'cat_term_img', true ); ?>" style="width:40%;" alt="" /></div>
			<input type="button" id="add_cat_img" class="button button-primary cat__img" value="Replae Image" />
			<input type="button" id="remove_cat_img" class="button button-primary " value="Remove Image" />
			<p>Add or remove band Image</p></td>
	</tr>
	<?php
	else: ?>
	<tr class="form-field ">
			<th scope="row"><label for="cat_term_img">Name</label></th>
			<td><input name="cat_term_img" id="cat_term_img" type="text" value="" size="40" aria-required="true">
			<div class="cat-img-con"> </div>
			<input type="button" id="add_cat_img" class="button button-primary cat__img" value="Add Image" />
			<p>Add brand Image</p></td>
	</tr>
	<?php
	endif;
}
add_action('brand_edit_form_fields','edit_brand_trm_img');
//save function
function brand_img_save_meta($term_id){
	if(!isset($_POST['cat_img_nonce'])){
		return;
	}
	if(!wp_verify_nonce($_POST['cat_img_nonce'], basename(__FILE__) )){
		return;
	}
	if(isset($_POST['cat_term_img'])){
		update_term_meta($term_id, 'cat_term_img', esc_url_raw($_POST['cat_term_img']) );
	}
	
	
}
add_action('create_brand','brand_img_save_meta');
add_action('edit_brand','brand_img_save_meta');

// Thêm một khung nhập ảnh đại diện vào category
function cat_term_meta_scripts_n_style($hook){
	global $typenow;
	var_dump($typenow); //edit-tags.php term.php post
	if($typenow == 'post' && ($hook == 'edit-tags.php' ||  $hook == 'term.php' ) ){
		wp_enqueue_media();
		wp_enqueue_script('cat-term-img-js',  plugin_dir_url( __FILE__ ) . '/js/cat_tmg.js', array('jquery') );
		
	}
}
add_action('admin_enqueue_scripts','cat_term_meta_scripts_n_style');
// form field add
function cat_img_term_meta(){
	wp_nonce_field(basename(__FILE__),'cat_img_nonce');
	?>
	<div class="form-field ">
		<label for="cat_term_img">Name</label>
		<input name="cat_term_img" id="cat_term_img" type="text" value="" size="40" aria-required="true">
		<div class="cat-img-con"></div>
		<input type="button" id="add_cat_img" class="button button-primary cat__img" value="Add Image" />
		<p>Add category Image</p>
	</div>
	<?php
}
add_action('category_add_form_fields','cat_img_term_meta');
//edit function
function edit_cai_trm_img($term){
	wp_nonce_field(basename(__FILE__),'cat_img_nonce');
	
	
	if(get_term_meta($term->term_id, 'cat_term_img', true )):
	?>
	
	<tr class="form-field ">
			<th scope="row"><label for="cat_term_img">Image</label></th>
			<td><input name="cat_term_img" id="cat_term_img" type="text" value="<?php echo get_term_meta($term->term_id, 'cat_term_img', true ); ?>" size="40" aria-required="true">
			<div class="cat-img-con"> <img src="<?php echo get_term_meta($term->term_id, 'cat_term_img', true ); ?>" style="width:40%;" alt="" /></div>
			<input type="button" id="add_cat_img" class="button button-primary cat__img" value="Replae Image" />
			<input type="button" id="remove_cat_img" class="button button-primary " value="Remove Image" />
			<p>Add or remove category Image</p></td>
	</tr>
	<?php
	else: ?>
	<tr class="form-field ">
			<th scope="row"><label for="cat_term_img">Image</label></th>
			<td><input name="cat_term_img" id="cat_term_img" type="text" value="" size="40" aria-required="true">
			<div class="cat-img-con"> </div>
			<input type="button" id="add_cat_img" class="button button-primary cat__img" value="Add Image" />
			<p>Add Category Image</p></td>
	</tr>
	<?php
	endif;
}
add_action('category_edit_form_fields','edit_cai_trm_img');
//	save function
function cat_img_save_meta($term_id){
	if(!isset($_POST['cat_img_nonce'])){
		return;
	}
	if(!wp_verify_nonce($_POST['cat_img_nonce'], basename(__FILE__) )){
		return;
	}
	if(isset($_POST['cat_term_img'])){
		update_term_meta($term_id, 'cat_term_img', esc_url_raw($_POST['cat_term_img']) );
	}
}
add_action('create_category','cat_img_save_meta');
add_action('edit_category','cat_img_save_meta');
//Thêm một khung nhập ảnh đại diện vào tag
function post_tag_term_meta_scripts_n_style($hook){
	global $typenow;
	if($typenow == 'post_tag' && ($hook == 'edit-tags.php' ||  $hook == 'term.php' ) ){
		wp_enqueue_media();
		wp_enqueue_script('cat-term-img-js',   get_template_directory_uri() . '/js/cat_tmg.js', array('jquery') );
	}	
}
add_action('admin_enqueue_scripts','post_tag_term_meta_scripts_n_style');
// form field add
function post_tag_img_term_meta(){
	wp_nonce_field(basename(__FILE__),'cat_img_nonce');
	?>
	<div class="form-field ">
		<label for="cat_term_img">Image</label>
		<input name="cat_term_img" id="cat_term_img" type="text" value="" size="40" aria-required="true">
		<div class="cat-img-con"></div>
		<input type="button" id="add_cat_img" class="button button-primary cat__img" value="Add Image" />
		<p>Add Tag Image</p>
	</div>
	<?php
}
add_action('post_tag_add_form_fields','post_tag_img_term_meta');
//	edit function
function edit_post_tag_trm_img($term){
	wp_nonce_field(basename(__FILE__),'cat_img_nonce');
	if(get_term_meta($term->term_id, 'cat_term_img', true )):
	?>
	<tr class="form-field ">
			<th scope="row"><label for="cat_term_img">url</label></th>
			<td><input name="cat_term_img" id="cat_term_img" type="text" value="<?php echo get_term_meta($term->term_id, 'cat_term_img', true ); ?>" size="40" aria-required="true">
			<div class="cat-img-con"> <img src="<?php echo get_term_meta($term->term_id, 'cat_term_img', true ); ?>" style="width:40%;" alt="" /></div>
			<input type="button" id="add_cat_img" class="button button-primary cat__img" value="Replae Image" />
			<input type="button" id="remove_cat_img" class="button button-primary " value="Remove Image" />
			<p>Add or remove band Image</p></td>
	</tr>
	<?php
	else: ?>
	<tr class="form-field ">
			<th scope="row"><label for="cat_term_img">Name</label></th>
			<td><input name="cat_term_img" id="cat_term_img" type="text" value="" size="40" aria-required="true">
			<div class="cat-img-con"> </div>
			<input type="button" id="add_cat_img" class="button button-primary cat__img" value="Add Image" />
			
			<p>Add brand Image</p></td>
	</tr>
	<?php
	endif;
}
add_action('post_tag_edit_form_fields','edit_post_tag_trm_img');
//save function
function post_tag_img_save_meta($term_id){
	if(!isset($_POST['cat_img_nonce'])){
		return;
	}
	if(!wp_verify_nonce($_POST['cat_img_nonce'], basename(__FILE__) )){
		return;
	}
	if(isset($_POST['cat_term_img'])){
		update_term_meta($term_id, 'cat_term_img', esc_url_raw($_POST['cat_term_img']) );
	}
}
add_action('create_post_tag','post_tag_img_save_meta');
add_action('edit_post_tag','post_tag_img_save_meta');
Bước 2: Tạo file cat_tmg.js
jQuery(document).ready(function($){
  var frame;
      
  // ADD IMAGE LINK
  $('#add_cat_img').on( 'click', function( event ){
    
    event.preventDefault();
    
    // If the media frame already exists, reopen it.
    if ( frame ) {
      frame.open();
      return;
    }
    
    // Create a new media frame
    frame = wp.media({
      title: 'Add Category Image',
      button: {
        text: 'Insert Into Category'
      },
      multiple: false  
    });
   
  
    frame.on( 'select', function() {
      
      
      var attachment = frame.state().get('selection').first().toJSON();

    
      $('.cat-img-con').html( '<img src="'+attachment.url+'" alt="" style="width:40%;"/>' );

      
      $('#cat_term_img').val( attachment.url );

      
    });

    
    frame.open();
  });
	
	// DELETE IMAGE LINK
  $('#remove_cat_img').on( 'click', function( event ){

    event.preventDefault();
  $('.cat-img-con').html( '' );

    $('#cat_term_img').val( '' );

  });
});
Bước 3:
Vào file functions.php dán code này vào :)
include( get_template_directory(). '/inc/brand.php' );
Bước 4: 
Hướng dẫn cách lấy ảnh :)
Bạn vô wp_termmeta lấy meta_key ví dụ: cat_term_img sau đó bạn sử dụng function echo get_term_meta(10, "cat_term_img",true);

Last updated