WordPress Settings API, Implementazione di Schede su Pagine di Menu Personalizzate
Ho seguito la serie di tutorial sulle WordPress Settings API di questo ragazzo:
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.
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

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

È 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à.

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
?>

<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
