Содержание
Вопрос или проблема
Я хочу добавить поле в своем пользовательском мета-боксе, такое же, как ниже, но не для тегов. Как я могу многократно получать больше входных данных в одном и том же поле?
Вот мой код, добавленный в functions.php:
function dikka_cmb_meoxes( array $meta_boxes ) {
$prefix = 'dikka_';
$meta_boxes['details_meox'] = array(
'id' => 'details_meox',
'title' => __( 'Детали проекта', 'dikka' ),
'pages' => array( 'portfolio', ), // Тип записи
'context' => 'normal',
'priority' => 'high',
'show_names' => true, // Показать имена полей слева
'fields' => array(
array(
'name' => __( 'Клиент', 'dikka' ),
'desc' => __( 'Добавьте имя клиента', 'dikka' ),
'id' => $prefix . 'add_client',
'type' => 'text',
),
array(
'name' => __( 'Навыки', 'dikka' ),
'desc' => __( 'Добавьте навыки', 'dikka' ),
'id' => $prefix . 'skills',
'type' => 'text',
),
array(
'name' => __( 'Дата выпуска', 'dikka' ),
'desc' => __( 'Добавьте дату выхода проекта', 'dikka' ),
'id' => $prefix . 'add_releasedate',
'type' => 'text_date',
),
)
);
return $meta_boxes;
}
Похоже, вы используете CMB (Пользовательские мета-боксы и поля для WordPress) для создания ваших мета-боксов.
CMB уже предоставляет опцию группирования и повторения мета-блока, которую вы можете использовать. Вы можете проверить эту ссылку
Что касается вашего кода, он должен выглядеть так:
function dikka_cmb_meoxes( array $meta_boxes ) {
$prefix = 'dikka_';
$meta_boxes['details_meox'] = array(
'id' => $prefix . 'details_meox',
'type' => 'group',
'pages' => array( 'portfolio', ), // Тип записи
'description' => __( 'Детали проекта', 'dikka' ),
'options' => array(
'group_title' => __( 'Запись {#}', 'dikka' ), // с версии 1.1.4, {#} заменяется на номер строки
'add_button' => __( 'Добавить еще одну запись', 'dikka' ),
'remove_button' => __( 'Удалить запись', 'dikka' ),
'sortable' => true, // бета
),
// Массив полей работает так же, за исключением того, что id должны быть уникальными только для этой группы. Приставка не нужна.
'fields' => array(
array(
'name' => __( 'Клиент', 'dikka' ),
'desc' => __( 'Добавьте имя клиента', 'dikka' ),
'id' => $prefix . 'add_client',
'type' => 'text',
),
array(
'name' => __( 'Навыки', 'dikka' ),
'desc' => __( 'Добавьте навыки', 'dikka' ),
'id' => $prefix . 'skills',
'type' => 'text',
),
array(
'name' => __( 'Дата выпуска', 'dikka' ),
'desc' => __( 'Добавьте дату выхода проекта', 'dikka' ),
'id' => $prefix . 'add_releasedate',
'type' => 'text_date',
),
),
),
return $meta_boxes;
}
Надеюсь, это поможет!
**Пользовательский мета-бокс с повторяющимися полями **
Функция мета-бокса с скриптом
function question_creation_meta_box() {
global $post;
wp_nonce_field( basename( __FILE__ ), 'bsw_our_nonce' );
?>
<div class="row">
<?php
global $post;
// $post_id=$post->ID;
$post_id=$_GET['post'];
$i=1;
$countQuestions=get_post_meta($post_id,'countQuestions',true);
// echo '<pre>';print_r($countQuestions);echo '</pre>';
$count= count($countQuestions);
if($post_id){
while($i<=$count)
{
$question= get_post_meta($post_id,'questions'.$i,true);
$correctAnswer=get_post_meta($post_id,'correctAnswer'.$i.'1',true);
$countAnswers=get_post_meta($post_id,'countAnswers'.$i,true);
// if($count==1):
?>
<div class="questions_blocks col-sm-12 col-md-12" id="questions_blocks-<?php echo $i; ?>">
<div class="questions col-sm-12 col-md-12" id="questions-<?php echo $i;?>">
<lable>Введите вопросы</lable><input type="text" value="<?php echo $question[0]; ?>" name="questions1[]">
</div>
<?php
$j=1;
while($j<=$countAnswers)
{
$answer= get_post_meta($post_id,'answer'.$i.''.$j,true);
$answerText= get_post_meta($post_id,'answerText'.$i.''.$j,true);
?>
<div class="answer col-md-12 col-sm-12 border-top-0" id="answer-<?php echo $j;?>">
<h1 class="">Ответ <?php echo $j;?></h1>
<div class="col-md-12 col-sm-12">
<div class="col-md-4 col-sm-4">
<input type="radio" name="correctAnswer<?php echo $i; ?>1[]" value="1" class="correct_incorrect" <?php if($correctAnswer[0] == $j ) echo 'checked' ?>>Правильный<br>
<input type="radio" name="correctAnswer<?php echo $i; ?>1[]" value="0" class="correct_incorrect">Неправильный
</div>
<div class="col-sm-8 col-md-8">
<lable>Введите ответ</lable><input type="text" value="<?php echo $answer[0];?>" name="answer1<?php echo $j; ?>[]">
<lable>Введите текст отображаемого ответа</lable> <input type="text" value="<?php echo $answerText[0]?>" name="answerText1<?php echo $j; ?>[]">
</div>
</div>
<input type="hidden" value="1" name="countAnswers1[]">
<?php if($j == $countAnswers): ?>
<label class="right-label">Добавить еще один ответ</label><a href="https://wordpress.stackexchange.com/questions/181907/javascript:void(0)" onclick="add_answer(this)" class="add_answer"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/plus.png'?>"></a>
<a href="https://wordpress.stackexchange.com/questions/181907/javascript:void(0)" onclick="remove_answer(this)" class="remove_answer"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/remove.png'?>"></a>
<?php endif;?>
</div>
<?php
$j++;
}
?>
<input type="hidden" value="1" name="countQuestions[]">
<?php if($count == $i ): ?>
<label class="right-label">Добавить еще один вопрос</label>
<a href="https://wordpress.stackexchange.com/questions/181907/javascript:void(0)" onclick="add_question(this)" class="add_question"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/plus.png'?>"></a>
<a href="https://wordpress.stackexchange.com/questions/181907/javascript:void(0)" onclick="remove_question(this)" class="remove_question"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/remove.png'?>"></a>
<?php endif;?>
</div>
<?
$i++;
}
}
else{
?>
<!-- мой пользовательский ввод значения -->
<div class="questions_blocks col-sm-12 col-md-12" id="questions_blocks-1">
<div class="questions col-sm-12 col-md-12" id="questions-1">
<lable>Введите вопросы</lable><input type="text" value="" name="questions1[]">
</div>
<div class="answer col-md-12 col-sm-12 border-top-0" id="answer-1">
<h1 class="">Ответ 1</h1>
<div class="col-md-12 col-sm-12">
<div class="col-md-4 col-sm-4">
<input type="radio" name="correctAnswer11[]" value="1" class="correct_incorrect">Правильный<br>
<input type="radio" name="correctAnswer11[]" value="0" class="correct_incorrect">Неправильный
</div>
<div class="col-sm-8 col-md-8">
<lable>Введите ответ</lable><input type="text" value="" name="answer11[]">
<lable>Введите текст отображаемого ответа</lable> <input type="text" name="answerText11[]">
</div>
</div>
<input type="hidden" value="1" name="countAnswers1[]">
<label class="right-label">Добавить еще один ответ</label><a href=javascript:void(0)" onclick="add_answer(this)" class="add_answer"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/plus.png'?>"></a></a>
</div>
<input type="hidden" value="1" name="countQuestions[]">
<label class="right-label">Добавить еще один вопрос</label><a href=javascript:void(0)" onclick="add_question(this)" class="add_question"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/plus.png'?>"></a></a>
</div>
<?php
}
?>
</div>
<script type="text/javascript">
function add_answer(obj)
{
var parentID=jQuery(obj).parents('.answer').attr('id');
var questionParentId=jQuery(obj).parent('.answer').parent('.questions_blocks').attr('id');
var answerLenght=jQuery('#'+questionParentId +' .answer').length;
var questionParent=jQuery(obj).parent('.answer').parent('.questions_blocks').length;
var countQuestion=questionParentId.split('-');
// alert(countQuestion);
var newLenght=parseInt(answerLenght)+1;
var html="<div class="answer col-md-12 col-sm-12 border-top-0" id="answer-"+newLenght+'"><h1 class="">Ответ '+newLenght+'</h1>';
html+='<div class="col-md-12 col-sm-12 bsw_answer_block">';
html+='<div class="col-md-4 col-sm-4 correctblock">';
html+='<input type="radio" name="correctAnswer'+countQuestion[1]+'1[]" value="'+newLenght+'" class="correct_incorrect">Правильный<br>';
html+='<input type="radio" name="correctAnswer'+countQuestion[1]+'1[]" value="0" class="correct_incorrect">Неправильный</div>';
html+='<div class="col-sm-8 col-md-8">';
html+='<lable>Введите ответ</lable><input type="text" value="" name="answer'+countQuestion[1]+''+newLenght+'[]">';
html+='<lable>Введите текст отображаемого ответа</lable> <input type="text" name="answerText'+countQuestion[1]+''+newLenght+'[]"">';
html+='</div>';
html+='</div>';
html+=' <input type="hidden" value="1" name="countAnswers'+countQuestion[1]+'[]"><label class="right-label">Добавить еще один ответ</label><a href="https://wordpress.stackexchange.com/questions/181907/javascript:void(0)" onclick="add_answer(this)" class="add_answer"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/plus.png'?>"></a>';
html+=' <a href="https://wordpress.stackexchange.com/questions/181907/javascript:void(0)" onclick="remove_answer(this)" class="remove_answer"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/remove.png'?>"></a>';
html+='</div>';
jQuery('#'+questionParentId+' #'+parentID+' .right-label').remove();
jQuery('#'+questionParentId+' #'+parentID+' .add_answer').remove();
jQuery('#'+questionParentId+' #'+parentID+' .remove_answer').remove();
jQuery('#'+questionParentId+' #'+parentID).after(html);
}
function add_question(obj)
{
var parentID=jQuery(obj).parents('.questions_blocks').attr('id');
var questions_blocksLenght=jQuery('.row .questions_blocks').length;
var newLenght=parseInt(questions_blocksLenght)+1;
var html="";
html+='<div class="questions_blocks col-sm-12 col-md-12" id="questions_blocks-'+newLenght+'">';
html+='<div class="questions col-sm-12 col-md-12" id="questions-'+newLenght+'">';
html+='<lable>Введите вопросы</lable><input type="text" value="" name="questions'+newLenght+'[]">';
html+='</div>';
html+='<div class="answer col-md-12 col-sm-12 border-top-0" id="answer-1"><h1 class="">Ответ 1</h1>';
html+='<div class="col-md-12 col-sm-12 bsw_answer_block">';
html+='<div class="col-md-4 col-sm-4 correctblock">';
html+='<input type="radio" name="correctAnswer'+newLenght+'1[]" value="1" class="correct_incorrect">Правильный<br>';
html+='<input type="radio" name="correctAnswer'+newLenght+'1[]" value="0" class="correct_incorrect">Неправильный</div>';
html+='<div class="col-sm-8 col-md-8">';
html+='<lable>Введите ответ</lable><input type="text" value="" name="answer'+newLenght+'1[]">';
html+='<lable>Введите текст отображаемого ответа</lable> <input type="text" name="answerText'+newLenght+'1[]">';
html+='</div>';
html+='</div>';
html+=' <input type="hidden" value="1" name="countAnswers'+newLenght+'[]"><label class="right-label">Добавить еще один ответ</label><a href="https://wordpress.stackexchange.com/questions/181907/javascript:void(0)" onclick="add_answer(this)" class="add_answer"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/plus.png'?>"></a>';
html+='</div>';
html+='<input type="hidden" value="1" name="countQuestions[]"><label class="right-label">Добавить еще один вопрос</label><a href="https://wordpress.stackexchange.com/questions/181907/javascript:void(0)" onclick="add_question(this)" class="add_question"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/plus.png'?>"></a>';
html+='<a href="https://wordpress.stackexchange.com/questions/181907/javascript:void(0)" onclick="remove_question(this)" class="remove_question"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/remove.png'?>"></a>';
html+='</div>';
jQuery('#'+parentID).after(html);
jQuery('#'+parentID+ ' .remove_question').remove();
jQuery('#'+parentID+ ' .add_question').remove();
jQuery('#'+parentID+ ' .right-label').remove();
}
function remove_question(obj)
{
var parentID=jQuery(obj).parents('.questions_blocks').attr('id');
var countQustBlock=parentID.split('-');
var newParent=countQustBlock[1]-1;
jQuery('#'+parentID).remove();
var html="";
if(newParent>1)
{
html+='<a href="https://wordpress.stackexchange.com/questions/181907/javascript:void(0)" onclick="remove_question(this)" class="remove_question"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/remove.png'?>"></a>';
}else;
html+='<label class="right-label">Добавить еще один вопрос</label><a href="https://wordpress.stackexchange.com/questions/181907/javascript:void(0)" onclick="add_question(this)" class="add_question"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/plus.png'?>"></a>';
jQuery('#questions_blocks-'+newParent).append(html);
}
function remove_answer(obj)
{
var parentID=jQuery(obj).parents('.answer').attr('id');
var questionParentId=jQuery(obj).parent('.answer').parent('.questions_blocks').attr('id');
var answerLenght=jQuery('#'+questionParentId +' .answer').length;
var questionParent=jQuery(obj).parent('.answer').parent('.questions_blocks').length;
var countAnsBlock=parentID.split('-');
var newParent=countAnsBlock[1]-1;
var html="";
if(newParent > 1)
{
html+=' <a href="https://wordpress.stackexchange.com/questions/181907/javascript:void(0)" onclick="remove_answer(this)" class="remove_answer"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/remove.png'?>"></a>';
}else;
html+='<label class="right-label">Добавить еще один ответ</label><a href="https://wordpress.stackexchange.com/questions/181907/javascript:void(0)" onclick="add_answer(this)" class="add_answer"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/plus.png'?>"></a>';
jQuery('#'+questionParentId+' #'+parentID).remove();
jQuery('#'+questionParentId+' #answer-'+newParent).append(html);
}
</script>
<?php
}
Сохранить мета-бокс
function bsw_save_meta_fields( $post_id ) {
if (!isset($_POST['bsw_our_nonce']) || !wp_verify_nonce($_POST['bsw_our_nonce'], basename(__FILE__)))
return 'nonce не проверен';
if ( wp_is_post_autosave( $post_id ) )
return 'автосохранение';
if ( wp_is_post_revision( $post_id ) )
return 'ревизия';
if ( 'bws_quiz' == $_POST['post_type'] ) {
if ( ! current_user_can( 'edit_page', $post_id ) )
return 'не удалось отредактировать страницу';
} elseif ( ! current_user_can( 'edit_post', $post_id ) ) {
return 'не удалось отредактировать запись';
}
$bws_question_count=$_POST['countQuestions'];
update_post_meta($post_id,'countQuestions',$bws_question_count);
$count= count($bws_question_count);
$i=1;
while($i<=$count)
{
$Questvalue=$_POST['questions'.$i];
// print_r($Questvalue);
$bws_correct_answer=$_POST['correctAnswer'.$i.'1'];
update_post_meta($post_id,'correctAnswer'.$i.'1',$bws_correct_answer);
$bws_ans_value = $_POST['countAnswers'.$i];
$bws_ans_count= count($bws_ans_value);
$j=1;
// echo 'Ответ ';
while ( $j<= $bws_ans_count) {
$answervalue=$_POST['answer'.$i.''.$j];
// print_r($answervalue);
$answertextvalue=$_POST['answerText'.$i.''.$j];
update_post_meta($post_id,'answer'.$i.''.$j,$answervalue);
update_post_meta($post_id,'answerText'.$i.''.$j,$answertextvalue);
// print_r($answertextvalue);
$j++;
}
update_post_meta($post_id,'questions'.$i,$Questvalue);
update_post_meta($post_id,'correctAnswer'.$i.'1',$bws_correct_answer);
update_post_meta($post_id,'countAnswers'.$i, $bws_ans_count);
$i++;
}
//просто нужно сохранить данные сейчас
}
add_action( 'save_post', 'bsw_save_meta_fields' );
add_action( 'new_to_publish', 'bsw_save_meta_fields' );
.
Ответ или решение
Повторяющиеся поля в настраиваемых мета-боксах WordPress
Если вы хотите добавить повторяющиеся поля в ваш настраиваемый мета-бокс в WordPress, то использование библиотеки Custom Metaboxes and Fields for WordPress (CMB) обеспечит вам необходимую функциональность. Это позволит вам динамически добавлять несколько записей для одних и тех же полей, как, например, для "Клиента", "Навыков" и "Даты выпуска", которые вы указали в вашем коде.
Настройка мета-бокса с повторяющимися полями
Вот как вы можете адаптировать ваш существующий код для включения повторяющихся полей, используя функционал группы в CMB:
1. Определение мета-бокса
В файле functions.php добавьте следующую функцию для создания вашего мета-бокса:
function dikka_cmb_metaboxes( array $meta_boxes ) {
$prefix = 'dikka_';
$meta_boxes['details_meox'] = array(
'id' => 'details_meox',
'title' => __( 'Проектные детали', 'dikka' ),
'pages' => array( 'portfolio' ), // Тип поста
'context' => 'normal',
'priority' => 'high',
'show_names' => true,
'fields' => array(
array(
'id' => $prefix . 'client_group',
'type' => 'group',
'description' => __( 'Добавьте информацию о клиенте', 'dikka' ),
'options' => array(
'group_title' => __( 'Клиент {#}', 'dikka' ),
'add_button' => __( 'Добавить клиента', 'dikka' ),
'remove_button' => __( 'Удалить клиента', 'dikka' ),
'sortable' => true,
),
'fields' => array(
array(
'name' => __( 'Имя клиента', 'dikka' ),
'id' => 'client_name',
'type' => 'text',
),
array(
'name' => __( 'Навыки', 'dikka' ),
'id' => 'client_skills',
'type' => 'text',
),
array(
'name' => __( 'Дата выпуска', 'dikka' ),
'id' => 'release_date',
'type' => 'text_date',
),
),
),
),
);
return $meta_boxes;
}
add_filter( 'cmb2_init', 'dikka_cmb_metaboxes' );2. Подключение скриптов
Убедитесь, что у вас есть подключение необходимых скриптов и стилей для обработки мета-боксов. CMB2 сам по себе уже включает необходимый JavaScript для работы с группами полей.
3. Сохранение данных мета-бокса
Для сохранения данных, добавьте следующий код для обработки данных формы при сохранении поста:
function dikka_save_metabox_data( $post_id ) {
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if ( ! isset( $_POST['dikka_nonce'] ) || ! wp_verify_nonce( $_POST['dikka_nonce'], basename( __FILE__ ) ) ) return;
// Сохраняем данные группы мета-бокса
$client_group = isset( $_POST['dikka_client_group'] ) ? $_POST['dikka_client_group'] : array();
update_post_meta( $post_id, 'dikka_client_group', $client_group );
}
add_action( 'save_post', 'dikka_save_metabox_data' );Заключение
Используя подход, описанный выше, вы сможете легко добавить повторяющиеся поля к вашему мета-боксу, что значительно улучшит пользовательский интерфейс и повысит его функциональность. Данный метод подходит для проектов, где необходимо управлять множеством однотипных данных, таких как информация о клиентах, навыках или датах выпуска.
Надеюсь, это поможет вам решить вашу задачу. В случае дополнительных вопросов или необходимости в более глубоких изменениях, не стесняйтесь обращаться за помощью.