WordPress Settings API, Implementazione di Schede su Pagine di Menu Personalizzate

23 dic 2013, 23:09:51
Visualizzazioni: 17.5K
Voti: 10

Ho seguito la serie di tutorial sulle WordPress Settings API di questo ragazzo:

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

Finora, sono riuscito a fare le cose basilari. Ora, nell'implementare le schede, sto riscontrando problemi.

Problema 1: Le schede non funzionano. Tutti i campi vengono visualizzati su entrambe le schede. La Sezione 1 dovrebbe apparire nella Scheda Uno e la Sezione 2 nella Scheda Due.

Problema 2: L'Opzione 2 non viene salvata. Funzionava correttamente prima di implementare le schede.

Schermata del problema con le schede

Schermata del problema con il salvataggio

Codice:

/* ----------------------------------------------------------------------------- */
/* Aggiungi Pagina Menu */
/* ----------------------------------------------------------------------------- */ 

function add_my_menu() {
    add_menu_page (
        'Titolo Pagina', // titolo pagina 
        'Titolo Menu', // titolo menu
        'manage_options', // capacità
        'my-menu-slug',  // slug menu
        'my_menu_page',   // funzione che renderà l'output
        get_template_directory_uri() . '/assets/ico/theme-option-menu-icon.png'   // link all'icona da visualizzare nella sidebar
        //$position,    // posizione dell'opzione menu
    );
}
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>Titolo Pagina Menu</h2>
            <div class="description">Questa è la descrizione della pagina.</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' : ''; ?>">Scheda Uno</a>  
                <a href="?page=my-menu-slug&tab=tab_two" class="nav-tab <?php echo $active_tab == 'tab_two' ? 'nav-tab-active' : ''; ?>">Scheda Due</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
}

/* ----------------------------------------------------------------------------- */
/* Sezioni e Campi delle Impostazioni */
/* ----------------------------------------------------------------------------- */ 

function sandbox_initialize_theme_options() {  
    add_settings_section(  
        'page_1_section',         // ID usato per identificare questa sezione e con cui registrare le opzioni  
        'Sezione 1',                  // Titolo da visualizzare nella pagina di amministrazione  
        'page_1_section_callback', // Callback per renderizzare la descrizione della sezione  
        'my-menu-slug'                           // Pagina su cui aggiungere questa sezione di opzioni  

    );

    add_settings_section(  
        'page_2_section',         // ID usato per identificare questa sezione e con cui registrare le opzioni  
        'Sezione 2',                  // Titolo da visualizzare nella pagina di amministrazione  
        'page_2_section_callback', // Callback per renderizzare la descrizione della sezione  
        'my-menu-slug'                           // Pagina su cui aggiungere questa sezione di opzioni  
    );

    /* ----------------------------------------------------------------------------- */
    /* Opzione 1 */
    /* ----------------------------------------------------------------------------- */ 

    add_settings_field (   
        'option_1',                      // ID usato per identificare il campo  
        'Opzione 1',                           // Etichetta a sinistra dell'elemento dell'opzione  
        'option_1_callback',   // Nome della funzione responsabile del rendering dell'interfaccia  
        'my-menu-slug',                          // Pagina su cui visualizzare questa opzione  
        'page_1_section',         // Nome della sezione a cui appartiene questo campo  
        array(                              // Array di argomenti da passare al callback  
            'Questa è la descrizione dell\'opzione 1',
        )  
    );  
    register_setting(  
        //~ 'my-menu-slug',  
        'setting-group-1',  
        'option_1'  
    );

    /* ----------------------------------------------------------------------------- */
    /* Opzione 2 */
    /* ----------------------------------------------------------------------------- */     

    add_settings_field (   
        'option_2',  // ID -- ID usato per identificare il campo  
        'Opzione 2', // LABEL -- Etichetta a sinistra dell'elemento dell'opzione  
        'option_2_callback', // CALLBACK FUNCTION -- Nome della funzione responsabile del rendering  
        'my-menu-slug', // MENU PAGE SLUG -- Pagina su cui visualizzare questa opzione  
        'page_2_section', // SECTION ID -- Nome della sezione a cui appartiene questo campo  
        array( // Array di argomenti da passare al callback  
            'Questa è la descrizione dell\'opzione 2', // DESCRIPTION -- Descrizione del campo.
        )  
    );
    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>Descrizione sezione qui</p>';  
} // function page_1_section_callback
function page_2_section_callback() {  
    echo '<p>Descrizione sezione qui</p>';  
} // function page_1_section_callback

