جستجو برای:
سبد خرید 0
  • صفحه اصلی
  • مقالات و آموزش ها
  • فروشگاه
  • درباره ما
  • پرسش و پاسخ
  • دانلود وردپرس
  • ارتباط با ما

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت
  • phone 04133252264
  • email info@wpnegar.com
perm_identity
سبد خرید 0
  • قوانین و مقررات
  • ثبت تیکت
0
وردپرس نگار (وی‌پی نگار) - WP Negar
  • صفحه اصلی
  • مقالات و آموزش ها
  • فروشگاه
  • درباره ما
  • پرسش و پاسخ
  • دانلود وردپرس
  • ارتباط با ما
perm_identity ورود و ثبت نام

وبلاگ

وردپرس نگار (وی‌پی نگار) - WP Negar > مقالات و آموزش ها > آموزش وردپرس > افزودن فیلد تصاویر به دسته‌ های وردپرس

افزودن فیلد تصاویر به دسته‌ های وردپرس

access_time29 جولای 2019
perm_identity ارسال شده توسط سحر امیرعباسیان
folder_open آموزش وردپرس, کد وردپرس
visibility 479 بازدید
فیلد تصاویر

یکی از بخش های مهم سایت های وردپرسی دسته ها می باشند.مهمترین مزیت دسته ها ایجاد نظم در همه قسمت‌ها از جمله نوشته‌های سایت می باشد. نویسنده هر نوشته خود را در دسته‌ای قرار می دهد، تا کاربران بتوانند به سادگی به مطالب مورد نظرشان دسترسی داشته باشند. فیلدهای مختلفی در بخش دسته ها وجود دارد، اما فیلد تصویر شاخص در آن دیده نمی شود. در صورتی که شما تمایل به افزودن تصاویر به دسته‌ها دارید در ادامه مطلب با ما همراه باشید.درادامه افزودن فیلد تصویر به دسته ها در وردپرس را با کمک کدنویسی به شما آموزش خواهیم داد.

نحوه افزودن فیلد تصاویر به دسته‌ های وردپرس:

ابتدا با یک گروه‌بندی استاندارد شروع می‌کنیم و بعد به ساخت یک دسته سفارشی می‌پردازیم.
در تصویر پایین یک image upload field اضافه شده به یک گروه‌بندی استاندارد را می بینید:

دسته بندی

