سارویس.

شاید شما هم مثل من بخواید تصویر شاخص به دسته بندی‌هاتون اضافه کنید یا حتی میخواید تصویر شاخص به taxonomy سفارشی اضافه کنید. در کل تفاوتی نداره! توی این نوشته میخوایم بدون استفاده از افزونه ها و با نوشتن یه سری توابع، تصویر شاخص به دسته بندی ها و taxonomy های وردپرسمون اضافه کنیم. البته برای افرادی که مبتدی هستن کدها رو به شکل افزونه در آخر پست قرار دادم که میتونن دانلود کنن و بسادگی نصب افزونه ازش استفاده کنن. امیدوارم این نوشته براتون مفید واقع بشه 😉

اضافه کردن فیلد تصویر شاخص به دسته بندی‌ها

خب بریم سراغ اضافه کردن فیلد تصویر شاخص به دسته بندی های وردپرس! در اینجا من برای ایجاد این بخش سعی کردم از کدی استاندارد استفاده کنم. جزئیات مربوط به کد رو بصورت کامل براتون توضیح میدم و با هم پیاده سازییش میکنیم.

آموزش های زیادی برای افزودن تصویر شاخص به دسته بندی‌های وردپرس وجود داره اما بیشتر از یه روش قدیمی استفاده می کنن که طبق اون روش، داده‌ها در گزینه های پوسته ذخیره میشن. اما از زمان وردپرس 4.4 به بعد، امکان ذخیره داده‌های متا برای taxonomies امکان پذیر شد. در وهله دوم ، من می خواستم توانایی بارگذاری یک تصویر برای دسته بندی ها رو با استفاده از مدیر رسانه پیش فرض وردپرس داشته باشم. بنابراین به کلاس زیر رسیدم:
(کد کامل و نهایی به شکل زیر هست که اگر قصد استفاده از اون در بخش functions.php رو دارید باید تغییراتی در اون ایجاد کنید. اگر میخواید اطلاعات بیشتری در رابطه با کد بدست بیارید، ادامه نوشته رو مطالعه کنید)

<?php
if ( ! class_exists( 'SARVIS_TAX_META' ) ) {

class SARVIS_TAX_META {

  public function __construct() {
    //
  }
 
 /*
  * Initialize the class and start calling our hooks and filters
  * @since 1.0.0
 */
 public function init() {
   add_action( 'category_add_form_fields', array ( $this, 'add_category_image' ), 10, 2 );
   add_action( 'created_category', array ( $this, 'save_category_image' ), 10, 2 );
   add_action( 'category_edit_form_fields', array ( $this, 'update_category_image' ), 10, 2 );
   add_action( 'edited_category', array ( $this, 'updated_category_image' ), 10, 2 );
   add_action( 'admin_enqueue_scripts', array( $this, 'load_media' ) );
   add_action( 'admin_footer', array ( $this, 'add_script' ) );
 }

public function load_media() {
 wp_enqueue_media();
}
 
 /*
  * Add a form field in the new category page
  * @since 1.0.0
 */
 public function add_category_image ( $taxonomy ) { ?>
   <div class="form-field term-group">
     <label for="category-image-id"><?php _e('Image', 'your_textdomain'); ?></label>
     <input type="hidden" id="category-image-id" name="category-image-id" class="custom_media_url" value="">
     <div id="category-image-wrapper"></div>
     <p>
       <input type="button" class="button button-secondary sarvis_tax_media_button" id="sarvis_tax_media_button" name="sarvis_tax_media_button" value="<?php _e( 'Add Image', 'your_textdomain' ); ?>" />
       <input type="button" class="button button-secondary sarvis_tax_media_remove" id="sarvis_tax_media_remove" name="sarvis_tax_media_remove" value="<?php _e( 'Remove Image', 'your_textdomain' ); ?>" />
    </p>
   </div>
 <?php
 }
 
 /*
  * Save the form field
  * @since 1.0.0
 */
 public function save_category_image ( $term_id, $tt_id ) {
   if( isset( $_POST['category-image-id'] ) && '' !== $_POST['category-image-id'] ){
     $image = $_POST['category-image-id'];
     add_term_meta( $term_id, 'category-image-id', $image, true );
   }
 }
 
 /*
  * Edit the form field
  * @since 1.0.0
 */
 public function update_category_image ( $term, $taxonomy ) { ?>
   <tr class="form-field term-group-wrap">
     <th scope="row">
       <label for="category-image-id"><?php _e( 'Image', 'your_textdomain' ); ?></label>
     </th>
     <td>
       <?php $image_id = get_term_meta ( $term -> term_id, 'category-image-id', true ); ?>
       <input type="hidden" id="category-image-id" name="category-image-id" value="<?php echo $image_id; ?>">
       <div id="category-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 sarvis_tax_media_button" id="sarvis_tax_media_button" name="sarvis_tax_media_button" value="<?php _e( 'Add Image', 'your_textdomain' ); ?>" />
         <input type="button" class="button button-secondary sarvis_tax_media_remove" id="sarvis_tax_media_remove" name="sarvis_tax_media_remove" value="<?php _e( 'Remove Image', 'your_textdomain' ); ?>" />
       </p>
     </td>
   </tr>
 <?php
 }

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

/*
 * Add script
 * @since 1.0.0
 */
 public function add_script() { ?>
   <script>
     jQuery(document).ready( function($) {
       function sarvis_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 ) {
               $('#category-image-id').val(attachment.id);
               $('#category-image-wrapper').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" />');
               $('#category-image-wrapper .custom_media_image').attr('src',attachment.url).css('display','block');
             } else {
               return _orig_send_attachment.apply( button_id, [props, attachment] );
             }
            }
         wp.media.editor.open(button);
         return false;
       });
     }
     sarvis_media_upload('.sarvis_tax_media_button.button'); 
     $('body').on('click','.sarvis_tax_media_remove',function(){
       $('#category-image-id').val('');
       $('#category-image-wrapper').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" />');
     });
     $(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
           $('#category-image-wrapper').html('');
         }
       }
     });
   });
 </script>
 <?php }

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