/* ----------------------------------------------------------------------------- */
/* Callback dei Campi */
/* ----------------------------------------------------------------------------- */ 

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  
2
Commenti

Non sono molto familiare con l'API delle impostazioni, ma a prima vista sembra che tutti i tuoi campi appartengano a una singola sezione di impostazioni, che mostri in entrambe le schede.

Milo Milo
23 dic 2013 23:20:13

@Milo Ho fatto funzionare tutto, ma direi che l'API delle impostazioni di WordPress è molto confusa da comprendere. Inoltre, ha quasi zero documentazione ufficiale.

Omar Tariq Omar Tariq
24 dic 2013 10:18:49
Tutte le risposte alla domanda 3
2
16

Ecco come lo faccio io, attenzione, il post è piuttosto esteso.

/* Aggiungi Menu
-----------------------------------------------------------------*/
add_action('admin_menu', 'ch_essentials_admin');
function ch_essentials_admin() {
    /* Menu Base */
    add_menu_page(
    'Tema Essentials',
    'Tema Essentials',
    'manage_options',
    'ch-essentials-options',
    'ch_essentials_index');
}

Ora per i miei campi delle impostazioni, ho rimosso i campi extra, solo come esempio.

Questo è per 'Impostazioni Pagina Frontale' e 'Scheda Pagina Frontale'

add_action('admin_init', 'ch_essentials_options');
function ch_essentials_options() { 

/* Sezione Opzioni Pagina Frontale */
add_settings_section( 
    'ch_essentials_front_page',
    'Opzioni Pagina Frontale Essentials',
    'ch_essentials_front_page_callback',
    'ch_essentials_front_page_option'
);

add_settings_field(  
    'featured_post',                      
    'Post in Evidenza',               
    'ch_essentials_featured_post_callback',   
    'ch_essentials_front_page_option',                     
    'ch_essentials_front_page'
);

Questo è per le opzioni dell'header, che è la scheda 'opzioni header'

/* Sezione Opzioni Header */
add_settings_section( 
    'ch_essentials_header',
    'Opzioni Header Essentials',
    'ch_essentials_header_callback',
    'ch_essentials_header_option'
);

add_settings_field(  
    'header_type',                      
    'Tipo di Header',               
    'ch_essentials_textbox_callback',   
    'ch_essentials_header_option',                     
    'ch_essentials_header',
    array(
        'header_type' 
    ) 
);

Registra Impostazioni

register_setting('ch_essentials_front_page_option', 'ch_essentials_front_page_option');
register_setting('ch_essentials_header_option', 'ch_essentials_header_option');

Tutto questo è racchiuso in una singola funzione, poi eseguito con un admin_init

/* Opzioni
-----------------------------------------------------------------*/
add_action('admin_init', 'ch_essentials_options');
function ch_essentials_options() { 
    /* Codice mostrato sopra */
}

Callback:

/* Callback
-----------------------------------------------------------------*/
function ch_essentials_front_page_callback() { 
    echo '<p>Opzioni di Visualizzazione Pagina Frontale:</p>'; 
}
function ch_essentials_header_callback() { 
    echo '<p>Opzioni di Visualizzazione Header:</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($args) { 
     
    $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>';
     
     
}

Ora questa è la parte di visualizzazione, con le schede..

Se hai le tue sezioni e campi delle impostazioni fatti esattamente così, allora sarai in grado di gestire le schede perfettamente.

/* Pagina di Visualizzazione
-----------------------------------------------------------------*/
function ch_essentials_index() {
?>
    <div class="wrap">  
        <div id="icon-themes" class="icon32"></div>  
        <h2>Opzioni Tema Essentials</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' : ''; ?>">Opzioni Pagina Frontale</a>  
            <a href="?page=ch-essentials-options&tab=header_options" class="nav-tab <?php echo $active_tab == 'header_options' ? 'nav-tab-active' : ''; ?>">Opzioni Header</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
}

-----MODIFICA-----

e ho notato nel tuo post che hai 'elseif' e non 'else if' nella tua pagina di visualizzazione effettiva nella sezione delle schede

24 dic 2013 02:04:50
Commenti

È stato molto utile per me. Avevo difficoltà a convertire una singola pagina in una pagina a schede. Le uniche cose che ho aggiunto sono stati dei controlli empty() sull'array $option per ogni campo di input. Altrimenti, ricevevo un errore quando il valore non era impostato. Ho anche aggiunto un terzo argomento a register_settings(). Accetta un array opzionale per configurare cose come la sanificazione. Nel complesso, questo è stato un post molto valido con codice di qualità.

benjaminadk benjaminadk
10 mar 2020 06:43:49

perché la parola 'options' è al plurale nel template, ma singolare in add_settings_field?

Philip Philip
25 set 2023 02:35:45
0

Codificare in questo modo ha funzionato per me:

<?php 

/* ----------------------------------------------------------------------------- */
/* Aggiungi Pagina Menu */
/* ----------------------------------------------------------------------------- */ 

function add_my_menu() {
    add_menu_page (
        'Titolo Pagina', // titolo pagina 
        'Titolo Menu', // titolo menu
        'manage_options', // capacità
        'my-menu-slug',  // slug menu
        'my_menu_page',   // funzione che renderà l'output
        get_template_directory_uri() . '/assets/ico/theme-option-menu-icon.png'   // link all'icona che verrà visualizzata nella sidebar
        //$position,    // posizione dell'opzione menu
    );
}
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>Titolo Pagina Menu</h2>
            <div class="description">Questa è la descrizione della pagina.</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' : ''; ?>">Scheda Uno</a>  
                <a href="?page=my-menu-slug&tab=tab_two" class="nav-tab <?php echo $active_tab == 'tab_two' ? 'nav-tab-active' : ''; ?>">Scheda Due</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
}

