/ Wordpress / Загрузчик изображений для таксономии

Загрузчик изображений для таксономии

HIT

12.07.2017

2363

Создаем загрузчик изображений для термина таксономии. Данный пост содержит чистый метод создания metabox для термина таксономии. Есть более универсальный метод добавления изображений терминам, но нижеописанный способ может стать дополнительным, когда одного изображения не достаточно.

Создание метабокса-загрузчика

if ( ! class_exists( 'CT_TAX_META' ) ) {

class CT_TAX_META {

  public function __construct() {
    //
  }
 
 /*
  * Initialize the class and start calling our hooks and filters
  * @since 1.0.0
 */
 public function init() {
   add_action( 'product_tag_add_form_fields', array ( $this, 'add_product_tag_image' ), 10, 2 );
   add_action( 'created_product_tag', array ( $this, 'save_product_tag_image' ), 10, 2 );
   add_action( 'product_tag_edit_form_fields', array ( $this, 'update_product_tag_image' ), 10, 2 );
   add_action( 'edited_product_tag', array ( $this, 'updated_product_tag_image' ), 10, 2 );
   add_action( 'admin_footer', array ( $this, 'add_script' ) );
 }
 
 /*
  * Add a form field in the new product_tag page
  * @since 1.0.0
 */
 public function add_product_tag_image ( $taxonomy ) { ?>
   <div class="form-field term-group">
     <label for="product_tag-image-id"><?php _e('Image', 'hero-theme'); ?></label>
     <input type="hidden" id="product_tag-image-id" name="product_tag-image-id" class="custom_media_url" value="">
     <div id="product_tag-image-wrapper"></div>
     <p>
       <input type="button" class="button button-secondary ct_tax_media_button" id="ct_tax_media_button" name="ct_tax_media_button" value="<?php _e( 'Add Image', 'hero-theme' ); ?>" />
       <input type="button" class="button button-secondary ct_tax_media_remove" id="ct_tax_media_remove" name="ct_tax_media_remove" value="<?php _e( 'Remove Image', 'hero-theme' ); ?>" />
    </p>
   </div>
 <?php
 }
 
 /*
  * Save the form field
  * @since 1.0.0
 */
 public function save_product_tag_image ( $term_id, $tt_id ) {
   if( isset( $_POST['product_tag-image-id'] ) && '' !== $_POST['product_tag-image-id'] ){
     $image = $_POST['product_tag-image-id'];
     add_term_meta( $term_id, 'product_tag-image-id', $image, true );
   }
 }
 
 /*
  * Edit the form field
  * @since 1.0.0
 */
 public function update_product_tag_image ( $term, $taxonomy ) { ?>
   <tr class="form-field term-group-wrap">
     <th scope="row">
       <label for="product_tag-image-id"><?php _e( 'Image', 'hero-theme' ); ?></label>
     </th>
     <td>
       <?php $image_id = get_term_meta ( $term -> term_id, 'product_tag-image-id', true ); ?>
       <input type="hidden" id="product_tag-image-id" name="product_tag-image-id" value="<?php echo $image_id; ?>">
       <div id="product_tag-image-wrapper">
         <?php if ( $image_id ) { ?>
           <?php echo wp_get_attachment_image ( $image_id, 'thumbnail' ); ?>
         <?php } ?>
       </div>
       <p>
         <input type="button" class="button button-secondary ct_tax_media_button" id="ct_tax_media_button" name="ct_tax_media_button" value="<?php _e( 'Add Image', 'hero-theme' ); ?>" />
         <input type="button" class="button button-secondary ct_tax_media_remove" id="ct_tax_media_remove" name="ct_tax_media_remove" value="<?php _e( 'Remove Image', 'hero-theme' ); ?>" />
       </p>
     </td>
   </tr>
 <?php
 }

/*
 * Update the form field value
 * @since 1.0.0
 */
 public function updated_product_tag_image ( $term_id, $tt_id ) {
   if( isset( $_POST['product_tag-image-id'] ) && '' !== $_POST['product_tag-image-id'] ){
     $image = $_POST['product_tag-image-id'];
     update_term_meta ( $term_id, 'product_tag-image-id', $image );
   } else {
     update_term_meta ( $term_id, 'product_tag-image-id', '' );
   }
 }

/*
 * Add script
 * @since 1.0.0
 */
 public function add_script() { ?>
   <script>
     jQuery(document).ready( function($) {
       function ct_media_upload(button_class) {
         var _custom_media = true,
         _orig_send_attachment = wp.media.editor.send.attachment;
         $('body').on('click', button_class, function(e) {
           var button_id = '#'+$(this).attr('id');
           var send_attachment_bkp = wp.media.editor.send.attachment;
           var button = $(button_id);
           _custom_media = true;
           wp.media.editor.send.attachment = function(props, attachment){
             if ( _custom_media ) {
               $('#product_tag-image-id').val(attachment.id);
               $('#product_tag-image-wrapper').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" />');
               $('#product_tag-image-wrapper .custom_media_image').attr('src',attachment.sizes.thumbnail.url).css('display','block');
             } else {
               return _orig_send_attachment.apply( button_id, [props, attachment] );
             }
            }
         wp.media.editor.open(button);
         return false;
       });
     }
     ct_media_upload('.ct_tax_media_button.button'); 
     $('body').on('click','.ct_tax_media_remove',function(){
       $('#product_tag-image-id').val('');
       $('#product_tag-image-wrapper').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" />');
     });
     // Thanks: http://stackoverflow.com/questions/15281995/wordpress-create-product_tag-ajax-response
     $(document).ajaxComplete(function(event, xhr, settings) {
       var queryStringArr = settings.data.split('&');
       if( $.inArray('action=add-tag', queryStringArr) !== -1 ){
         var xml = xhr.responseXML;
         $response = $(xml).find('term_id').text();
         if($response!=""){
           // Clear the thumb image
           $('#product_tag-image-wrapper').html('');
         }
       }
     });
   });
 </script>
 <?php }

  }
 
$CT_TAX_META = new CT_TAX_META();
$CT_TAX_META -> init();
 
}