توضیح کد نوشته شده

کد بالا کل کدی هست که میتونید باهاش تصویر شاخص به دسته بندی های خودتو اضافه کنید، خواستم نتیجه اول کار باشه که اگه کسی حوصله خوندن توضیحات رو نداشت راحت برداره و استفاده کنه. خب حالا بریم سراغ توضیحات درمورد کد بالا. در ابتدای کدمون میبینیم که یه کلاس ایجاد شده تا کد رو برای استفاده مجدد راحتتر بشه ازش استفاده کرد، اما در صورت تمایل میتونید به راحتی از این کد در فایل functions.php خودتون استفاده کنید. فقط باید کمی تغییرات در کد ایجاد کنید.

اضافه کردن عبارت جدید متادیتا (term)

خب بریم و کدمون رو پردازش کنیم؛ تابع add_category_image() فیلد جدیدی به فرم “افزودن دسته تازه” ما اضافه میکنه. شکل زیر:

/*
* Add a form field in the new category page
* @since 1.0.0
*/
public function add_category_image ( $taxonomy ) { ?>
	<div class="form-field term-group">
	 <label for="category-image-id"><?php _e('Image', 'your_textdomain'); ?></label>
	 <input type="hidden" id="category-image-id" name="category-image-id" class="custom_media_url" value="">
	 <div id="category-image-wrapper"></div>
	 <p>
	   <input type="button" class="button button-secondary sarvis_tax_media_button" id="sarvis_tax_media_button" name="sarvis_tax_media_button" value="<?php _e( 'Add Image', 'your_textdomain' ); ?>" />
	   <input type="button" class="button button-secondary sarvis_tax_media_remove" id="sarvis_tax_media_remove" name="sarvis_tax_media_remove" value="<?php _e( 'Remove Image', 'your_textdomain' ); ?>" />
	</p>
	</div>
<?php
}

نکته: جایی که نوشته شده your_textdomain توجه داشته باشید که text domain پوسته خودتون رو جایگزین کنید.

توجه کنید که ما شناسه تصویر شاخص رو در یک فیلد مخفی ذخیره می کنیم (تایپش رو hidden قرار میدیم) و بعد از اون thumbnail رو برای کاربر نمایش میدیم. همینطور دو تا دکمه هم اضافه می کنیم که یکی برای اضافه کردن و یکی برای حذف تصویر شاخص مورد استفاده قرار میگیره. البته با اضافه کردن این تیکه کد به تنهایی، اون دو تا دکمه کار نمیکنن چون باید کد جاوا اسکرپیت مربوط بهشون هم نوشته بشه.
و همچنین برای اجرا شدن تابع بالا باید اون رو با استفاده از hook فراخوانی کنیم. که ما اینکار رو در تابعی به نام init انجام میدیم.

