woocommerceのカスタム管理画像アップロードメタボックスフィールドを商品カテゴリ

Question

に追加しています。私はカスタムテーマを扱っており、woocommerce管理セクションにカスタムアップロードフィールドを追加したいと考えています。特に、カテゴリのセクション。情報を保存するサムネイルアップロードと同じように、別のフィールドを追加したいと思います。

raunak-guptaAdding custom field to product category in WooCommerceは、これを引き継いでこれを作り出しました。助けて？？？

を追加しましたが..私は出来上がり

function my_admin_scripts() { 
    wp_enqueue_media(); 

    wp_register_script('wina_classic-uadmin-js', get_template_directory_uri() . '/js/uploader.js', array('jquery','media-upload','thickbox'), '20130115', true); 
    wp_enqueue_script('wina_classic-uadmin-js'); 
} 

add_action('admin_print_scripts', 'my_admin_scripts'); 

、その後のfunctions.php内のメディアアップローダーと呼ば

jQuery(document).ready(function($){ 

    var mediaUploader_woo; 

    $('#upload-button-woo').on('click',function(e) { 
     e.preventDefault(); 
     if(mediaUploader_woo){ 
      mediaUploader_woo.open(); 
      return; 
     } 

     mediaUploader_woo = wp.media.frames.file_frame = wp.media({ 
      title: 'Choose an Image', 
      button: { text: 'Choose Image'}, 
      multiple: false 
     }); 

     mediaUploader_woo.on('select', function(){ 
      attachment = mediaUploader_woo.state().get('selection').first().toJSON(); 
      $('#meta-woo').val(attachment.url); 
     }); 

     mediaUploader_woo.open(); 
    });  

}); 

uploader.js

/*------------------------------------------------------------------- 
    Add Custom metabox for woocommerce Category page 
---------------------------------------------------------------------*/ 

function product_cat_add_video_field_rj() { 

    ?> 
    <div class="form-field"> 
     <label for="term_meta[video_link]"><?php _e('Video Link', 'flatsome'); ?></label> 
     <input type="text" name="term_meta[video_link]" id="term_meta[video_link]" value=""> 
     <p class="description"><?php _e('Enter a Video Link','flatsome'); ?></p> 
    </div> 
<?php 
} 
function product_cat_edit_video_field_rj($term) { 


    $t_id = $term->term_id; 

    $term_meta = get_option("taxonomy_$t_id"); ?> 
    <tr class="form-field"> 
    <th scope="row" valign="top"><label for="term_meta[video_link]"><?php _e('Video Link', 'flatsome'); ?></label></th> 
     <td>    
      <input type="text" name="term_meta[video_link]" id="meta-woo" value="<?php echo esc_attr($term_meta['video_link']) ? esc_attr($term_meta['video_link']) : ''; ?>" style="margin-left: 0px; margin-right: 0px; width: 50%;" /> 
      <input type="button" class="button button-secondary" value="Upload Image" id="upload-button-woo" /> 
      <p class="description"><?php _e('Enter a Video Link','flatsome'); ?></p> 
     </td> 
    </tr> 
<?php 
} 

// this action use for add field in add form of taxonomy 
add_action('product_cat_add_form_fields', 'product_cat_add_video_field_rj', 10, 2); 
// this action use for add field in edit form of taxonomy 
add_action('product_cat_edit_form_fields', 'product_cat_edit_video_field_rj', 10, 2); 

function product_cat_video_link_save($term_id) { 
    if (isset($_POST['term_meta'])) { 
     $t_id = $term_id; 
     $term_meta = get_option("taxonomy_$t_id"); 
     $cat_keys = array_keys($_POST['term_meta']); 
     foreach ($cat_keys as $key) { 
      if (isset ($_POST['term_meta'][$key])) { 
       $term_meta[$key] = $_POST['term_meta'][$key]; 
      } 
     } 
     update_option("taxonomy_$t_id", $term_meta); 
    } 
} 


// this action use for save field value of edit form of taxonomy 
add_action('edited_product_cat', 'product_cat_video_link_save', 10, 2); 
// this action use for save field value of add form of taxonomy 
add_action('create_product_cat', 'product_cat_video_link_save', 10, 2); 

PS：このコードは保存しませんか保存したデータをテキストフィールドに再現します。

Answer 1

数時間後、私は

の下にこのコードを思い付いた

//call for woocommerce custom admin image code  
require get_template_directory() . '/inc/woo-meta-category.php'; 

/*-------------------------------------------------------------------------------------- 
    Uploader JS 
----------------------------------------------------------------------------------------*/ 
function my_admin_scripts() { 
    wp_enqueue_media(); 

    wp_register_script('wina_classic-uadmin-js', get_template_directory_uri() . '/js/uploader.js', 
             array('jquery','media-upload','thickbox'), '20130115', true); 
    wp_enqueue_script('wina_classic-uadmin-js'); 
} 

