ایجاد متاباکس تکرار شونده / لیست

گاه در پروژه ها نیاز میشود متاباکس هایی داشته باشیم از یک جنس که تکرار شود مثل گالری تصاویر در این حالت ما به تعداد مورد نیاز فیلد هایی برای ذخیره لینک تصاویر، عنوان تصویر و .. داریم تا تصاویر مورد نیاز خود را وارد و ذخیره کنیم.

تصویر زیر نمونه کاری است که قصد داریم در این پروژه انجام دهیم، با ما همراه باشید …

یجاد متاباکس تکرار شونده / لیست

لینک دانلود jQuery Repeatable Fields

از لینک زیر میتوانید فایل jQuery تکرار کننده فیلد ها را دانلود کرده و به پروژه خود اضافه کنید.

http://www.rhyzz.com/repeatable-fields.html

نمونه کد HTML حهت استفاده از تکرار کننده فیلد ها

<div class="repeat">
<table class="wrapper" width="100%">
<thead>
<tr>
<td width="10%" colspan="4"><span class="add">Add</span></td>
</tr>
</thead>
<tbody class="container">
<tr class="template row">
<td width="10%">
<span class="move">Move Row</span>
<span class="move-up">Move Up</span>
<input type="text" class="move-steps" value="1" />
<span class="move-down">Move Down</span>
</td>
<td width="10%">An Input Field</td>
<td width="70%">
<input type="text" name="an-input-field[{{row-count-placeholder}}]" />
</td>
<td width="10%"><span class="remove">Remove</span></td>
</tr>
</tbody>
</table>
</div>

نمونه کد حهت استفاده از کد های jQuery اضافه شده به پروژه

jQuery(function() {
jQuery('.repeat').each(function() {
jQuery(this).repeatable_fields();
});
});

گام ۱ : افزودن فایل های jQuery و CSS به پروژه

در این گام کد های jQuery دانلود شده و همچنین کد های jQuery و CSS ای که خودمان نوشتیم را به پروژه اضافه میکنیم. توجه داشته باشید که متغییر my_plugins_url_folder یک ثابت است و وظیفه برگرداندن آدرس را برعهده دارد.

add_action('admin_enqueue_scripts', 'tit_admin_enqueue_scripts');
function tit_admin_enqueue_scripts($hook)
{
if ($hook == 'post.php' or $hook == 'post-new.php') {
wp_enqueue_script('tit-repeatable-fields', my_plugins_url_folder . '/asset/js/repeatable-fields.js', array('jquery'), '1.0.0', true);
wp_enqueue_script('tit-my-repeatable-fields', my_plugins_url_folder . '/asset/js/admin_jquery.js', array('jquery'), '1.0.0', true);
wp_enqueue_style('tit-css-repeatable-fields', my_plugins_url_folder . '/asset/css/admin_repeatable.css', array(), '1.0.0');
} else {
return;
}
}

ایجاد متغییرثابت my_plugins_url_folder

define('my_plugins_url_folder',plugins_url('PostType_TehranIT'));

گام ۲ : رجیستر کردن متا باکس گالری تصاویر

/////////////////////////////////////////////////
//رجیستر کردن متا باکس
/////////////////////////////////////////////////
add_action('add_meta_boxes', 'tit_add_gallery_box');
function tit_add_gallery_box()
{
add_meta_box(
'tit_gallery_box_id', // Unique ID
'گالری تصاویر محصولات', // Box title
'tit_content_gallery_box', // Content callback, must be of type callable
'tit_pt_Pproduct', // Post type
'advanced', //normal , advanced , side
'high' // default , core , high , low
);
}

گام ۳ : ایجاد یو آی فیلد های گالری تصاویر