add_action( 'category_add_form_fields', array ( $this, 'add_category_image' ), 10, 2 );

خب اینجا نکته ای که هست اگر نمیخواید این قسمت ایجاد شده توی دسته بندی ها باشه و قصد دارید به taxonomy مورد نظر خودتون اضافش کنید، به سادگی میتونید با تغییر در رشته category_add_form_fields و قرار دادن taxonomy slug مورد نظر بجای category، تابع رو به taxonomy که خودتون میدونید اضافه کنید. به همین سادگی؛ مثال:

add_action( 'taxonomy_add_form_fields', array ( $this, 'add_category_image' ), 10, 2 );

خب با اضافه کردن این قطعه کد به تابع init ، محتوای مورد نظر به بخش category یا taxonomy که slug اون رو به جای category گذاشتید اضافه میشه. اما همونطور که گفتم کار نمیکنن. برای اینکه اون‌ها از این حالت دربیاریم، از جاوااسکریپت استفاده میکنیم و بهشون وظیفه ای رو میدیم تا از این بیکاری دربیان. برای اینکار با استفاده از هوک admin_footer مقداری کد جاوااسکریپت رو به فوتر اضافه میکنیم. برای اینکار من تابعی تحت عنوان add_script ایجاد میکنم و توی تابع init اون به admin_footer قلابش میکنم.

add_action( 'admin_footer', array ( $this, 'add_script' ) );

حالا تابعمون رو مینویسم:

 public function add_script() { ?>
   <script>
     jQuery(document).ready( function($) {
       function sarvis_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 ) {
               $('#category-image-id').val(attachment.id);
               $('#category-image-wrapper').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" />');
               $('#category-image-wrapper .custom_media_image').attr('src',attachment.url).css('display','block');
             } else {
               return _orig_send_attachment.apply( button_id, [props, attachment] );
             }
            }
         wp.media.editor.open(button);
         return false;
       });
     }
     sarvis_media_upload('.sarvis_tax_media_button.button'); 
     $('body').on('click','.sarvis_tax_media_remove',function(){
       $('#category-image-id').val('');
       $('#category-image-wrapper').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" />');
     });
     $(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
           $('#category-image-wrapper').html('');
         }
       }
     });
   });
 </script>
 <?php }

برای فهمیدن این کد باید اندکی دانش جکوئری و ajax بلد باشید 🙂 یه توضیح کلی میدم بهتون که فقط بدونید چه اتفاقی داره میوفته.
الان اگه روی دکمه add image کلیک کنید، رسانه وردپرس باز میشه و میتونید یه تصویر انتخاب کنید.

بعد از انتخاب تصویر، شناسه تصویر انتخابی در فیلدی hidden، با شناسه category-image-id ذخیره میشود. این فیلدی هست که ما در واقع ذخیره خواهیم کرد. برای پیش نمایش تصویر به کاربر، از JQuery برای پر کردن div با شناسه (ID) category-image-wrapper استفاده میکنیم. این قسمت پیش نمایش اصلا ضروری نیست ولی برای تجربه کاربری بهتر، خوبه که باشه.

به همین ترتیب، اگر کاربر روی remove image بزنه، فیلد hidden پاک میشه و تصویر حذف میشه. سادست! تا اینجای کار تونستیم تصویر شاخص به دسته بندی ها اضافه کنیم اما حالا باید کاری کنیم که تصویر شاخص ذخیره بشه تا بتونیم نمایشش بدیم!

ذخیره متادیتا

در مرحله بعد، باید کاری کنیم وقتی که کاربر روی دکمه افزودن دسته جدید کلیک میکنه، اطلاعات توی فیلد تصویر، ذخیره بشه. برای انجام این کار، ما به قلاب created_category، که برای ذخیره سازی دسته بندی استفاده میشه، وصل میشیم. اگر از taxonomy دیگه ای استفاده میکنید باید شناسه یا اصطلاحا Slug اون رو بجای category بنویسید، مثال: created_taxonomy

add_action( 'created_category', array ( $this, 'save_category_image' ), 10, 2 );

