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++;
}

修改

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

1 个答案: