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);
PreviousCâu lệnh thường hay sử dụng xin vui lòng tham khảo ở dây (ok)NextHướng dẫn tạo button add sản phẩm đến danh sách wishlist (ok)
Last updated