API de configuración WordPress, implementando las pestañas en la página de menú personalizado

He estado siguiendo la serie de tutoriales de WordPress API de configuración de este tipo: http://wp.tutsplus.com/tutorials/theme-development/the-complete-guide-to-the-wordpress-settings-api-part-1/ Hasta ahora, he tenido éxito en hacer lo básico. Ahora, al implementar ficha, enfrento a problema. Problema 1: Las fichas no están funcionando.

Todos los campos aparecen en las fichas de ambos. Sección 1, debe ser exhibida en una ficha y sección 2 en la ficha 2.

Problema 2: Opción 2 no está siendo guarda. Funcionaba bien antes de aplicar las pestañas.

Código:
/* ----------------------------------------------------------------------------- */
/* Add Menu Page */
/* ----------------------------------------------------------------------------- */ 

function add_my_menu() {
    add_menu_page (
        'Page Title', // page title 
        'Menu Title', // menu title
        'manage_options', // capability
        'my-menu-slug',  // menu-slug
        'my_menu_page',   // function that will render its output
        get_template_directory_uri() . '/assets/ico/theme-option-menu-icon.png'   // link to the icon that will be displayed in the sidebar
        //$position,    // position of the menu option
    );
}
add_action('admin_menu', 'add_my_menu');
function my_menu_page() {
        ?>
        <?php  
        if( isset( $_GET[ 'tab' ] ) ) {  
            $active_tab = $_GET[ 'tab' ];  
        } else {
            $active_tab = 'tab_one';
        }
        ?>  
        <div class="wrap">
            <h2>Menu Page Title</h2>
            <div class="description">This is description of the page.</div>
            <?php settings_errors(); ?> 

            <h2 class="nav-tab-wrapper">  
                <a rel="nofollow" href="?page=my-menu-slug&tab=tab_one" class="nav-tab <?php echo $active_tab == 'tab_one' ? 'nav-tab-active' : ''; ?>">Tab One</a>  
                <a rel="nofollow" href="?page=my-menu-slug&tab=tab_two" class="nav-tab <?php echo $active_tab == 'tab_two' ? 'nav-tab-active' : ''; ?>">Tab Two</a>  
            </h2>  

            <form method="post" action="options.php"> 
            <?php
                if( $active_tab == 'tab_one' ) {  

                    settings_fields( 'setting-group-1' );
                    do_settings_sections( 'my-menu-slug' );

                } elseif( $active_tab == 'tab_two' )  {

                    settings_fields( 'setting-group-2' );
                    do_settings_sections( 'my-menu-slug' );

                }
            ?>

                <?php submit_button(); ?> 
            </form> 

        </div>
        <?php
}

/* ----------------------------------------------------------------------------- */
/* Setting Sections And Fields */
/* ----------------------------------------------------------------------------- */ 

