私はこれにしばらく取り組んできましたが、オンラインで他のどこにも答えを見つけることができませんでした.
wordpress のオプション パネルには、入力できるテキストエリアがあり、別のテキストエリアを追加したい場合は、クリックするだけで追加および削除できます。
これは次のようになります。
すべての textarea オプションは配列に入れられ、いつでも呼び出すことができます。
私がやりたいこと、そしてしばらくの間理解しようとしてきたことは次のとおりです。各テキストエリアの下にテキスト入力を追加できるようにしたいのですが、それを更新するたびに、各テキスト入力を配置します配列に。
これは、私がまだ考えていないほど単純なことだと感じています。そうでない場合は、お知らせください。
オプション パネルの github は次のとおりです: https://github.com/leemason/NHP-Theme-Options-Framework
以下は私が取り組んできたコードです：
このコードは、オプション フォルダー内のディレクトリ内field_multi_textarea.phpにある新しいフォルダーに追加した新しいファイルにあります。multi_textfields
<?php
class NHP_Options_multi_textarea extends NHP_Options{
/**
* Field Constructor.
*
* Required - must call the parent constructor, then assign field and value to vars, and obviously call the render field function
*
* @since NHP_Options 1.0.5
*/
function __construct($field = array(), $value ='', $parent){
parent::__construct($parent->sections, $parent->args, $parent->extra_tabs);
$this->field = $field;
$this->value = $value;
//$this->render();
}//function
/**
* Field Render Function.
*
* Takes the vars and outputs the HTML for the field in the settings
*
* @since NHP_Options 1.0.5
*/
function render(){
$class = (isset($this->field['class']))?$this->field['class']:'large-text';
echo '<ul id="'.$this->field['id'].'-ul">';
if(isset($this->value) && is_array($this->value)){
foreach($this->value as $k => $value){
if($value != ''){
echo '<li><div class="fadeout"><textarea id="'.$this->field['id'].'-'.$k.'" name="'.$this->args['opt_name'].'['.$this->field['id'].'][]" rows="6" class="'.$class.'" />'.esc_attr($value).'</textarea></div> <a href="javascript:void(0);" class="nhp-opts-multi-textarea-remove">'.__('Remove', 'nhp-opts').'</a></li>';
}//if
}//foreach
}else{
echo '<li><div class="fadeout"><textarea id="'.$this->field['id'].'" name="'.$this->args['opt_name'].'['.$this->field['id'].'][]" rows="6" value="'.$this->field['std'].'" class="'.$class.'" />'.esc_attr($value).'</textarea></div> <a href="javascript:void(0);" class="nhp-opts-multi-textarea-remove">'.__('Remove', 'nhp-opts').'</a></li>';
}//if
echo '<li style="display:none;"><div class="fadeout"><textarea id="'.$this->field['id'].'" name="" rows="6" class="'.$class.'" /></textarea></div> <a href="javascript:void(0);" class="nhp-opts-multi-textarea-remove">'.__('Remove', 'nhp-opts').'</a></li>';
echo '</ul>';
echo '<a href="javascript:void(0);" class="nhp-opts-multi-textarea-add" rel-id="'.$this->field['id'].'-ul" rel-name="'.$this->args['opt_name'].'['.$this->field['id'].'][]">'.__('Add More', 'nhp-opts').'</a><br/>';
echo (isset($this->field['desc']) && !empty($this->field['desc']))?' <span class="description">'.$this->field['desc'].'</span>':'';
}//function
/**
* Enqueue Function.
*
* If this field requires any scripts, or css define this function and register/enqueue the scripts/css
*
* @since NHP_Options 1.0.5
*/
function enqueue(){
wp_enqueue_script(
'nhp-opts-field-multi-textarea-js',
NHP_OPTIONS_URL.'fields/multi_textarea/field_multi_textarea.js',
array('jquery'),
time(),
true
);
}//function
}//class
?>
これは、名前を付けてフォルダーfield_multi_textarea.js内に配置した js です。multi_text
jQuery(document).ready(function(){
jQuery('.nhp-opts-multi-textarea-remove').live('click', function(){
jQuery(this).prev('.fadeout').val('');
jQuery(this).parent().fadeOut('slow', function(){jQuery(this).remove();});
});
jQuery('.nhp-opts-multi-textarea-add').click(function(){
var new_input = jQuery('#'+jQuery(this).attr('rel-id')+' li:last-child').clone();
jQuery('#'+jQuery(this).attr('rel-id')).append(new_input);
jQuery('#'+jQuery(this).attr('rel-id')+' li:last-child').removeAttr('style');
jQuery('#'+jQuery(this).attr('rel-id')+' li:last-child textarea').val('');
jQuery('#'+jQuery(this).attr('rel-id')+' li:last-child textarea').attr('name' , jQuery(this).attr('rel-name'));
});
});
次のように、NHP-options.php でこの関数を呼び出しています。
array(
'id' => 'cf_emailaddress2',
'type' => 'multi_textarea',
'title' => __('Contact Form Email Address', 'nhp-opts'),
'sub_desc' => __('To add more, click add more', 'nhp-opts'),
'et_url' => 'myurl',
'std' => get_bloginfo('admin_email') ."",
'desc' => __('Contact Form Email Address, This is where the form will be sent to.', 'nhp-opts')
),
入力を下の画像のようにすることはできますが、その値は保存されないか、テキストエリアにあるものと同じです。
どんな助けでも大歓迎です。ありがとう