add_action('admin_print_scripts', 'my_admin_scripts'); 

をのfunctions.phpする機能を追加

jQuery(document).ready(function($){ 

    var mediaUploader_woo; 

    $('#upload-button-woo').on('click',function(e) { 
     e.preventDefault(); 
     if(mediaUploader_woo){ 
      mediaUploader_woo.open(); 
      return; 
     } 

     mediaUploader_woo = wp.media.frames.file_frame = wp.media({ 
      title: 'Choose an Image', 
      button: { text: 'Choose Image'}, 
      multiple: false 
     }); 

     mediaUploader_woo.on('select', function(){ 
      attachment = mediaUploader_woo.state().get('selection').first().toJSON(); 
      $('#category-meta-woo').val(attachment.url); 
      $('#category-header-preview').attr('src', ''+ attachment.url + ''); 
     }); 

     mediaUploader_woo.open(); 
    });  

}); 

uploader.js/JSにメディアアップローダーJavascriptを追加します。最後に/inc/woo-meta-category.phpファイルに以下のコードを追加してください

<?php 

/*------------------------------------------------------------------- 
    Add Custom metabox for woocommerce Category page 
---------------------------------------------------------------------*/ 

function product_cat_add_cat_head_field_rj() { ?> 
    <div class="form-field"> 
     <label for="term_meta[cat_head_link]"><?php _e('Category Page Image', 'wina-classic'); ?></label> 
     <input type="text" name="term_meta[cat_head_link]" id="term_meta[cat_head_link]" value=""> 
     <p class="description"><?php _e('Upload Category Page Image','wina-classic'); ?></p> 
    </div> 
<?php } 

function product_cat_edit_cat_head_field_rj($term) { 
    $t_id = $term->term_id; $term_meta = get_option("taxonomy_$t_id"); ?> 

    <tr class="form-field"> 
    <th scope="row" valign="top"><label for="term_meta[cat_head_link]"><?php _e('Category Page Image', 'wina-classic'); ?></label></th> 
     <td> 
      <img src="<?php echo esc_attr($term_meta['cat_head_link']) ? esc_attr($term_meta['cat_head_link']) : ''; ?>" height="60" width="120" id="category-header-preview" /> 
      <input type="hidden" name="term_meta[cat_head_link]" id="category-meta-woo" value="<?php echo esc_attr($term_meta['cat_head_link']) ? esc_attr($term_meta['cat_head_link']) : ''; ?>" style="margin-left: 0px; margin-right: 0px; width: 50%;" /> 
      <input type="button" class="button button-secondary" value="Upload Image" id="upload-button-woo" /> 
      <p class="description"><?php _e('Upload Category Page Image','wina-classic'); ?></p> 
     </td> 
    </tr> 
<?php 
} 

// this action use for add field in add form of taxonomy 
add_action('product_cat_add_form_fields', 'product_cat_add_cat_head_field_rj', 10, 2); 
// this action use for add field in edit form of taxonomy 
add_action('product_cat_edit_form_fields', 'product_cat_edit_cat_head_field_rj', 10, 2); 

function product_cat_cat_head_link_save($term_id) { 
    if (isset($_POST['term_meta'])) { 
     $t_id = $term_id; 
     $term_meta = get_option("taxonomy_$t_id"); 
     $cat_keys = array_keys($_POST['term_meta']); 
     foreach ($cat_keys as $key) { 
      if (isset ($_POST['term_meta'][$key])) { 
       $term_meta[$key] = $_POST['term_meta'][$key]; 
      } 
     } 
     update_option("taxonomy_$t_id", $term_meta); 
    } 
} 

// this action use for save field value of edit form of taxonomy 
add_action('edited_product_cat', 'product_cat_cat_head_link_save', 10, 2); 
// this action use for save field value of add form of taxonomy 
add_action('create_product_cat', 'product_cat_cat_head_link_save', 10, 2); 

フロントエンドで

global $post; 

//for product cat archive page only 
$term = get_queried_object(); 
$cutomPageImageOption = get_option('taxonomy_' . $term->term_id); 
$cutomPageImage = $cutomPageImageOption['cat_head_link']; 

if ($cutomPageImage > 1) { echo "Please add a category head image in the admin panel"; } 
?> 

<section id="page-header" class="page-header" style="background-image: url('<?php echo $cutomPageImage; ?>"> 
    <div class="container"> 
     <div class="row"> 
      <?php if (apply_filters('woocommerce_show_page_title', true)) : ?> 
       <h1><?php woocommerce_page_title(); ?></h1> 
      <?php endif; ?> 

     </div> 
    </div> 
</section>