WordPress设置API，在自定义菜单页面上实现选项卡

时间：2013-12-23 作者：Omar Tariq

我一直在关注这家伙的WordPress设置API教程系列：

http://wp.tutsplus.com/tutorials/theme-development/the-complete-guide-to-the-wordpress-settings-api-part-1/

到目前为止，我已经成功地完成了基本的工作。现在，在实现tab时，我面临着一个问题。

问题1：选项卡不工作。所有字段都显示在两个选项卡上。第1节应显示在选项卡1上，第2节应显示在选项卡2上。

问题2：未保存选项2。在实现选项卡之前，它工作得很好。

enter image description here

enter image description here

代码：

/* ----------------------------------------------------------------------------- */
/* 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 href="?page=my-menu-slug&tab=tab_one" class="nav-tab <?php echo $active_tab == \'tab_one\' ? \'nav-tab-active\' : \'\'; ?>">Tab One</a>  
                <a 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

3 个回复
最合适的回答,由SO网友:MrJustin 整理而成

我是这样做的，当心，帖子太多了。

/* 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\');
}
现在，对于我的设置字段，删除了额外的字段，仅作为示例。

这用于“首页设置”和“首页选项卡”

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\'
);
这是我的标题选项，即“标题选项”选项卡

/* 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\' 
    ) 
);
注册设置

register_setting(\'ch_essentials_front_page_option\', \'ch_essentials_front_page_option\');
register_setting(\'ch_essentials_header_option\', \'ch_essentials_header_option\');
所有这些都封装在一个函数中，然后使用admin\\u init完成

/* Options
-----------------------------------------------------------------*/
add_action(\'admin_init\', \'ch_essentials_options\');
function ch_essentials_options() { 
    /* Code Shown above */
}
回拨电话：

/* 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_header_option\'); 

    echo \'<input type="text" id="\'  . $args[0] . \'" name="ch_essentials_header_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>\';


}

Now this is the display part, with the tabs..

如果您的设置部分和字段完全像这样完成，那么您将能够完美地完成选项卡。

/* 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 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 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
}
----编辑-----

我确实在你的帖子中注意到，在选项卡部分的实际显示页面上有“elseif”而没有“elseif”

SO网友:Md. Zubaer Ahammed

这样的编码对我很有用：

<?php 

/* ----------------------------------------------------------------------------- */
/* 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 href="?page=my-menu-slug&tab=tab_one" class="nav-tab <?php echo $active_tab == \'tab_one\' ? \'nav-tab-active\' : \'\'; ?>">Tab One</a>  
                <a 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-1\' );

                } else if( $active_tab == \'tab_two\' )  {

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

                }
            ?>

                <?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-1\'                           // 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-2\'                           // 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-1\',                          // 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-2\', // 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  

?>

SO网友:Deepu GOpi

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

    <?php
        if( $active_tab == \'tab_one\' ) {  

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

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

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

        }
    ?>
更改my-menu-slug 到my-menu-slug-1 和my-menu-slug-2

结束
标签： menus   settings-api   options   小码农  

相关推荐

Problem with custom menus

在菜单上，我说的是自定义菜单，我有一个带有几列的页脚，每列都有一个项目列表，每列菜单都需要从wp admin上的菜单选项进行更新，所以我创建了关于函数的部分。调用菜单并在页脚上添加每个菜单的php。php文档，类似于：<?php wp_nav_menu( array(\'menu\' => \'f-1\', \'menu_class\' => \'\', \'container\' => \'nav\' )); ?> <?php wp_nav_menu( arr