و تابع save_category_image به این شکل نوشته میشه:

public function save_category_image ( $term_id, $tt_id ) {
   if( isset( $_POST['category-image-id'] ) && '' !== $_POST['category-image-id'] ){
     $image = $_POST['category-image-id'];
     add_term_meta( $term_id, 'category-image-id', $image, true );
   }
 }

این تابع هم دقیقا مثل add_post_meta عمل میکنه و مقدار فیلد category-iamge-id ما (که شامل شناسه پیوست است) در شناسه دسته بندی ذخیره میکنه.

بروزرسانی متادیتا

خب الان کار ذخیره سازی به خوبی انجام میشه و اگر بخوایم تصویر شاخص به دسته بندی اضافه کنیم بدون هیچ مشکل ممکنه! اما اگر بخوایم تصویر شاخص دسته بندی رو بروز رسانی کنیم چی؟
خب اول باید همون فیلدهایی که به فرم “افزودن دسته” اضافه کردیم رو به فرم “ویرایش دسته” هم اضافه کنیم. برای اینکار از hook یا همون قلاب category_edit_form_fields استفاده میکنیم. اگه taxonomy دیگه ای مد نظرتونه بجای category توی قلاب slug یا شناسه اون taxnomy رو وارد کنید. درست مثل قبلی ها! و فکر میکنم دیگه خودتون باید بدونید قطعه کد زیر رو مثل سایر add_action ها به تابع init اضافه میکنیم 🙂 :

add_action( 'category_edit_form_fields', array ( $this, 'update_category_image' ), 10, 2 );

و تابع اضافه کردن فیلد ها به فرم “ویرایش دسته” رو به شکل زیر نوشتم:

 public function update_category_image ( $term, $taxonomy ) { ?>
   <tr class="form-field term-group-wrap">
     <th scope="row">
       <label for="category-image-id"><?php _e( 'Image', 'your_textdomain' ); ?></label>
     </th>
     <td>
       <?php $image_id = get_term_meta ( $term -> term_id, 'category-image-id', true ); ?>
       <input type="hidden" id="category-image-id" name="category-image-id" value="<?php echo $image_id; ?>">
       <div id="category-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 sarvis_tax_media_button" id="sarvis_tax_media_button" name="sarvis_tax_media_button" value="<?php _e( 'Add Image', 'your_textdomain' ); ?>" />
         <input type="button" class="button button-secondary sarvis_tax_media_remove" id="sarvis_tax_media_remove" name="sarvis_tax_media_remove" value="<?php _e( 'Remove Image', 'your_textdomain' ); ?>" />
       </p>
     </td>
   </tr>
 <?php
 }

اینو بگم که من آیدی ها طبق اون جاوااسکریپتی که قبلا نوشتیم استفاده کردم که نیاز نباشه برای اینم دوباره جاوااسکریپت بنویسیم و شلوغ بشه. این فیلدها هم از همون جاوااسکریپت قبلی استفاده میکنن و توضیحاتشم که توی تابع add_category_image دادیم. اینم همونه و تفاوتی نداره!

برای ذخیره فیلدهایی که قصد داریم اون‌ها رو بروز کنیم، تابع updated_category_image رو به هوک edited_category متصل میکنیم.

add_action( 'edited_category', array ( $this, 'updated_category_image' ), 10, 2 );

نیازه بازم بگم اگه میخواین برای taxonomy خاصی استفاده کنید به جای category از slug یا شناسه taxonomy مورد نظر استفاده کنید؟!

public function updated_category_image ( $term_id, $tt_id ) {
   if( isset( $_POST['category-image-id'] ) && '' !== $_POST['category-image-id'] ){
     $image = $_POST['category-image-id'];
     update_term_meta ( $term_id, 'category-image-id', $image );
   } else {
     update_term_meta ( $term_id, 'category-image-id', '' );
   }
 }

خب تا اینجا ما تصویر شاخص به دسته بندی اضافه کردیم ولی چطور اون رو نمایش بدیم؟ با من همراه باشید تا این قسمت رو هم با هم تکمیل کنیم.

نمایش تصویر شاخص دسته بندی

