| Suscribir mediante RSS

Cómo crear páginas con distinto sidebar

17 septiembre 2011 Diseño web

Un sidebar en WordPress es la zona donde se sitúan los widgets, normalmente en una columna lateral. WordPress permite definir diferentes sidebars que podemos ubicar en cualquiera de los archivos de nuestro theme según nos interese.

Lo habitual es utilizar el mismo sidebar en todos los archivos con lo que la información que se muestra al visitante en la zona de widgets es la misma independientemente de la página que esté visitando. Esto no tiene por qué ser así, es posible hacer uso de un sidebar concreto según se trate de páginas, categorías, archivos, etc.

Además podemos crear otras zonas para widgets diferentes a la barra o columna lateral, como el header o el footer. Esto facilita ordenar y mostrar diferente información al ampliar las zonas disponibles.

Mediante la función get_sidebar() le decimos a WordPress que cargue el archivo sidebar.php, que debe contener el código necesario para mostrar los widgets que se deseen en el sidebar. Esta función se encuentra en los archivos del theme (la mayoría) en los que interesa disponer de widgets. De la misma forma get_sidebar(‘otros’) le dirá a WordPress que cargue un archivo llamado
sidebar-otros.php que contendrá un código diferente al sidebar por defecto. Sólo tenemos que sustituir un archivo por otro para cargar el sidebar que nos interese.

Veamos un caso más completo con el uso de widgets. Para hacer esto procederemos de la siguiente manera:

1 – Declaramos en el archivo functions.php del theme los sidebars que contendrán los widgets. En el ejemplo, he creado 4 zonas para widgets llamadas Principal, Widgets Paginas, Widgets Categorias y Widgets Single. Puedes añadir las que desees y llamarlas como prefieras, en realidad con 3 zonas puede ser más que suficiente.

2 – Creamos tantos archivos sidebar como zonas independientes querramos.

Lo mejor es copiar el archivo sidebar.php y guardarlo con los nombres que necesitemos. Después hacemos las modificaciones a la hora de llamar a los distintos sidebars. En este ejemplo, sidebar-principal.php podría tener el siguiente aspecto:

<?php if ( ! dynamic_sidebar( 'mi-widget-principal' ) ) : ?>
<?php endif; ?>

Para sidebar-categorias.php :

<?php if ( ! dynamic_sidebar( 'mi-widget-categorias' ) ) : ?>
<?php endif; ?>

Para sidebar-paginas.php :

<?php if ( ! dynamic_sidebar( 'mi-widget-paginas' ) ) : ?>
<?php endif; ?>

Para sidebar-single.php :

<?php if ( ! dynamic_sidebar( 'mi-widget-single' ) ) : ?>
<?php endif; ?>

3 – Ubicamos en cada archivo (index.php, category.php, page.php, single.php, etc) el sidebar que deseemos (Ver Jerarquía de archivos). Para el archivo category.php en la llamada al sidebar modificamos donde pone

<?php get_sidebar(); ?>
por
<?php get_sidebar('categorias'); ?>

Esto hará que las categorías sólo usen el archivo sidebar-categorias.php que es el encargado de mostrar el sidebar mi-widget-categorias, y así con los restantes archivos donde quieras que figure cada sidebar:
<?php get_sidebar('principal'); ?>
<?php get_sidebar('paginas'); ?>
<?php get_sidebar('single'); ?>

También puedes tener varios sidebars en el mismo archivo sidebar.

¿Y si quisiera diferentes sidebars para diferentes páginas? Fácil, crea una plantilla para la página y le pones el o los sidebars que prefieras, como si quieres añadirlos todos. Exactamente igual que harías con los archivos index.php, category.php, single.php en el ejemplo anterior.

Como puedes comprobar dispones de múltiples combinaciones.

Para crear la plantilla de la página puedes copiar el archivo page.php sin olvidar poner al principio:

<?php
/*
* Template Name: Tu plantilla
*
*/
?>

Después la seleccionas desde el menú como plantilla para la página.

A continuación el código del archivo functions.php para el ejemplo anterior:

<?php

function mi_widgets_init() {

  // Sidebar principal.
  register_sidebar( array(
  'name' => __( 'Principal'),
  'id' => 'mi-widget-principal',
  'description' => __( 'Sidebar principal para widgets'),
  'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</li>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
  ) );

  // Sidebar para categorias
  register_sidebar( array(
  'name' => __( 'Widgets Categorias'),
  'id' => 'mi-widget-categorias',
  'description' => __( 'Sidebar para widgets en categorias'),
  'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</li>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
  ) );

  // Sidebar para paginas
  register_sidebar( array(
  'name' => __( 'Widgets Paginas'),
  'id' => 'mi-widget-paginas',
  'description' => __( 'Sidebar para widgets en paginas'),
  'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</li>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
  ) );

  // Sidebar para single
  register_sidebar( array(
  'name' => __( 'Widgets Single'),
  'id' => 'mi-widget-single',
  'description' => __( 'Sidebar para widgets en single'),
  'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</li>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
  ) );
}

/* Registramos los sidebars ejecutando 
mi_widgets_init() con el hook widgets_init. */
add_action( 'widgets_init', 'mi_widgets_init' );
?>

Los valores de ‘before_widget’, ‘after_widget’, ‘before_title’ y ‘after_title’ los he tomado del theme Twenty Ten puedes poner los que correspondan a tu theme o los valores que prefieras.

Otros artículos de Diseño web

Colección de iconos
Consejos Google al cambiar de dominio
Qué es RSS conceptos básicos
Cómo mantener WordPress seguro
WordPress en español

6 Respuestas a “Cómo crear páginas con distinto sidebar”

  1. Laura dice:

    Gracias!!!!! No sólo es lo que buscaba, sino que además esta explicado ^_^


  2. ruben dice:

    hola,
    tengo un problema, al cargar la plantilla creada en la pagina,me muestra la pagina en blanco, el archivo page.php es copiado tal cual, solo añado el nombre del tema, y no modifico el nombre del sidebar..para descartar que el error este en el archivo sidebar2.php lo que sucede es que me muestra pa pagina en blanco…sin nada. que puede ser?


  3. admin dice:

    Supongo que cuando dices en blanco te refieres sin header ni footer. Revisa con calma los códigos que has puesto y si te falta algún caracter.

    El nombre de la plantilla es lo que escribes en Template Name, ejemplo:
    <?php
    /*
    * Template Name: Ancho completo
    *
    */
    ?>

    En la lista de plantillas para la página aparecerá “Ancho completo”. No debe llamarse igual que el theme.

    Saludos


  4. ruben dice:

    Hola,
    Gracias por tu ayuda,
    a lo que refiero a una pagina en blanco es como si le pegas un folio a la pantalla, ni errores, ni movimientos de codigo ni nada,el nombre lo pongo correctamente,y cuando voy a plantillas en la pagina lo puedo seleccionar sin problemas.
    La verdad es que estoy desesperado no se donde radica mi error.


  5. ruben dice:

    la copia del archivo page.php es copia en el servidor sin modificación solo y exclusivamente el nombre del tema.


  6. ruben dice:

    lo aregle..gracias por tu molestia, por si alguien le sirve..mi error metía el nombre después de get_header().
    saludosss