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

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

HIT

12.07.2017

1063

Создаем загрузчик изображений для термина таксономии. Данный пост содержит чистый метод создания 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 );

Тэги: ,

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Продвинутые metabox

Продвинутые metabox

Существую станданртные metabox: text, textarea (область текста), checkbox, radiobutton, selectbox (выпадающий список). Но помимо этих существуют более сложные metabox’ы, рассмотрим их. Metabox редактор WYSIWYG (старый способ) Metabox редактор WYSIWYG (новый Читать далее »

Metabox woocommerce

Metabox woocommerce

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

/
Создание metabox’а

Создание metabox’а

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

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

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

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