/////////////////////////////////////////////////
// ایجاد یو آی فیلد با استفاده از اج تی ام ال
/////////////////////////////////////////////////
function tit_content_gallery_box($post)
{
?>
<input type="hidden" value="<?php echo wp_create_nonce(plugin_basename(__FILE__)); ?>" name="tin_nonce_code" id="tin_nonce" />
<div class="repeat">
<table class="wrapper" width="100%">
<thead>
<tr>
<td colspan="4"><span class="add">Add</span></td>
</tr>
</thead>
<tbody class="container">
<tr class="template row">
<td class="td-move">
<span class="move dashicons dashicons-move"></span>
</td>
<td>
<label for="tit_description_field">عنوان تصویر</label>
<input type="text" id="tit_description_field" name="tit_description_field[{{row-count-placeholder}}]" />
</td>
<td>
<label for="tit_url_img_field">آدرس تصویر</label>
<input type="text" id="tit_url_img_field" name="tit_url_img_field[{{row-count-placeholder}}]" />
</td>
<td class="td-remove">
<span class="remove dashicons dashicons-trash"></span>
</td>
</tr>
</tbody>
</table>
</div>
<?php
}

گام ۴ : ذخیره کردن فیلد گالری تصاویر

/////////////////////////////////////////////////
//ذخیره کردن فیلد
/////////////////////////////////////////////////
add_action('save_post', 'tit_save_gallery_postdata', 10, 2);
function tit_save_gallery_postdata($post_id, $post)
{
//baresi mavaredi ke hengame save ersal mishavad
//var_dump($_POST);
//die;
if (array_key_exists('tit_description_field', $_POST)) {
//baresie nonce
$my_nonce = wp_verify_nonce($_POST['tit_gallery_nonce_code'], plugin_basename(__FILE__));
if (!$my_nonce) die("Security check failed => nonce error");
//baresie karbar
if (!current_user_can('edit_post', $post->ID))
die("Security check failed => current user error");
$i = 0;
foreach ($_POST['tit_description_field'] as $val) {
$tit_gallery_fild_save_meta[$i][] = sanitize_text_field($val);
$i++;
}
$i = 0;
foreach ($_POST['tit_url_img_field'] as $val) {
$tit_gallery_fild_save_meta[$i][] = sanitize_text_field($val);
$i++;
}
$get_post_meta = get_post_meta($post_id, 'tit_gallery_key_post_meta', false);
if ($get_post_meta) {
update_post_meta($post_id, 'tit_gallery_key_post_meta', serialize($tit_gallery_fild_save_meta));
} else {
add_post_meta($post_id, 'tit_gallery_key_post_meta', serialize($tit_gallery_fild_save_meta));
}
} else {
delete_post_meta($post_id, 'tit_gallery_key_post_meta');
}
}

گام ۵ : فراخوانی فیلد های ذخیره شده و نمایش آن در پست

بازگشت به گام ۳ و افزودن کد ها بعد از آخرین تگ TR

<?php
global $post;
$my_value = get_post_meta($post->ID, 'tit_gallery_key_post_meta', true);
$my_value = unserialize($my_value);
var_dump($my_value);
if ($my_value) {
$i = 0;
foreach ($my_value as $my_obj) {
?>
<tr class="row">
<td class="td-move">
<span class="move dashicons dashicons-move"></span>
</td>
<td>
<label for="tit_description_field">عنوان تصویر</label>
<input value="<?php echo esc_attr($my_obj[0]); ?>" type="text" id="tit_description_field" name="tit_description_field[<?php echo esc_attr($i); ?>]" />
</td>
<td>
<label for="tit_url_img_field">آدرس تصویر</label>
<input value="<?php echo esc_attr($my_obj[1]); ?>" type="text" id="tit_url_img_field" name="tit_url_img_field[<?php echo esc_attr($i); ?>]" />
</td>
<td class="td-remove">
<span class="remove dashicons dashicons-trash"></span>
</td>
</tr>
<?php $i++;
}
} ?>

مشاهده کد ها به صورت یک جا