تا الان تصویر شاخص به دسته بندی اضافه شده و تنها چیزی که نیاز داریم اینه که تصویر رو در پوسته خودمون نمایش بدیم. برای این کار میایم و خیلی ساده از تابع get_term_meta مثل تابع get_post_meta استفاده میکنیم. با این تفاوت که این برای term ها استفاده میشه اما تابع دوم برای post ها و نوشته ها! (چشم بسته غیب گفتم!!! 🙂 ) نحوه استفادش هم به این شکله:

// Get the current category ID, e.g. if we're on a category archive page
$category = get_category( get_query_var( 'cat' ) );
 $cat_id = $category->cat_ID;
// Get the image ID for the category
$image_id = get_term_meta ( $cat_id, 'category-image-id', true );
// Echo the image
echo wp_get_attachment_image ( $image_id, 'large' );

بسیار خب تموم شد! به همین راحتی بدون استفاده از افزونه، تصویر شاخص به دسته بندی های وردپرس اضافه شد! حالا قصد داریم تصویر شاخص به taxonomy ها اضافه کنیم.

اضافه کردن تصویر شاخص به taxonomy سفارشی

برای اضافه کردن تصویر شاخص به taxonomy وردپرس، در کل همونطور که تو کد های بالا توضیح دادم اصل کار یکیه اما گفتم برای محکم کاری در رابطه با این بخش taxonomy، بیام و کد مثالش رو براتون بذارم. توی این مثال ما به دنبال اضافه کردن تصویر شاخص به دسته بندی های افزونه EDD (Easy Digital Downloads) هستیم. اما شما میتونید به هر taxonomy که دوست دارید اضافه کنید.

کل کد EDD:

<?php
if( ! class_exists( 'Showcase_Taxonomy_Images' ) ) {
  class Showcase_Taxonomy_Images {
    
    public function __construct() {
     //
    }

    /**
     * Initialize the class and start calling our hooks and filters
     */
     public function init() {
     // Image actions
     add_action( 'download_category_add_form_fields', array( $this, 'add_category_image' ), 10, 2 );
     add_action( 'created_download_category', array( $this, 'save_category_image' ), 10, 2 );
     add_action( 'download_category_edit_form_fields', array( $this, 'update_category_image' ), 10, 2 );
     add_action( 'edited_download_category', array( $this, 'updated_category_image' ), 10, 2 );
     add_action( 'admin_enqueue_scripts', array( $this, 'load_media' ) );
     add_action( 'admin_footer', array( $this, 'add_script' ) );
   }

   public function load_media() {
     if( ! isset( $_GET['taxonomy'] ) || $_GET['taxonomy'] != 'download_category' ) {
       return;
     }
     wp_enqueue_media();
   }
  
   /**
    * Add a form field in the new category page
    * @since 1.0.0
    */
  
   public function add_category_image( $taxonomy ) { ?>
     <div class="form-field term-group">
       <label for="showcase-taxonomy-image-id"><?php _e( 'Image', 'showcase' ); ?></label>
       <input type="hidden" id="showcase-taxonomy-image-id" name="showcase-taxonomy-image-id" class="custom_media_url" value="">
       <div id="category-image-wrapper"></div>
       <p>
         <input type="button" class="button button-secondary showcase_tax_media_button" id="showcase_tax_media_button" name="showcase_tax_media_button" value="<?php _e( 'Add Image', 'showcase' ); ?>" />
         <input type="button" class="button button-secondary showcase_tax_media_remove" id="showcase_tax_media_remove" name="showcase_tax_media_remove" value="<?php _e( 'Remove Image', 'showcase' ); ?>" />
       </p>
     </div>
   <?php }

   /**
    * Save the form field
    * @since 1.0.0
    */
   public function save_category_image( $term_id, $tt_id ) {
     if( isset( $_POST['showcase-taxonomy-image-id'] ) && '' !== $_POST['showcase-taxonomy-image-id'] ){
       add_term_meta( $term_id, 'showcase-taxonomy-image-id', absint( $_POST['showcase-taxonomy-image-id'] ), true );
     }
    }

    /**
     * Edit the form field
     * @since 1.0.0
     */
    public function update_category_image( $term, $taxonomy ) { ?>
      <tr class="form-field term-group-wrap">
        <th scope="row">
          <label for="showcase-taxonomy-image-id"><?php _e( 'Image', 'showcase' ); ?></label>
        </th>
        <td>
          <?php $image_id = get_term_meta( $term->term_id, 'showcase-taxonomy-image-id', true ); ?>
          <input type="hidden" id="showcase-taxonomy-image-id" name="showcase-taxonomy-image-id" value="<?php echo esc_attr( $image_id ); ?>">
          <div id="category-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 showcase_tax_media_button" id="showcase_tax_media_button" name="showcase_tax_media_button" value="<?php _e( 'Add Image', 'showcase' ); ?>" />
            <input type="button" class="button button-secondary showcase_tax_media_remove" id="showcase_tax_media_remove" name="showcase_tax_media_remove" value="<?php _e( 'Remove Image', 'showcase' ); ?>" />
          </p>
        </td>
      </tr>
   <?php }

   /**
    * Update the form field value
    * @since 1.0.0
    */
   public function updated_category_image( $term_id, $tt_id ) {
     if( isset( $_POST['showcase-taxonomy-image-id'] ) && '' !== $_POST['showcase-taxonomy-image-id'] ){
       update_term_meta( $term_id, 'showcase-taxonomy-image-id', absint( $_POST['showcase-taxonomy-image-id'] ) );
     } else {
       update_term_meta( $term_id, 'showcase-taxonomy-image-id', '' );
     }
   }
 
   /**
    * Enqueue styles and scripts
    * @since 1.0.0
    */
   public function add_script() {
     if( ! isset( $_GET['taxonomy'] ) || $_GET['taxonomy'] != 'download_category' ) {
       return;
     } ?>
     <script> jQuery(document).ready( function($) {
       _wpMediaViewsL10n.insertIntoPost = '<?php _e( "Insert", "showcase" ); ?>';
       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 ) {
               $('#showcase-taxonomy-image-id').val(attachment.id);
               $('#category-image-wrapper').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" />');
               $( '#category-image-wrapper .custom_media_image' ).attr( 'src',attachment.url ).css( 'display','block' );
             } else {
               return _orig_send_attachment.apply( button_id, [props, attachment] );
             }
           }
           wp.media.editor.open(button); return false;
         });
       }
       ct_media_upload('.showcase_tax_media_button.button');
       $('body').on('click','.showcase_tax_media_remove',function(){
         $('#showcase-taxonomy-image-id').val('');
         $('#category-image-wrapper').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" />');
       });
       $(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
             $('#category-image-wrapper').html('');
           }
          }
        });
      });
    </script>
   <?php }
  }