function sandbox_initialize_theme_options() {  
    add_settings_section(  
        'page_1_section',         // ID used to identify this section and with which to register options  
        'Section 1',                  // Title to be displayed on the administration page  
        'page_1_section_callback', // Callback used to render the description of the section  
        'my-menu-slug'                           // Page on which to add this section of options  

    );

    add_settings_section(  
        'page_2_section',         // ID used to identify this section and with which to register options  
        'Section 2',                  // Title to be displayed on the administration page  
        'page_2_section_callback', // Callback used to render the description of the section  
        'my-menu-slug'                           // Page on which to add this section of options  
    );

    /* ----------------------------------------------------------------------------- */
    /* Option 1 */
    /* ----------------------------------------------------------------------------- */ 

    add_settings_field (   
        'option_1',                      // ID used to identify the field throughout the theme  
        'Option 1',                           // The label to the left of the option interface element  
        'option_1_callback',   // The name of the function responsible for rendering the option interface  
        'my-menu-slug',                          // The page on which this option will be displayed  
        'page_1_section',         // The name of the section to which this field belongs  
        array(                              // The array of arguments to pass to the callback. 

In this case, just a description. 'This is the description of the option 1', ) ); register_setting( //~ 'my-menu-slug', 'setting-group-1', 'option_1' ); /* ----------------------------------------------------------------------------- */ /* Option 2 */ /* ----------------------------------------------------------------------------- */ add_settings_field ( 'option_2', // ID -- ID used to identify the field throughout the theme 'Option 2', // LABEL -- The label to the left of the option interface element 'option_2_callback', // CALLBACK FUNCTION -- The name of the function responsible for rendering the option interface 'my-menu-slug', // MENU PAGE SLUG -- The page on which this option will be displayed 'page_2_section', // SECTION ID -- The name of the section to which this field belongs array( // The array of arguments to pass to the callback.

In this case, just a description. 'This is the description of the option 2', // DESCRIPTION -- The description of the field. ) ); register_setting( 'setting-group-2', 'option_2' ); } // function sandbox_initialize_theme_options add_action('admin_init', 'sandbox_initialize_theme_options'); function page_1_section_callback() { echo '<p>Section Description here</p>'; } // function page_1_section_callback function page_2_section_callback() { echo '<p>Section Description here</p>'; } // function page_1_section_callback /* ----------------------------------------------------------------------------- */ /* Field Callbacks */ /* ----------------------------------------------------------------------------- */ function option_1_callback($args) { ?> <input type="text" id="option_1" class="option_1" name="option_1" value="<?php echo get_option('option_1') ?>"> <p class="description option_1"> <?php echo $args[0] ?> </p> <?php } // end sandbox_toggle_header_callback function option_2_callback($args) { ?> <textarea id="option_2" class="option_2" name="option_2" rows="5" cols="50"><?php echo get_option('option_2') ?></textarea> <p class="description option_2"> <?php echo $args[0] ?> </p> <?php } // end sandbox_toggle_header_callback
/* ----------------------------------------------------------------------------- */
/* Add Menu Page */
/* ----------------------------------------------------------------------------- */ 

function add_my_menu() {
    add_menu_page (
        'Page Title', // page title 
        'Menu Title', // menu title
        'manage_options', // capability
        'my-menu-slug',  // menu-slug
        'my_menu_page',   // function that will render its output
        get_template_directory_uri() . 

'/assets/ico/theme-option-menu-icon.png' // link to the icon that will be displayed in the sidebar //$position, // position of the menu option ); } add_action('admin_menu', 'add_my_menu'); function my_menu_page() { ?> <?php if( isset( $_GET[ 'tab' ] ) ) { $active_tab = $_GET[ 'tab' ]; } else { $active_tab = 'tab_one'; } ?> <div class="wrap"> <h2>Menu Page Title</h2> <div class="description">This is description of the page.</div> <?php settings_errors(); ?> <h2 class="nav-tab-wrapper"> <a rel="nofollow" href="?page=my-menu-slug&tab=tab_one" class="nav-tab <?php echo $active_tab == 'tab_one' ? 'nav-tab-active' : ''; ?>">Tab One</a> <a rel="nofollow" href="?page=my-menu-slug&tab=tab_two" class="nav-tab <?php echo $active_tab == 'tab_two' ? 'nav-tab-active' : ''; ?>">Tab Two</a> </h2> <form method="post" action="options.php"> <?php if( $active_tab == 'tab_one' ) { settings_fields( 'setting-group-1' ); do_settings_sections( 'my-menu-slug' ); } elseif( $active_tab == 'tab_two' ) { settings_fields( 'setting-group-2' ); do_settings_sections( 'my-menu-slug' ); } ?> <?php submit_button(); ?> </form> </div> <?php } /* ----------------------------------------------------------------------------- */ /* Setting Sections And Fields */ /* ----------------------------------------------------------------------------- */ function sandbox_initialize_theme_options() { add_settings_section( 'page_1_section', // ID used to identify this section and with which to register options 'Section 1', // Title to be displayed on the administration page 'page_1_section_callback', // Callback used to render the description of the section 'my-menu-slug' // Page on which to add this section of options ); add_settings_section( 'page_2_section', // ID used to identify this section and with which to register options 'Section 2', // Title to be displayed on the administration page 'page_2_section_callback', // Callback used to render the description of the section 'my-menu-slug' // Page on which to add this section of options ); /* ----------------------------------------------------------------------------- */ /* Option 1 */ /* ----------------------------------------------------------------------------- */ add_settings_field ( 'option_1', // ID used to identify the field throughout the theme 'Option 1', // The label to the left of the option interface element 'option_1_callback', // The name of the function responsible for rendering the option interface 'my-menu-slug', // The page on which this option will be displayed 'page_1_section', // The name of the section to which this field belongs array( // The array of arguments to pass to the callback. In this case, just a description.

'This is the description of the option 1', ) ); register_setting( //~ 'my-menu-slug', 'setting-group-1', 'option_1' ); /* ----------------------------------------------------------------------------- */ /* Option 2 */ /* ----------------------------------------------------------------------------- */ add_settings_field ( 'option_2', // ID -- ID used to identify the field throughout the theme 'Option 2', // LABEL -- The label to the left of the option interface element 'option_2_callback', // CALLBACK FUNCTION -- The name of the function responsible for rendering the option interface 'my-menu-slug', // MENU PAGE SLUG -- The page on which this option will be displayed 'page_2_section', // SECTION ID -- The name of the section to which this field belongs array( // The array of arguments to pass to the callback. In this case, just a description.

'This is the description of the option 2', // DESCRIPTION -- The description of the field. ) ); register_setting( 'setting-group-2', 'option_2' ); } // function sandbox_initialize_theme_options add_action('admin_init', 'sandbox_initialize_theme_options'); function page_1_section_callback() { echo '<p>Section Description here</p>'; } // function page_1_section_callback function page_2_section_callback() { echo '<p>Section Description here</p>'; } // function page_1_section_callback /* ----------------------------------------------------------------------------- */ /* Field Callbacks */ /* ----------------------------------------------------------------------------- */ function option_1_callback($args) { ?> <input type="text" id="option_1" class="option_1" name="option_1" value="<?php echo get_option('option_1') ?>"> <p class="description option_1"> <?php echo $args[0] ?> </p> <?php } // end sandbox_toggle_header_callback function option_2_callback($args) { ?> <textarea id="option_2" class="option_2" name="option_2" rows="5" cols="50"><?php echo get_option('option_2') ?></textarea> <p class="description option_2"> <?php echo $args[0] ?> </p> <?php } // end sandbox_toggle_header_callback
.


Solución

Aquí está cómo hacerlo, tenga cuidado, el post es extenso.
/* Add Menus
-----------------------------------------------------------------*/
add_action('admin_menu', 'ch_essentials_admin');
function ch_essentials_admin() {
    /* Base Menu */
    add_menu_page(
    'Essentials Theme',
    'Essentials Theme',
    'manage_options',
    'ch-essentials-options',
    'ch_essentials_index');
}
Ahora para mis campos de configuración, campos adicionales eliminado, sólo como ejemplo. Esto es para 'Front Page Settings' y 'Front Page Tab'
add_action('admin_init', 'ch_essentials_options');
function ch_essentials_options() { 

/* Front Page Options Section */
add_settings_section( 
    'ch_essentials_front_page',
    'Essentials Front Page Options',
    'ch_essentials_front_page_callback',
    'ch_essentials_front_page_option'
);

add_settings_field(  
    'featured_post',                      
    'Featured Post',               
    'ch_essentials_featured_post_callback',   
    'ch_essentials_front_page_option',                     
    'ch_essentials_front_page'
);
Esto es para mis opciones de cabecera, que es la pestaña \
/* Header Options Section */
add_settings_section( 
    'ch_essentials_header',
    'Essentials Header Options',
    'ch_essentials_header_callback',
    'ch_essentials_header_option'
);

add_settings_field(  
    'header_type',                      
    'Header Type',               
    'ch_essentials_textbox_callback',   
    'ch_essentials_header_option',                     
    'ch_essentials_header',
    array(
        'header_type' 
    ) 
);
Configuración de registro
register_setting('ch_essentials_front_page_option', 'ch_essentials_front_page_option');
register_setting('ch_essentials_header_option', 'ch_essentials_header_option');
Todos estos son envueltos en una función, entonces hechos con un admin_init
/* Options
-----------------------------------------------------------------*/
add_action('admin_init', 'ch_essentials_options');
function ch_essentials_options() { 
    /* Code Shown above */
}
Rellamados:
/* Call Backs
-----------------------------------------------------------------*/
function ch_essentials_front_page_callback() { 
    echo '<p>Front Page Display Options:</p>'; 
}
function ch_essentials_header_callback() { 
    echo '<p>Header Display Options:</p>'; 
}
function ch_essentials_textbox_callback($args) { 

    $options = get_option('ch_essentials_front_page_option'); 

    echo '<input type="text" id="'  . 

$args[0] . '" name="ch_essentials_front_page_option[' .

$args[0] . ']" value="' .

$options['' . $args[0] .

''] . '"></input>'; } function ch_essentials_featured_post_callback() { $options = get_option('ch_essentials_front_page_option'); query_posts( $args ); echo '<select id="featured_post" name="ch_essentials_front_page_option[featured_post]">'; while ( have_posts() ) : the_post(); $selected = selected($options[featured_post], get_the_id(), false); printf('<option value="%s" %s>%s</option>', get_the_id(), $selected, get_the_title()); endwhile; echo '</select>'; }
Ahora esta es la parte de la pantalla, con las pestañas...

Si tienes tu configuración secciones y campos exactamente así, entonces usted será capaz de hacer las pestañas perfectamente.
/* Display Page
-----------------------------------------------------------------*/
function ch_essentials_index() {
?>
    <div class="wrap">  
        <div id="icon-themes" class="icon32"></div>  
        <h2>Essentials Theme Options</h2>  
        <?php settings_errors(); ?>  

        <?php  
                $active_tab = isset( $_GET[ 'tab' ] ) ? $_GET[ 'tab' ] : 'front_page_options';  
        ?>  

        <h2 class="nav-tab-wrapper">  
            <a rel="nofollow" href="?page=ch-essentials-options&tab=front_page_options" class="nav-tab <?php echo $active_tab == 'front_page_options' ? 'nav-tab-active' : ''; ?>">Front Page Options</a>  
            <a rel="nofollow" href="?page=ch-essentials-options&tab=header_options" class="nav-tab <?php echo $active_tab == 'header_options' ? 'nav-tab-active' : ''; ?>">Header Options</a>  
        </h2>  


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

            <?php 
            if( $active_tab == 'front_page_options' ) {  
                settings_fields( 'ch_essentials_front_page_option' );
                do_settings_sections( 'ch_essentials_front_page_option' ); 
            } else if( $active_tab == 'header_options' ) {
                settings_fields( 'ch_essentials_header_option' );
                do_settings_sections( 'ch_essentials_header_option' ); 

            }
            ?>             
            <?php submit_button(); ?>  
        </form> 

    </div> 
<?php
}
EDITAR y notó en su post que tienes 'elseif' y no 'else if' en tu página de visualización real en la sección de ficha.





Problemas relacionados

elemento de menú actual no añadido en la página que muestra el tipo de mensaje personalizado (renderizado con plantilla de archivo)

Crear subpáginas en menú de Wordpress por defecto

Add_menu_page y ahorro de la configuración

Cómo agregar tipo de mensaje personalizado en la página de opción

BuddyPress shortcode para pestañas

Menú personalizado ligarse a página no encontrada

Obtener parámetros de URL de sitios de referencia

¿Cómo añadimos las lengüetas en la página del plugin

¿Cómo añado un submenú para un menú personalizado de otro plugin?

Configuración de un menú principal en un tipo de mensaje personalizado

Obtener el primer elemento de menú del menú personalizado

¿Cómo manipular atributos de url menos elemento desplegable en un el menú de wordpress personalizado?

Source: Stack Exchange Inc; License: cc by-sa 3.0 Contacto / Contact