web-dev-qa-db-fra.com

Ajouter un menu à onglets à la page d'administration

Je suis très nouveau dans WordPress et je souhaite ici créer une page d’administrateur avec des onglets, comme le montre l’image

admin sections with tabs

Comment créer une telle page avec ces onglets?

2
Er.KT

si vous n'aimez pas cette méthode. peut-être voudriez-vous que le code suivant:
enter image description here vous pouvez essayer de mettre le code suivant dans votre fichier functions.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');
1
Vincent Wong

Vous pouvez utiliser le plugin OptionTree https://wordpress.org/plugins/option-tree/
Il peut également être travaillé en mode thème. enter image description here

0
Vincent Wong