$Showcase_Taxonomy_Images = new Showcase_Taxonomy_Images();
$Showcase_Taxonomy_Images->init(); }

همونطور که میبنید این کد هم دقیقا از همون کد قبلی الگو گرفته شده. با اینحال به برخی تفاوت ها اگه بخوایم اشاره کنیم میتونیم به init رو مثال بزنیم. توی تابع init پسوند و پیشوند hook ما باید به slug (شناسه) taxonomy اشاره کنه، نه به slug دسته بندی! مثال: (برای اطلاعات بیشتر به add_action مراجعه کنید)

add_action( 'download_category_add_form_fields', array( $this, 'add_category_image' ), 10, 2 );

همونطور که میبنید پیشوند hook توسط download_category_ تنظیم شده و این کار برای همه add_action های مربوط به taxonomy تکرار میشه. شما برای اینکه تصویر شاخص رو به taxonomy سفارشی خودتون اضافه کنید باید slug اون رو به این شکل در تمام add_action جایگزین کنید!

دانلود بصورت افزونه

در این بخش افزونه افزودن تصویر شاخص به دسته بندی رو میتونید دانلود کنید:

سخن پایانی

به همین راحتی تونستیم بدون استفاده از افزونه، تصویر شاخص به دسته بندی و taxonomy اضافه کنیم. به همین سادگی به همین خوشمزگی! 🙂
در صورتی که اشتباه در متن یا کد وجود داشت بگید اصلاح کنم یا در صورتی که سوالی داشتید توی بخش دیدگاه ها حتما مطرح کنید و من حتما پاسخ خواهم داد. در کل دیدگاه شما به من انرژی میده تا به نوشتن ادامه بدم و دست نکشم پس اینکار رو بکنید 🙂

همچنین میتونید برای آموزش های بیشتر در ارتباط با وردپرس به دسته بندی وردپرس مراجعه کنید. سپاس از اینکه تا اینجا همراه من بودید. با ارزوی بهترین ها برای شما…

❤ Happy Coding