جهت استفاده از گزینه پیش‌فرض مدیریت چندرسانه‌ای وردپرس برای آپلود تصاویر در گروه‌بندی‌ها، کلاس زیر را در نظر می‌گیریم:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/**
*Plugin class
**/
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( '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', 'hero-theme'); ?></label>
<input type="hidden" id="category-image-id" name="category-image-id" class="custom_media_url" value="">
<div id="category-image-wrapper"></div>
<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' ); ?>" />
</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', 'hero-theme' ); ?></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>
<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' ); ?>" />
</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() { ?>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0AjQuery(document).ready(%20function(%24)%20%7B%0Afunction%20ct_media_upload(button_class)%20%7B%0Avar%20_custom_media%20%3D%20true%2C%0A_orig_send_attachment%20%3D%20wp.media.editor.send.attachment%3B%0A%24('body').on('click'%2C%20button_class%2C%20function(e)%20%7B%0Avar%20button_id%20%3D%20'%23'%2B%24(this).attr('id')%3B%0Avar%20send_attachment_bkp%20%3D%20wp.media.editor.send.attachment%3B%0Avar%20button%20%3D%20%24(button_id)%3B%0A_custom_media%20%3D%20true%3B%0Awp.media.editor.send.attachment%20%3D%20function(props%2C%20attachment)%7B%0Aif%20(%20_custom_media%20)%20%7B%0A%24('%23category-image-id').val(attachment.id)%3B%0A%24('%23category-image-wrapper').html('%3Cimg%20class%3D%22custom_media_image%22%20src%3D%22%22%20style%3D%22margin%3A0%3Bpadding%3A0%3Bmax-height%3A100px%3Bfloat%3Anone%3B%22%20%2F%3E')%3B%0A%24('%23category-image-wrapper%20.custom_media_image').attr('src'%2Cattachment.url).css('display'%2C'block')%3B%0A%7D%20else%20%7B%0Areturn%20_orig_send_attachment.apply(%20button_id%2C%20%5Bprops%2C%20attachment%5D%20)%3B%0A%7D%0A%7D%0Awp.media.editor.open(button)%3B%0Areturn%20false%3B%0A%7D)%3B%0A%7D%0Act_media_upload('.ct_tax_media_button.button')%3B%20%0A%24('body').on('click'%2C'.ct_tax_media_remove'%2Cfunction()%7B%0A%24('%23category-image-id').val('')%3B%0A%24('%23category-image-wrapper').html('%3Cimg%20class%3D%22custom_media_image%22%20src%3D%22%22%20style%3D%22margin%3A0%3Bpadding%3A0%3Bmax-height%3A100px%3Bfloat%3Anone%3B%22%20%2F%3E')%3B%0A)%3B%0A%2F%2F%20Thanks%3A%20http%3A%2F%2Fstackoverflow.com%2Fquestions%2F15281995%2Fwordpress-create-category-ajax-response%0A%24(document).ajaxComplete(function(event%2C%20xhr%2C%20settings)%20%7B%0Avar%20queryStringArr%20%3D%20settings.data.split('%26')%3B%0Aif(%20%24.inArray('action%3Dadd-tag'%2C%20queryStringArr)%20!%3D%3D%20-1%20)%7B%0Avar%20xml%20%3D%20xhr.responseXML%3B%0A%24response%20%3D%20%24(xml).find('term_id').text()%3B%0Aif(%24response!%3D%22%22)%7B%0A%2F%2F%20Clear%20the%20thumb%20image%0A%24('%23category-image-wrapper').html('')%3B%0A%7D%0A%7D%0A%7D)%3B%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<?php } } $CT_TAX_META = new CT_TAX_META(); $CT_TAX_META -> init();
}

هدف از ایجاد این کلاس، آسان تر کردن استفاده دوباره از کد می باشد. شما می‌توانید این کد را  با کمی اصلاح (refactor) در فایل functions.php بکار ببرید.

در ادامه به توضیح گام به گام مراحل می پردازیم:

۱- افزودن متا دیتای جدید

اولین تابع، یک فیلد جدید به فرم «افزودن گروه‌بندی جدید» اضافه می‌کند.

دسته بندی

دقت کنید که ID attachment  تصویر را در یک فیلد ورودی مخفی ذخیره می‌کنیم؛ بعد تصویر پیش‌نمایش را به کاربر نمایش می‌دهیم. دو دکمه هم می افزاییم که جاوا اسکریپتش را بعدا اضافه می کنیم.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public function add_category_image ( $taxonomy ) { ?>
<div class="form-field term-group">
<label for="category-image-id"><?php _e('Image', 'hero-theme'); ?></label>
<input type="hidden" id="category-image-id" name="category-image-id" class="custom_media_url" value="">
<div id="category-image-wrapper"></div>
<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' ); ?>" />
</div>
<?php
}

دکمه‌ها را با بکار بردن یک هوک که در تابع init فراخوانی شده، می افزاییم.

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

جهت افزودن این فیلد به یک دسته متفاوت مانند custom post type ، باید رفرنس گروه‌بندی را با رفرنس اسلاگ دسته خودتان تعویض کنید؛ برای مثال در صورتی که یک تکسونومی ژانر ایجاد کرده‌اید باید این تابع را توسط کد زیر هوک کنید:

1
'taxonomy_add_form_fields', array ( $this, 'add_category_image' ), 10, 2 ).

در صورتی که فقط همین را بیافزاییم، دکمه‌ها را با وجودی که هنوز کار نمی‌کنند، در فرم مشاهده خواهید کرد. جهت فعال کردن دکمه‌ها، باید چند inline JavaScript از طریق هوک admin_footer  به فوتر بیافزاییم:

1
2
3
4
5
6
7
/*
* Add script
* @since 1.0.0
*/
public function add_script() { ?>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0AQuery(document).ready(%20function(%24)%20%7B%0Afunction%20ct_media_upload(button_class)%20%7B%0Avar%20_custom_media%20%3D%20true%2C%0A_orig_send_attachment%20%3D%20wp.media.editor.send.attachment%3B%0A%24('body').on('click'%2C%20button_class%2C%20function(e)%20%7B%0Avar%20button_id%20%3D%20'%23'%2B%24(this).attr('id')%3B%0Avar%20send_attachment_bkp%20%3D%20wp.media.editor.send.attachment%3B%0Avar%20button%20%3D%20%24(button_id)%3B%0A_custom_media%20%3D%20true%3B%0Awp.media.editor.send.attachment%3Dfunction(props%2C%20attachment)%7B%0Aif%20(%20_custom_media%20)%20%7B%0A%24('%23category-image-id').val(attachment.id)%3B%0A%24('%23category-image-wrapper').html('%3Cimg%20class%3D%22custom_media_image%22%20src%3D%22%22%20style%3D%22margin%3A0%3Bpadding%3A0%3Bmax-height%3A100px%3Bfloat%3Anone%3B%22%20%2F%3E')%3B%0A%24('%23category-image-wrapper%20.custom_media_image').attr('src'%2Cattachment.url).css('display'%2C'block')%3B%0A%7D%20else%20%7B%0Areturn%20_orig_send_attachment.apply(%20button_id%2C%20%5Bprops%2C%20attachment%5D%20)%3B%0A%7D%0A%7D%0Awp.media.editor.open(button)%3B%0Areturn%20false%3B%0A%7D)%3B%0A%7D%0Act_media_upload('.ct_tax_media_button.button')%3B%20%0A%24('body').on('click'%2C'.ct_tax_media_remove'%2Cfunction()%7B%0A%24('%23category-image-id').val('')%3B%0A%24('%23category-image-wrapper').html('%3Cimg%20class%3D%22custom_media_image%22%20src%3D%22%22%20style%3D%22margin%3A0%3Bpadding%3A0%3Bmax-height%3A100px%3Bfloat%3Anone%3B%22%20%2F%3E')%3B%0A%7D)%3B%0A%2F%2F%20Thanks%3A%20http%3A%2F%2Fstackoverflow.com%2Fquestions%2F15281995%2Fwordpress-create-category-ajax-response%0A%24(document).ajaxComplete(function(event%2C%20xhr%2C%20settings)%20%7B%0Avar%20queryStringArr%20%3D%20settings.data.split('%26')%3B%0Aif(%20%24.inArray('action%3Dadd-tag'%2C%20queryStringArr)%20!%3D%3D%20-1%20)%7B%0Avar%20xml%20%3D%20xhr.responseXML%3B%0A%24response%20%3D%20%24(xml).find('term_id').text()%3B%0Aif(%24response!%3D%22%22)%7B%0A%2F%2F%20Clear%20the%20thumb%20image%0A%24('%23category-image-wrapper').html('')%3B%0A%7D%0A%7D%0A%7D)%3B%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<?php }

در این مرحله از افزودن فیلد تصویر به دسته ها در وردپرس، زمانی که روی دکمه «افزودن تصویر» کلیک می‌کنیم، کتابخانه چندرسانه‌ای وردپرس باز می‌شود تا یک تصویر را انتخاب کنیم. بعد ID تصویر انتخابی را می‌گیرد و در فیلد مخفی که آی دی category-image-id را دارد، قرار می‌دهد. این همان فیلدی است که ذخیره خواهیم کرد.

جهت نمایش تصویر به کاربر، jQuery را بکار می بریم، تا div که آیدی category-image-wrappe  دارد را با تصویر پیش‌نمایش پر کنیم. انجام دادن این کار اجباری نیست ولی باعث ایجاد تجربه کاربری بهتری می شود.

بنابراین، در صورتی که کاربر روی دکمه حذف تصویر کلیک کند، فیلد مخفی پاک می‌شود و تصویر برداشته می‌شود.

۲- ذخیره کردن متا دیتا

در مرحله بعدی، زمانی که کاربر بر روی «افزودن گروه جدید» کلیک می‌کند، باید بتوانیم متا فیلد تصویر را ذخیره نماییم. برای این کار، هوک created_category  را بکار می بریم. در صورتی که با تکسونومی متفاوتی کار می‌کنید، باید با هوک  {created_{$taxonomy  کار کنید که {taxonomy$}  همان اسلاگ تکسونومی سفارشی شماست.

پس هوک به شکل زیر است:

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

و تابع هم به‌صورت زیر است:

1
2
3
4
5
6
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);
}
}

این تابع با ذخیره مقدار category-image-idfield  ( که attachment ID را هم دارد) در category ID ، دقیقا مانند add_post_meta  کار می‌کند.

۳- به‌روزرسانی متا دیتا

حالا که یک گروه‌بندی را با تصویر مرتبطش ذخیره کردیم، شاید تصمیم بگیریم که تصویر را با کمک امکان افزودن فیلد تصویر به دسته ها در وردپرس عوض کنیم:

دسته بندی

اول باید همان فیلدهایی را که به فرم «افزودن گروه‌بندی جدید» افزودیم به فرم «ویرایش گروه‌بندی» هم بیافزاییم. هوکی که بکار می بریم category_edit_form_fields می باشد که در صورت نیاز گروه‌بندی را با اسلاگ تکسونومی خودتان تعویض کنید.

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

این تابع، فیلدهای ما را به فرم ویرایش گروه‌بندی می افزاید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/*
* 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', 'hero-theme' ); ?></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>
<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' ); ?>" />
</td>
</tr>
<?php
}

این کد هم جاوا اسکریپتی که قبلا افزودیم را بکار می برد، تا بتوانیم تصاویر را آپلود یا حذف کنیم.

جهت ذخیره فیلد آپدیت شده، edited_category را هوک می‌کنیم و update_term_meta را بکار می بریم؛ مانند قبل، می‌توانید از {edited_{$taxonomy  برای تکسونومی سفارشی خود استفاده کنید.

1
2
3
4
5
6
7
8
9
10
11
12
/*
* 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', '' );
}
}

۴- نمایش تصویر در front end

کاری که در این مرحله باید انجام دهیم این است که تصویر را در طرح زمینه نمایش دهیم. جهت این کار، به همان روشی که get_post_meta را برای post data را بکار می بریم، باید get_term_meta  را استفاده کنیم؛ برای مثال:

1
2
3
4
5
6
7
// 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' );

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

سوالی که ایجاد می شود این است که چگونه فیلد تصاویر را به دسته‌ ها اضافه کنیم؟ روند کدینگ آپلود تصویر در یک تکسونومی سفارشی مانند آپلود تصویر در گروه‌بندی می باشد که در مراحل بالا انجام دادیم اما در این مثال قصد داریم تا تصویر را به یک تکسونومی سفارشی مانند گروه دانلود Easy Digital Download بیافزاییم. باز هم می‌توانید این مراحل را برای هر تکسونومی سفارشی خود تغییر دهید.

کل کلاس به شکل زیر است:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
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;" />');
});
// Thanks: http://stackoverflow.com/questions/15281995/wordpress-create-category-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
$('#category-image-wrapper').html('');
}
}
});
});
</script>
<?php }
}
$Showcase_Taxonomy_Images = new Showcase_Taxonomy_Images();
$Showcase_Taxonomy_Images->init(); }

مشاهده می کنید که این کد دقیقا همان روند کد مثال اول را دارد اما به تفاوت‌ها هم دقت کنید. مثلا، در ()init  پیشوندها و پسوندهای اکشن باید به‌جای اسلاگ گروه‌بندی به اسلاگ تکسونومی اشاره کنند؛ مثلا:

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

می بینید که اکشن پیشوند  download_category را دارد. این کار برای همه اکشن‌های مرتبط به تکسونومی تکرار می‌شود و باید همه موارد این بخش را با اسلاگ تکسونومی سفارشی خودتان هم به‌روزرسانی کنید.

امیدوارم این مطلب برایتان مفید بوده باشد.  🙂

منتظر پیشنهادات و انتقاداتتون هستیم.

برچسب ها: افزودن فیلد تصاویر به دسته‌ های وردپرسفیلد تصاویرفیلد تصاویر در دسته های وردپرس
درباره سحر امیرعباسیان

کارشناس مهندسی فناوری اطلاعات ، علاقه ی زیادی به طراحی وب دارم.

نوشته های بیشتر از سحر امیرعباسیان
مطالب زیر را حتما بخوانید
  • Avoid CSS expressions
    خطای Avoid CSS expressions در gtmetrix

    311 بازدید

  • جی تی متریکس
    جی تی متریکس (GTmetrix) چیست؟

    441 بازدید

  • غیرفعال کردن حساسیت رمز عبور
    غیرفعال کردن حساسیت رمز عبور ووکامرس زمان خرید و ثبت نام

    462 بازدید

  • افزونه Comment Link Remove
    افزونه و کد حذف فیلد آدرس از بخش نظرات وردپرس

    392 بازدید

  • نمایش محصولات با id
    نمایش قیمت محصولات ووکامرس بر اساس ID محصول

    404 بازدید

جدید تر خطای Avoid CSS expressions در gtmetrix

پاسخی بگذارید لغو پاسخ

جستجو برای:
محصولات
  • قالب استارتاپی و دیجیتال مارکتینگ هوپر | Hoper ۷۰,۰۰۰ تومان ۴۰,۰۰۰ تومان
  • افزونه نظرات حرفه ای وردپرس افزونه نظرات حرفه ای وردپرس Commentator ۱۹,۰۰۰ تومان ۱۰,۰۰۰ تومان

تخفیف 50 درصدی وی پی نگار

سیستم پرسش و پاسخ
سیستم پرسش و پاسخ وی‌پی نگار
  • محبوب
  • جدید
  • دیدگاه ها
قبلی بعدی
کانال تلگرام وی‌پی نگار
کانال تلگرام وی‌پی نگار
برجسته ترین ها
  • اضافه کردن فیلد دلخواه جدید به فرم خرید افزونه edd 3 votes, average: 5٫00 out of 53 votes, average: 5٫00 out of 53 votes, average: 5٫00 out of 53 votes, average: 5٫00 out of 53 votes, average: 5٫00 out of 5 (5٫00 out of 5)
  • آموزش تعریف و اضافه کردن فهرست به پوسته وردپرس 2 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 5 (5٫00 out of 5)
  • انتقال ابزارک بین سایت های وردپرسی 2 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 5 (5٫00 out of 5)
  • حل مشکل درخواست اطلاعات ftp در وردپرس 2 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 5 (5٫00 out of 5)
  • نحوه ی تغییر سریع نام نقش های کاربری در وردپرس با بکار بردن کد 2 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 5 (5٫00 out of 5)
  • کد قرار دادن عکس در پس زمینه قالب وردپرس 2 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 5 (5٫00 out of 5)
  • نمایش موقعیت در نقشه گوگل در سایت با استفاده از کد 2 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 5 (5٫00 out of 5)
  • نحوه ی قرار دادن QR code در سایت وردپرسی 2 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 5 (5٫00 out of 5)
  • آموزش ذخیره خودکار تصاویر هنگام انتشار مطلب با Cache images 2 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 5 (5٫00 out of 5)
  • آموزش مدیریت دسته بندی محصولات در ووکامرس 2 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 5 (5٫00 out of 5)
سیستم پرسش و پاسخ


سیستم پرسش و پاسخ وی‌پی نگار

کانال تلگرام وی‌پی نگار


کانال تلگرام وی‌پی نگار

درباره ما

وی پی نگار مرجع وردپرس فارسی،ارائه دهنده قالب وردپرس فارسی و اختصاصی با سئو و سرعت لود بسیار بالا، معرفی و آموزش افزونه وردپرس و پلاگین های کاربردی می باشد.

logo-samandehi

منابع رسمی وردپرس
  • سایت رسمی وردپرس جهانی
  • مخزن افزونه ها وردپرس
  • مخزن قالب های وردپرس
  • مخزن کد های وردپرس
پل های ارتباطی
  • location_on
    تبریز - فلکه دانشگاه - ساختمان تبریز - طبقه ۶ - واحد ۲۰
  • phone_android
    04133252264
  • perm_phone_msg
    04133253162
  • email
    info@wpnegar.com
تمامی حقوق برای سایت وی پی نگار محفوظ می باشد.
keyboard_arrow_up