Add tabbed menu to admin page

时间:2013-08-26 作者:Er.KT

我对WordPress非常陌生,我想在这里创建一个带有选项卡的管理页面,如图所示

admin sections with tabs

如何使用这些选项卡创建这样的页面?

2 个回复
SO网友:Vincent Wong

如果你不喜欢这种方法。也许您需要以下代码:
enter image description here您可以尝试在函数中输入以下代码。php文件-

     // Theme options
    /*
        get options & set default options
    */

if( !function_exists(\'share3h_theme_get_options\') ) :

    function share3h_theme_get_options($option){
        $share3h_theme_options = get_option(\'share3h_theme_options\');

        if( !$share3h_theme_options || array_key_exists($option, $share3h_theme_options) ) :

            $share3h_theme_default_options = array(

                \'s3h_title\'                 =>      \'0\',
                \'s3h_keywords\'          =>      \'0\',
                \'s3h_description\'       =>      \'0\',
                \'s3h_headerlogo\'        =>      \'0\',
                \'s3h_footerlogo\'        =>      \'0\',
                \'s3h_qrcode\'                =>      \'0\',

                \'s3h_banner_1\'          =>      \'0\',
                \'s3h_banner_2\'          =>      \'0\',
                \'s3h_banner_3\'          =>      \'0\',
                \'s3h_banner_4\'          =>      \'0\',
                \'s3h_banner_s1\'         =>      \'0\',
                \'s3h_banner_s2\'         =>      \'0\',
                \'s3h_banner_s3\'         =>      \'0\',
                \'s3h_banner_s4\'         =>      \'0\',

                \'s3h_copyright\'         =>      \'0\',
                \'s3h_code_1\'                =>      \'0\',
                \'s3h_code_2\'                =>      \'0\',

                );

            add_option(\'share3h_theme_options\', $share3h_theme_default_options, \'\');

            $result = $share3h_theme_options[$option];

        else:

            $result = $share3h_theme_options[$option];

        endif;

        return $result;

    }

endif;

/*
    entering form data
*/

if( !function_exists(\'share3h_theme_backend\') ) :

    function share3h_theme_backend(){
    ?>      
        <div class="wrap">

            <div id="icon-options-general" class="icon32"></div>
            <h2><?php echo __(\'Theme Setup\', LANGUAGE_ZONE); ?></h2>
            <?php
            $active_tab = isset($_GET[\'tab\']) ? $_GET[\'tab\'] : \'general\';
            if(isset($_GET[\'tab\'])) $active_tab = $_GET[\'tab\'];
            ?>

            <h2 class="nav-tab-wrapper">

            <a href="?page=theme_option&amp;tab=general" class="nav-tab <?php echo $active_tab == \'general\' ? \'nav-tab-active\' : \'\'; ?>"><?php _e(\'General\', LANGUAGE_ZONE); ?></a>

            <a href="?page=theme_option&amp;tab=banner" class="nav-tab <?php echo $active_tab == \'banner\' ? \'nav-tab-active\' : \'\'; ?>"><?php _e(\'Banner\', LANGUAGE_ZONE); ?></a>

            <a href="?page=theme_option&amp;tab=other" class="nav-tab <?php echo $active_tab == \'other\' ? \'nav-tab-active\' : \'\'; ?>"><?php _e(\'Other\', LANGUAGE_ZONE); ?></a>

            </h2>

            <form method="post">
            <?php if($active_tab == \'general\') { ?>

            <div id="poststuff" class="ui-sortable meta-box-sortables">
                <div class="postbox">
                <h3><?php _e(\'General Settings\', LANGUAGE_ZONE); ?></h3>
                    <div class="inside">

                        <table class="form-table">
                            <tbody>

                            <tr>
                                <th scope="row"><label for="s3h_title"><?php echo __(\'Title\', LANGUAGE_ZONE); ?></label></th>
                                    <td>
                                    <input name="s3h_title" id="s3h_title" value="<?php echo share3h_theme_get_options(\'s3h_title\'); ?>" class="large-text" type="text">
                                    <p class="s3h_title"><?php echo __(\'SEO use.\',LANGUAGE_ZONE); ?></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_keywords"><?php echo __(\'Keywords\', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <textarea name="s3h_keywords" id="s3h_keywords" rows="2" cols="50" class="large-text code"><?php echo share3h_theme_get_options(\'s3h_keywords\'); ?></textarea>
                                    <p class="s3h_keywords"><?php echo __(\'SEO use.\',LANGUAGE_ZONE); ?></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_description"><?php echo __(\'Description\', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <textarea name="s3h_description" id="s3h_description" rows="3" cols="50" class="large-text code"><?php echo share3h_theme_get_options(\'s3h_description\'); ?></textarea>
                                    <p class="s3h_description"><?php echo __(\'SEO use.\',LANGUAGE_ZONE); ?></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_headerlogo"><?php echo __(\'Header Logo\', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_headerlogo" type="text" name="s3h_headerlogo" value="<?php echo share3h_theme_get_options(\'s3h_headerlogo\'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __(\'Upload Image\', LANGUAGE_ZONE); ?>" />
                                    <p><img src="<?php echo share3h_theme_get_options(\'s3h_headerlogo\'); ?>" style="max-width:500px"></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_footerlogo"><?php echo __(\'Footer Logo\', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_footerlogo" type="text" name="s3h_footerlogo" value="<?php echo share3h_theme_get_options(\'s3h_footerlogo\'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __(\'Upload Image\', LANGUAGE_ZONE); ?>" />
                                    <p><img src="<?php echo share3h_theme_get_options(\'s3h_footerlogo\'); ?>" style="max-width:500px"></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_qrcode"><?php echo __(\'QR Code.\', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_qrcode" type="text" name="s3h_qrcode" value="<?php echo share3h_theme_get_options(\'s3h_qrcode\'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __(\'Upload Image\', LANGUAGE_ZONE); ?>" />
                                    <p><img width="100" src="<?php echo share3h_theme_get_options(\'s3h_qrcode\'); ?>" style="max-height:100px"></p>
                                </td>
                            </tr>

                            </tbody>
                        </table>

                    </div>
                </div>
            </div>

            <?php } if($active_tab == \'banner\') { ?>

            <div id="poststuff" class="ui-sortable meta-box-sortables">
                <div class="postbox">
                <h3><?php _e(\'Banner Settings\', LANGUAGE_ZONE); ?></h3>
                    <div class="inside">

                        <table class="form-table">
                            <tbody>

                            <tr>
                                <th scope="row"><label for="s3h_banner_1"><?php echo __(\'Image 1\', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_banner_1" type="text" name="s3h_banner_1" value="<?php echo share3h_theme_get_options(\'s3h_banner_1\'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __(\'Upload Image\', LANGUAGE_ZONE); ?>" />
                                    <p><img src="<?php echo share3h_theme_get_options(\'s3h_banner_1\'); ?>" alt="<?php echo __(\'Image\', LANGUAGE_ZONE); ?>"  style="max-width:500px"></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_banner_2"><?php echo __(\'Image 2\', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_banner_2" type="text" name="s3h_banner_2" value="<?php echo share3h_theme_get_options(\'s3h_banner_2\'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __(\'Upload Image\', LANGUAGE_ZONE); ?>" />
                                    <p><img src="<?php echo share3h_theme_get_options(\'s3h_banner_2\'); ?>" alt="<?php echo __(\'Image\', LANGUAGE_ZONE); ?>"  style="max-width:500px"></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_banner_3"><?php echo __(\'Image 3\', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_banner_3" type="text" name="s3h_banner_3" value="<?php echo share3h_theme_get_options(\'s3h_banner_3\'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __(\'Upload Image\', LANGUAGE_ZONE); ?>" />
                                    <p><img src="<?php echo share3h_theme_get_options(\'s3h_banner_3\'); ?>" alt="<?php echo __(\'Image\', LANGUAGE_ZONE); ?>"  style="max-width:500px"></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_banner_4"><?php echo __(\'Image 4\', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_banner_4" type="text" name="s3h_banner_4" value="<?php echo share3h_theme_get_options(\'s3h_banner_4\'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __(\'Upload Image\', LANGUAGE_ZONE); ?>" />
                                    <p><img src="<?php echo share3h_theme_get_options(\'s3h_banner_4\'); ?>" alt="<?php echo __(\'Image\', LANGUAGE_ZONE); ?>" style="max-width:500px"></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_banner_s1"><?php echo __(\'Image S1\', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_banner_s1" type="text" name="s3h_banner_s1" value="<?php echo share3h_theme_get_options(\'s3h_banner_s1\'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __(\'Upload Image\', LANGUAGE_ZONE); ?>" />
                                    <p><img src="<?php echo share3h_theme_get_options(\'s3h_banner_s1\'); ?>" alt="<?php echo __(\'Image\', LANGUAGE_ZONE); ?>" style="max-width:500px"></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_banner_s2"><?php echo __(\'Image S2\', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_banner_s2" type="text" name="s3h_banner_s2" value="<?php echo share3h_theme_get_options(\'s3h_banner_s2\'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __(\'Upload Image\', LANGUAGE_ZONE); ?>" />
                                    <p><img src="<?php echo share3h_theme_get_options(\'s3h_banner_s2\'); ?>" alt="<?php echo __(\'Image\', LANGUAGE_ZONE); ?>" style="max-width:500px"></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_banner_s3"><?php echo __(\'Image S3\', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_banner_s3" type="text" name="s3h_banner_s3" value="<?php echo share3h_theme_get_options(\'s3h_banner_s3\'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __(\'Upload Image\', LANGUAGE_ZONE); ?>" />
                                    <p><img src="<?php echo share3h_theme_get_options(\'s3h_banner_s3\'); ?>" alt="<?php echo __(\'Image\', LANGUAGE_ZONE); ?>" style="max-width:500px"></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_banner_s4"><?php echo __(\'Image S4\', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_banner_s4" type="text" name="s3h_banner_s4" value="<?php echo share3h_theme_get_options(\'s3h_banner_s4\'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __(\'Upload Image\', LANGUAGE_ZONE); ?>" />
                                    <p><img src="<?php echo share3h_theme_get_options(\'s3h_banner_s4\'); ?>" alt="<?php echo __(\'Image\', LANGUAGE_ZONE); ?>" style="max-width:500px"></p>
                                </td>
                            </tr>

                            </tbody>
                        </table>

                    </div>
                </div>
            </div>

            <?php } if($active_tab == \'other\') { ?>

            <div id="poststuff" class="ui-sortable meta-box-sortables">
                <div class="postbox">
                <h3><?php _e(\'Other Settings\', LANGUAGE_ZONE); ?></h3>
                    <div class="inside">
                        <table class="form-table">
                            <tbody>

                            <tr>
                <th scope="row"><label for="s3h_copyright"><?php echo __(\'Copyright\', LANGUAGE_ZONE); ?></label></th>
                    <td>
                    <textarea name="s3h_copyright" id="s3h_copyright" class="large-text" type="text"><?php echo share3h_theme_get_options(\'s3h_copyright\'); ?></textarea>
                </td>
            </tr>
            <tr>
                <th scope="row"><label for="s3h_code_1"><?php echo __(\'Code 1\', LANGUAGE_ZONE); ?></label></th>
                <td>
                    <textarea name="s3h_code_1" id="s3h_code_1" rows="5" cols="50" class="large-text code"><?php echo share3h_theme_get_options(\'s3h_code_1\'); ?></textarea>
                    <p class="s3h_code_1"><?php echo __(\'This can be used share code or other code, it will be loaded before  end of body tag.\',LANGUAGE_ZONE); ?></p>
                </td>
            </tr>

            <tr>
                <th scope="row"><label for="s3h_code_2"><?php echo __(\'Code 2\', LANGUAGE_ZONE); ?></label></th>
                <td>
                    <textarea name="s3h_code_2" id="s3h_code_2" rows="5" cols="50" class="large-text code"><?php echo share3h_theme_get_options(\'s3h_code_2\'); ?></textarea>
                    <p class="s3h_code_2"><?php echo __(\'This can be used share code or other code, it will be loaded before  end of body tag.\',LANGUAGE_ZONE); ?></p>
                </td>
            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <?php } ?>
            <p class="submit"><input name="submit" id="submit" class="button button-primary" value="Save" type="submit"></p>
            </form>

        </div>
    <?php
    }

endif;

/*
    submit form data
*/

if( !function_exists(\'share3h_theme_form\')) :

    function share3h_theme_form(){

        //array_key_exists(\'submit\', $_POST) ? $submit = $_POST[\'submit\']:$submit = NULL;
        //isset($_POST[\'submit\'])? $submit=$_POST[\'submit\'] : $submit = NULL;

        if($_POST[\'submit\']):
            $share3h_theme_new_options=array();
            $share3h_theme_options=get_option(\'share3h_theme_options\');

            foreach($share3h_theme_options as $key=>$value){

                if($_POST[$key]==\'\'){
                    $share3h_theme_new_options[$key]=$value;
                }else{
                    $share3h_theme_new_options[$key]=$_POST[$key];
                }

            }

            update_option(\'share3h_theme_options\', $share3h_theme_new_options);

        endif;

        echo share3h_theme_backend();
    }

endif;

/*
    set menu
*/

if( !function_exists(\'share3h_theme_menu\') ) :

    function share3h_theme_menu(){
        add_options_page(__(\'Theme setup\', LANGUAGE_ZONE), __(\'Theme setup\', LANGUAGE_ZONE), \'read\', \'theme_option\', \'share3h_theme_form\');
    }

endif;

add_action(\'admin_menu\', \'share3h_theme_menu\');

SO网友:Vincent Wong

您可以使用OptionTree插件https://wordpress.org/plugins/option-tree/
它也可以在主题模式下工作。enter image description here

结束

相关推荐

WordPress子域wp-admin重定向到主域

我们在地址www.example上安装了wordpress。com。我们希望有一个作为子域的开发站点,所以我们创建了一个子域dev.example。cpanel上的com。创建了其数据库的副本,并将文件复制到dev.example的根目录中。com。然后修改wp配置。php指向重复的db。现在的问题是,当我们尝试访问dev.example时。com/wp管理员,它重定向到https://www.example.com/wp-login.php?redirect_to=https%3A%2F%2Fdev.e