文本框未保存在 wordpress 主题设置中

Question

我正在用 wordpress 中的主题选项创建一个 wordpress 主题。我喜欢在主题设置页面中使用 jquery 添加动态添加和删除文本框。我的问题是，

theme_settings.php

   <?php
function theme_settings_init(){
    register_setting( 'theme_settings', 'theme_settings' );
}

function add_settings_page() {
add_menu_page( __( 'Theme Settings' ), __( 'Theme Settings' ), 'manage_options', 'settings', 'theme_settings_page');
}

//add actions
add_action( 'admin_init', 'theme_settings_init' );
add_action( 'admin_menu', 'add_settings_page' );

//start settings page
function theme_settings_page() {

if ( ! isset( $_REQUEST['updated'] ) )
$_REQUEST['updated'] = false;

?>

<div>

<div id="icon-options-general"></div>
<h2><?php _e( 'Theme Settings' ) //your admin panel title ?></h2>

<?php
//show saved options message
if ( false !== $_REQUEST['updated'] ) : ?>
<div><p><strong><?php _e( 'Options saved' ); ?></strong></p></div>
<?php endif; ?>

<form method="post" action="options.php">

<?php settings_fields( 'theme_settings' ); ?>
<?php $options = get_option( 'theme_settings' ); ?>

<div id='TextBoxesGroup'>
        <?php
    $counter = 1;
    while (get_option('textbox'.$counter) && $counter <= 10) {
      echo '<div id="TextBoxDiv'.$counter.'">
        <input type="textbox" id="theme_settings[textbox'.$counter.'] name="theme_settings[textbox'.$counter.']" >
        </div>';
      $counter++;
    }
        ?>
    </div>
    <input type='button' value='Add Button' id='addButton'>
    <input type='button' value='Remove Button' id='removeButton'>


<p><input name="submit" id="submit" value="Save Changes" type="submit"></p>
</form>


</div><!-- END wrap -->
<?php
}

我的 javascript 文件是：

 $(document).ready(function(){

    var counter = 2;

    $("#addButton").click(function () {

    if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
    }   

    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);

    $('<div id="TextBoxDiv'+counter+'"></div>').append(
'<input type="text" name="theme_settings[textbox' + counter + 
']" id="theme_settings[textbox' + counter + ']" value="" >').appendTo('#TextBoxesGroup');

    newTextBoxDiv.appendTo("#TextBoxesGroup");


    counter++;
     });

     $("#removeButton").click(function () {
    if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   

    counter--;

        $("#TextBoxDiv" + counter).remove();

     });

     $("#getButtonValue").click(function () {

    var msg = '';
    for(i=1; i<counter; i++){
      msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
    }
          alert(msg);
     });
  });

现在我的问题是，在主题设置页面中，添加操作和删除操作工作得很好，但是在保存主题设置选项时，添加的文本框消失了。刷新页面时也会发生这种情况。 如果保存主题选项页面，请任何人帮助我如何保持这些添加的文本框保持不变。

Answer 1

使用.append() 代替.after().html()。这样你的代码就进入了相应的 div 元素。我也使用了 jQuery。

newTextBoxDiv.after().html(
'<input type="text" name="theme_settings[textbox' + counter + 
']" id="theme_settings[textbox' + counter + ']" value="" >');

应该是

$('<div id="TextBoxDiv'+counter+'"></div>').append(
'<input type="text" name="theme_settings[textbox' + counter + 
']" id="theme_settings[textbox' + counter + ']" value="" >').appendTo('#TextBoxesGroup');

要使文本框出现，您需要这样的 while 循环：

$counter = 1;
while (get_option('textbox'.$counter) && $counter <= 10) {
  echo '<div id="TextBoxDiv'.$counter.'">
    <input type="textbox" id="theme_settings[textbox'.$counter.'] name="theme_settings[textbox'.$counter.']" >
    </div>';
  $counter++;
}

当你保存它们时，你可以这样做：

$counter = 0;
while (isset($_POST['theme_settings']['textbox'.$counter']) && $counter <= 10) {
  update_option('textbox'.$counter, $_POST['theme_settings']['textbox'.$counter']);
  $counter++;
}
// now remove the rest of them if they were previously set
// for example we now set only 5 of them and there were 10 before
// continue with counter from where we left in the previous while loop
while ($counter <= 10) {
  update_option('textbox'.$counter, false);
  $counter++;
}

编辑：

function theme_settings_page() {
  $updated = false;

  if (isset($_REQUEST['updated'])) {
    update_option('theme_settings', $_POST['theme_settings']);
    $updated = true;
  }

  // ....

  if ($updated) {
    echo '<div><p><strong>';
      _e( 'Options saved' );
    echo '</strong></p></div>';
  }

  $counter = 1;
  $options = get_option('theme_settings');
  while (isset($options['textbox'.$counter])) {
    echo '<div id="TextBoxDiv'.$counter.'">
        <input type="textbox" id="theme_settings[textbox'.$counter.'] name="theme_settings[textbox'.$counter.']" value="'.$options['textbox'.$counter].'" />
        </div>';
    $counter++;
  }

  echo '<input type="hidden" name="updated" value="1" />';

  // the rest of your form
}