<?php
add_action('admin_enqueue_scripts', 'tit_admin_enqueue_scripts');
function tit_admin_enqueue_scripts($hook)
{
if ($hook == 'post.php' or $hook == 'post-new.php') {
wp_enqueue_script('tit-repeatable-fields', my_plugins_url_folder . '/asset/js/repeatable-fields.js', array('jquery'), '1.0.0', true);
wp_enqueue_script('tit-my-repeatable-fields', my_plugins_url_folder . '/asset/js/admin_jquery.js', array('jquery'), '1.0.0', true);
wp_enqueue_style('tit-css-repeatable-fields', my_plugins_url_folder . '/asset/css/admin_repeatable.css', array(), '1.0.0');
} else {
return;
}
}
/////////////////////////////////////////////////
//رجیستر کردن متا باکس
/////////////////////////////////////////////////
add_action('add_meta_boxes', 'tit_add_gallery_box');
function tit_add_gallery_box()
{
add_meta_box(
'tit_gallery_box_id', // Unique ID
'گالری تصاویر محصولات', // Box title
'tit_content_gallery_box', // Content callback, must be of type callable
'tit_pt_Pproduct', // Post type
'advanced', //normal , advanced , side
'high' // default , core , high , low
);
}
/////////////////////////////////////////////////
// ایجاد یو آی فیلد با استفاده از اج تی ام ال
/////////////////////////////////////////////////
function tit_content_gallery_box($post)
{
?>
<input type="hidden" value="<?php echo wp_create_nonce(plugin_basename(__FILE__)); ?>" name="tit_gallery_nonce_code" id="tin_nonce" />
<div class="repeat">
<table class="wrapper" width="100%">
<thead>
<tr>
<td colspan="4"><span class="add">Add</span></td>
</tr>
</thead>
<tbody class="container">
<tr class="template row">
<td class="td-move">
<span class="move dashicons dashicons-move"></span>
</td>
<td>
<label for="tit_description_field">عنوان تصویر</label>
<input type="text" id="tit_description_field" name="tit_description_field[{{row-count-placeholder}}]" />
</td>
<td>
<label for="tit_url_img_field">آدرس تصویر</label>
<input type="text" id="tit_url_img_field" name="tit_url_img_field[{{row-count-placeholder}}]" />
</td>
<td class="td-remove">
<span class="remove dashicons dashicons-trash"></span>
</td>
</tr>
<?php
global $post;
$my_value = get_post_meta($post->ID, 'tit_gallery_key_post_meta', true);
$my_value = unserialize($my_value);
var_dump($my_value);
if ($my_value) {
$i = 0;
foreach ($my_value as $my_obj) {
?>
<tr class="row">
<td class="td-move">
<span class="move dashicons dashicons-move"></span>
</td>
<td>
<label for="tit_description_field">عنوان تصویر</label>
<input value="<?php echo esc_attr($my_obj[0]); ?>" type="text" id="tit_description_field" name="tit_description_field[<?php echo esc_attr($i); ?>]" />
</td>
<td>
<label for="tit_url_img_field">آدرس تصویر</label>
<input value="<?php echo esc_attr($my_obj[1]); ?>" type="text" id="tit_url_img_field" name="tit_url_img_field[<?php echo esc_attr($i); ?>]" />
</td>
<td class="td-remove">
<span class="remove dashicons dashicons-trash"></span>
</td>
</tr>
<?php $i++;
}
} ?>
</tbody>
</table>
</div>
<?php
}
/////////////////////////////////////////////////
//ذخیره کردن فیلد
/////////////////////////////////////////////////
add_action('save_post', 'tit_save_gallery_postdata', 10, 2);
function tit_save_gallery_postdata($post_id, $post)
{
//baresi mavaredi ke hengame save ersal mishavad
//var_dump($_POST);
//die;
if (array_key_exists('tit_description_field', $_POST)) {
//baresie nonce
$my_nonce = wp_verify_nonce($_POST['tit_gallery_nonce_code'], plugin_basename(__FILE__));
if (!$my_nonce) die("Security check failed => nonce error");
//baresie karbar
if (!current_user_can('edit_post', $post->ID))
die("Security check failed => current user error");
$i = 0;
foreach ($_POST['tit_description_field'] as $val) {
$tit_gallery_fild_save_meta[$i][] = sanitize_text_field($val);
$i++;
}
$i = 0;
foreach ($_POST['tit_url_img_field'] as $val) {
$tit_gallery_fild_save_meta[$i][] = sanitize_text_field($val);
$i++;
}
$get_post_meta = get_post_meta($post_id, 'tit_gallery_key_post_meta', false);
if ($get_post_meta) {
update_post_meta($post_id, 'tit_gallery_key_post_meta', serialize($tit_gallery_fild_save_meta));
} else {
add_post_meta($post_id, 'tit_gallery_key_post_meta', serialize($tit_gallery_fild_save_meta));
}
} else {
delete_post_meta($post_id, 'tit_gallery_key_post_meta');
}
}