/* ----------------------------------------------------------------------------- */
/* Sezioni e Campi delle Impostazioni */
/* ----------------------------------------------------------------------------- */ 

function sandbox_initialize_theme_options() {  
    add_settings_section(  
        'page_1_section',         // ID usato per identificare questa sezione e con cui registrare le opzioni  
        'Sezione 1',                  // Titolo da visualizzare nella pagina di amministrazione  
        'page_1_section_callback', // Callback usato per rendere la descrizione della sezione  
        'my-menu-slug-1'                           // Pagina su cui aggiungere questa sezione di opzioni  

    );

    add_settings_section(  
        'page_2_section',         // ID usato per identificare questa sezione e con cui registrare le opzioni  
        'Sezione 2',                  // Titolo da visualizzare nella pagina di amministrazione  
        'page_2_section_callback', // Callback usato per rendere la descrizione della sezione  
        'my-menu-slug-2'                           // Pagina su cui aggiungere questa sezione di opzioni  
    );

    /* ----------------------------------------------------------------------------- */
    /* Opzione 1 */
    /* ----------------------------------------------------------------------------- */ 

    add_settings_field (   
        'option_1',                      // ID usato per identificare il campo nel tema  
        'Opzione 1',                           // L'etichetta a sinistra dell'elemento dell'interfaccia opzione  
        'option_1_callback',   // Il nome della funzione responsabile del rendering dell'interfaccia opzione  
        'my-menu-slug-1',                          // La pagina su cui verrà visualizzata questa opzione  
        'page_1_section',         // Il nome della sezione a cui appartiene questo campo  
        array(                              // L'array di argomenti da passare al callback. In questo caso, solo una descrizione.  
            'Questa è la descrizione dell\'opzione 1',
        )  
    );  
    register_setting(  
        //~ 'my-menu-slug',  
        'setting-group-1',  
        'option_1'  
    );

    /* ----------------------------------------------------------------------------- */
    /* Opzione 2 */
    /* ----------------------------------------------------------------------------- */     

    add_settings_field (   
        'option_2',  // ID -- ID usato per identificare il campo nel tema  
        'Opzione 2', // LABEL -- L'etichetta a sinistra dell'elemento dell'interfaccia opzione  
        'option_2_callback', // CALLBACK FUNCTION -- Il nome della funzione responsabile del rendering dell'interfaccia opzione  
        'my-menu-slug-2', // MENU PAGE SLUG -- La pagina su cui verrà visualizzata questa opzione  
        'page_2_section', // SECTION ID -- Il nome della sezione a cui appartiene questo campo  
        array( // L'array di argomenti da passare al callback. In questo caso, solo una descrizione.  
            'Questa è la descrizione dell\'opzione 2', // DESCRIPTION -- La descrizione del campo.
        )  
    );
    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>Descrizione Sezione qui</p>';  
} // function page_1_section_callback
function page_2_section_callback() {  
    echo '<p>Descrizione Sezione qui</p>';  
} // function page_1_section_callback

/* ----------------------------------------------------------------------------- */
/* Callback dei Campi */
/* ----------------------------------------------------------------------------- */ 

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  

?>
11 nov 2016 14:35:30
0
<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' );

        }
    ?> 

Cambia my-menu-slug in my-menu-slug-1 e my-menu-slug-2

12 mar 2015 10:08:42