Cómo crear pestañas en la interfaz de usuario WordPress

(by: http://xyberneticos.com)

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:

JavaScript:

function ilc_admin_tabs( $current = ‘homepage’ ) {
    $tabs = array( ‘homepage’ => ‘Home Settings’, ‘general’ => ‘General’, ‘footer’ => ‘Footer’ );
    echo ‘<div id=”icon-themes” class=”icon32″><br></div>’;
    echo ‘<h2 class=”nav-tab-wrapper”>’;
    foreach( $tabs as $tab => $name ){
        $class = ( $tab == $current ) ? ‘ nav-tab-active’ : ;
        echo $name;

    }
    echo ‘</h2>’;
}

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.

JavaScript:

function ilc_settings_page() {
   global $pagenow;
   $settings = get_option( “ilc_theme_settings” );

//generic HTML and code goes here

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:

JavaScript:

<form method=“post” action=“<?php admin_url( ‘themes.php?page=theme-settings’ ); ?>”>
<?php
wp_nonce_field( “ilc-settings-page” );

if ( $pagenow == ‘themes.php’ && $_GET[‘page’] == ‘theme-settings’ ){

   if ( isset ( $_GET[‘tab’] ) ) $tab = $_GET[‘tab’];
   else $tab = ‘homepage’;

   echo ‘<table class=”form-table”>’;
   switch ( $tab ){
      case ‘general’ :
         ?>
         <tr>
            <th>Tags with CSS classes:</th>
            <td>
               <input id=“ilc_tag_class” name=“ilc_tag_class” type=“checkbox” <?php if ( $settings[“ilc_tag_class”] ) echo ‘checked=”checked”‘; ?> value=“true” />
               <label for=“ilc_tag_class”>Checking this will output each post tag with a specific CSS class based on its slug.</label>
            </td>
         </tr>
         <?php
      break;
      case ‘footer’ :
         ?>
         <tr>
            <th><label for=“ilc_ga”>Insert tracking code:</label></th>
            <td>
               Enter your Google Analytics tracking code:
               <textarea id=“ilc_ga” name=“ilc_ga” cols=“60” rows=“5”><?php echo esc_html( stripslashes( $settings[“ilc_ga”] ) ); ?></textarea><br />

            </td>
         </tr>
         <?php
      break;
      case ‘homepage’ :
         ?>
         <tr>
            <th><label for=“ilc_intro”>Introduction</label></th>
            <td>
               Enter the introductory text for the home page:
               <textarea id=“ilc_intro” name=“ilc_intro” cols=“60” rows=“5”><?php echo esc_html( stripslashes( $settings[“ilc_intro”] ) ); ?></textarea>
            </td>
         </tr>
         <?php
      break;
   }
   echo ‘</table>’;
}

?>
   <p class=“submit” style=“clear: both;”>
      <input type=“submit” name=“Submit”  class=“button-primary” value=“Update Settings” />
      <input type=“hidden” name=“ilc-settings-submit” value=“Y” />
   </p>
</form>

Guardando campos con pestañas

JavaScript:

function ilc_save_theme_settings() {
   global $pagenow;
   $settings = get_option( “ilc_theme_settings” );

   if ( $pagenow == ‘themes.php’ && $_GET[‘page’] == ‘theme-settings’ ){
      if ( isset ( $_GET[‘tab’] ) )
           $tab = $_GET[‘tab’];
       else
           $tab = ‘homepage’;

       switch ( $tab ){
           case ‘general’ :
         $settings[‘ilc_tag_class’] = $_POST[‘ilc_tag_class’];
      break;
           case ‘footer’ :
         $settings[‘ilc_ga’] = $_POST[‘ilc_ga’];
      break;
      case ‘homepage’ :
         $settings[‘ilc_intro’] = $_POST[‘ilc_intro’];
      break;
       }
   }
   //code to filter html goes here
   $updated = update_option( “ilc_theme_settings”, $settings );
}

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.

JavaScript:

function ilc_load_settings_page() {
  if ( $_POST[“ilc-settings-submit”] == ‘Y’ ) {
   check_admin_referer( “ilc-settings-page” );
   ilc_save_theme_settings();

   $url_parameters = isset($_GET[‘tab’])? ‘updated=true&tab=’.$_GET[‘tab’] : ‘updated=true’;
   wp_redirect(admin_url(‘themes.php?page=theme-settings&’.$url_parameters));
   exit;
  }
}

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

http://feedads.g.doubleclick.net/~ah/f/dv7hcve6jvi3vktejascsemtm8/300/250?ca=1&fh=280#http%3A%2F%2Fxyberneticos.com%2Findex.php%2F2011%2F10%2F25%2Fcomo-crear-pestanas-en-en-la-interfaz-de-usuario-wordpress%2F

original post: http://xyberneticos.com/index.php/2011/10/25/como-crear-pestanas-en-en-la-int…

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: