El uso de pestañas en la interfaz de usuario de wordpress puede ayudarte a organizar mejor el contenido, por lo que es natural que los temas para WordPress que tiene un montón de opciones se benefician de las pestañas en su página de configuración. En este tutorial desde smashingmagazine, aprenderás cómo crear una página de configuración de pestañas, y podrás descargar un theme WordPress que implementa el código para estudiarlo a fondo.

La creación de aquí

El primer fragmento de código que va a inspeccionar es el código que produce en las fichas:

  1. function ilc_admin_tabs( $current = 'homepage' ) {
  2.     $tabs = array( 'homepage' => 'Home Settings', 'general' => 'General', 'footer' => 'Footer' );
  3.     echo '<div id="icon-themes" class="icon32"><br></div>';
  4.     echo '<h2 class="nav-tab-wrapper">';
  5.     foreach( $tabs as $tab => $name ){
  6.         $class = ( $tab == $current ) ? ' nav-tab-active' : '';
  7.         echo "<a class='nav-tab$class' href='?page=theme-settings&tab=$tab'>$name</a>";
  8.  
  9.     }
  10.     echo '</h2>';
  11. }

Esta función se llamará más tarde en el contenido de la página de configuración. En primer lugar, definir una matriz que contiene todas nuestras fichas. La primera pestaña que aparece en primer lugar por defecto, es homepage , donde podemos configurar algunas opciones para la apariencia de la página principal. Entonces tenemos general , que podría ser una página que contiene las opciones utilizadas en todo el sitio web, y, por último, footer , para incluir un código de seguimiento en el pie de página.

Mostrar el contenido con pestañas

El contenido de la página de configuración se muestra en la función callback para add_theme_page (que es una abstracción de add_submenu_page, establecido en themes.php), que en nuestro tema será nombrado ilc_settings_page. Aquí es donde se va a llamar a la función.

  1. function ilc_settings_page() {
  2.    global $pagenow;
  3.    $settings = get_option( "ilc_theme_settings" );
  4.  
  5. //generic HTML and code goes here
  6.  
  7. if ( isset ( $_GET['tab'] ) ) ilc_admin_tabs($_GET['tab']); else ilc_admin_tabs('homepage');

Siguiendo la misma función, ahora tenemos que mostrar el conjunto a la derecha de los campos. Dependiendo del valor de $tab , nos muestra los campos de la ficha de configuración de la página principal o de una de las otras fichas:

  1. <form method="post" action="<?php admin_url( 'themes.php?page=theme-settings' ); ?>">
  2. <?php
  3. wp_nonce_field( "ilc-settings-page" );
  4.  
  5. if ( $pagenow == 'themes.php' && $_GET['page'] == 'theme-settings' ){
  6.  
  7.    if ( isset ( $_GET['tab'] ) ) $tab = $_GET['tab'];
  8.    else $tab = 'homepage';
  9.  
  10.    echo '<table class="form-table">';
  11.    switch ( $tab ){
  12.       case 'general' :
  13.          ?>
  14.          <tr>
  15.             <th>Tags with CSS classes:</th>
  16.             <td>
  17.                <input id="ilc_tag_class" name="ilc_tag_class" type="checkbox" <?php if ( $settings["ilc_tag_class"] ) echo 'checked="checked"'; ?> value="true" />
  18.                <label for="ilc_tag_class">Checking this will output each post tag with a specific CSS class based on its slug.</label>
  19.             </td>
  20.          </tr>
  21.          <?php
  22.       break;
  23.       case 'footer' :
  24.          ?>
  25.          <tr>
  26.             <th><label for="ilc_ga">Insert tracking code:</label></th>
  27.             <td>
  28.                Enter your Google Analytics tracking code:
  29.                <textarea id="ilc_ga" name="ilc_ga" cols="60" rows="5"><?php echo esc_html( stripslashes( $settings["ilc_ga"] ) ); ?></textarea><br />
  30.  
  31.             </td>
  32.          </tr>
  33.          <?php
  34.       break;
  35.       case 'homepage' :
  36.          ?>
  37.          <tr>
  38.             <th><label for="ilc_intro">Introduction</label></th>
  39.             <td>
  40.                Enter the introductory text for the home page:
  41.                <textarea id="ilc_intro" name="ilc_intro" cols="60" rows="5" ><?php echo esc_html( stripslashes( $settings["ilc_intro"] ) ); ?></textarea>
  42.             </td>
  43.          </tr>
  44.          <?php
  45.       break;
  46.    }
  47.    echo '</table>';
  48. }
  49.  
  50. ?>
  51.    <p class="submit" style="clear: both;">
  52.       <input type="submit" name="Submit"  class="button-primary" value="Update Settings" />
  53.       <input type="hidden" name="ilc-settings-submit" value="Y" />
  54.    </p>
  55. </form>

Guardando campos con pestañas

  1. function ilc_save_theme_settings() {
  2.    global $pagenow;
  3.    $settings = get_option( "ilc_theme_settings" );
  4.  
  5.    if ( $pagenow == 'themes.php' && $_GET['page'] == 'theme-settings' ){
  6.       if ( isset ( $_GET['tab'] ) )
  7.            $tab = $_GET['tab'];
  8.        else
  9.            $tab = 'homepage';
  10.  
  11.        switch ( $tab ){
  12.            case 'general' :
  13.          $settings['ilc_tag_class'] = $_POST['ilc_tag_class'];
  14.       break;
  15.            case 'footer' :
  16.          $settings['ilc_ga'] = $_POST['ilc_ga'];
  17.       break;
  18.       case 'homepage' :
  19.          $settings['ilc_intro'] = $_POST['ilc_intro'];
  20.       break;
  21.        }
  22.    }
  23.    //code to filter html goes here
  24.    $updated = update_option( "ilc_theme_settings", $settings );
  25. }

Redirigir al usuario a la pestaña derecha

Ahora que el contenido se guarda, es necesario que WordPress pueda redirigir al usuario a la ficha correspondiente en la página de configuración.

  1. function ilc_load_settings_page() {
  2.   if ( $_POST["ilc-settings-submit"] == 'Y' ) {
  3.    check_admin_referer( "ilc-settings-page" );
  4.    ilc_save_theme_settings();
  5.  
  6.    $url_parameters = isset($_GET['tab'])? 'updated=true&tab='.$_GET['tab'] : 'updated=true';
  7.    wp_redirect(admin_url('themes.php?page=theme-settings&'.$url_parameters));
  8.    exit;
  9.   }
  10. }

Descargar el theme demo

Sólo recuerde que este es un enfoque. Otro enfoque sería añadir varios cuadros de meta plegable, como se ve en la página para escribir mensajes, y el colapso de forma automática las casillas que no se utilizan con frecuencia. Sin embargo, las pestañas permiten separar mejor cada una de las opciones.

Finalmente, aquí está el tema, de modo que podrán estudiarlo mas a fondo, viendo cómo funciona

* Descargar Theme con configuración con pestañas

El tema también lleva a cabo la función por la que se emite cada etiqueta con una única clase de CSS.

Via How To Create Tabs On WordPress Settings Pages by smashingmagazine