Таксономию можно менять в Notepad++ путем поиска и замены. Естественно данный код можно оформить в виде плагина. Решение это нашел на сайте catapultthemes.com.

Вывод изображения

Получаем объект таксономии, из него получаем ID термина таксономии, далее

$image_id = get_term_meta ( $term->term_id, 'product_tag-image-id', true );
echo wp_get_attachment_image ( $image_id, 'large' );

Пример: вызов изображения метки товара, и последующий его вывод в карточке товара

function tag_actions_woocommerce() {

global $post;

$actions_id = wp_get_object_terms($post->ID, 'product_tag');

foreach ($actions_id as $action_id) :

$image_id = get_term_meta ( $action_id->term_id, 'product_tag-image-id', true );

echo wp_get_attachment_image ( $image_id, 'full' );

endforeach;

}
add_action( 'woocommerce_single_product_summary', 'tag_actions_woocommerce', 15 );
[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
Metabox woocommerce

Metabox woocommerce

У плагина woocommerce есть набор дополнительных полей при редактировании товара. При необходимости можно в группы полей WC добавить свои произвольные metabox. Должно получится так: Создание и отображение metabox Первый экшн Читать далее »

/
Создание metabox

Создание metabox

Metabox — это произвольное поле реализованное в виде специальной формы (оболочка для PostMeta). Создание metabox’а самостоятельно — лучшая альтернатива плагину Advanced custom fields, особенно для релизации доп.полей в плагинах. Создание Читать далее »

Metabox для таксономии

Metabox для таксономии

Учимся создавать метаполя для терминов таксономии, оформлять их в виде metabox’а, а также выводить их во frontend. Визуальный редактор для описания терминов Превратить текстовое поле в стандартный визуальный редактор WP Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Загрузчик изображений для таксономии
Облако меток, категорий, таксономий
Рекомендации для васОблако меток, категорий, таксономийOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.