Diseño web | Creación web | Emenia

RSS

Blog

Blog sobre programación y diseño en la web

Barra Lateral diferente para cada página en Wordpress

Translate this page into English

Si tenemos una web creada con Wordpress con contenidos diferentes en páginas distintas, puede que necesitemos una barra lateral diferente para cada página de la web. Esto lo podemos conseguir:

a) Con un solo archivo sidebar.php con condicionales que detecten en qué página estamos para aplicar un contenido distinto a cada una.
b) Utilizando barras laterales diferentes repartidas en distintos archivos, uno por cada barra lateral (ejemplo: sidebar-servicios.php, sidebar-productos.php, etc..).
c) En el caso de que utilicemos widgets, veremos cómo usar widgets distintos en cada página.

Un sólo archivo sidebar.php para todas las barras laterales

Todo este código (u otro semejante en función de nuestras necesidades) estaría dentro del archivo sidebar.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="sidebar">
 
<?php if(is_home()){ ?> 
  // Código de la barra lateral para la página de Inicio
<?php } ?>	
 
<?php if(is_page('5')){ ?> 
  // Código de la barra lateral de la página 5
<?php } ?>		 
 
<?php if(is_category('4') || (is_single() && in_category('4')) ){ ?> 
  // Código de la barra lateral para una página de una categoría concreta
<?php } ?>	
 
<?php if(is_search()){ ?> 
  // Código de la barra lateral de la página de búsqueda
<?php } ?> 
 
</div>

En este ejemplo concreto estamos diciendo que si estamos en la página de inicio de la web, se ejecute un código determinado para la barra lateral, exclusivo para ella. Si estamos en la página 5 de la web se ejecutará otro código (para saber el número que corresponde a cada página creada hacemos click en Páginas. Al situar el ratón por encima del nombre de cada página veremos en la barra inferior del navegador el enlace al que va a ir si hacemos click, algo así como /wp-admin/page.php?action=edit&post=15. En este caso el número de la página, su ID, es 15. Cambiaríamos el 5 por un 15) . A continuación indicamos que si estamos en la categoría 4 o el artículo está dentro de la categoría 4 se ejecute otro código. Y por último, si estamos en la página de búsqueda se va a ejecutar otro código diferente. Por supuesto estos condicionales se pueden cambiar en función de nuestras necesidades. Podemos ver más condicionales en Wordpress.org.

Un archivo sidebar.php por cada barra lateral

La manera más sencilla de hacerlo es:
1- Buscar el archivo sidebar.php de tu tema y abrirlo con tu editor.
2- Hacer una copia del mismo grabándola con otro nombre, por ejemplo sidebar-productos.php (recuerda que siempre tiene que mantenerse en el nombre este formato sidebar-NOMBRE.php).
3- En este nuevo archivo introduce todo el código específico de esta nueva barra lateral.
4- Ahora abre la página donde quieres que se muestre esta barra lateral (siguiendo con nuestro ejemplo puede ser una página que se llame productos.php). Normalmente tendrás en esta página una llamada a la barra lateral como esta:

1
<?php get_sidebar(); ?>

5- Cambia esta línea por esta otra (en vez de productos puedes poner el nombre que tú le hayas dado al archivo sidebar-NOMBRE.php):

1
<?php get_sidebar('productos'); ?>

Recordad que entre comillas va el nombre que hemos puesto a nuestra barra lateral. Si es sidebar-NOMBRE.php habría que poner NOMBRE.

Ahora, una vez grabados los cambios, al abrir la página de Productos (o la que hayamos usado para hacer estos cambios) nos saldrá la nueva barra lateral que hemos creado específicamente para esa página.

Widgets diferentes para páginas diferentes

Si nuestra barra lateral se crea a base de widgets y queremos que en una página salga un widget y en otra salga otro widget diferente lo primero que tenemos que crear son distintas barras laterales para la página de widgets del administrador. Si en el menú de la izquierda hacemos click en Apariencia y luego en Widgets veremos algo así:

widgets_1

Para crear más barras laterales tenemos que abrir el archivo functions.php de nuestro tema. Si no existiera habría que crearlo. Normalmente en el archivo functions.php encontramos unas líneas como estas:

1
2
3
4
5
6
7
8
9
10
<?php
if ( function_exists('register_sidebar') ) {
   register_sidebar(array(
       'before_widget' => '<li id="%1$s" class="widget %2$s">',
       'after_widget' => '</li>',
       'before_title' => '<h2 class="widgettitle">',
       'after_title' => '</h2>',
   ));
}
?>

Estas líneas crean la barra lateral que vemos en la imagen anterior (el cuadro situado más a la derecha con el nombre Barra Lateral 1) y además dicen qué código HTML incluir antes y después del widget. Los widgets se añaden arrastrando el widget que deseemos al cuadro de la barra lateral (el que se llama en la imagen Barra Lateral 1).

Pero como queremos varias barras laterales diferentes donde arrastrar widgets diferentes cambiaremos el código anterior por uno de este tipo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
if ( function_exists('register_sidebar') ) register_sidebar(array(
'name' => 'Barra Lateral Inicio',
'id' => 'solo_inicio',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>', ));
 
if ( function_exists('register_sidebar') ) register_sidebar(array(
'name' => 'Barra Lateral Producto',
'id' => 'solo_producto',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>', ));
 
if ( function_exists('register_sidebar') ) {
	register_sidebar(array(
                'name' => 'Tercera Barra Lateral',
                'id' => 'tercera_barra',
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h2 class="widgettitle">',
		'after_title' => '</h2>',
	));
}

Hemos creado tres barras laterales (tres cuadros distintos donde arrastrar widgets). Ahora el lado derecho de la página de Widgets, en el administrador de la web, aparecerá esto:

widgets

Pero vamos a explicar en detalle el código nuevo. Hemos repetido tres veces el código inicial, para crear tres barras laterales. Sólo hemos cambiado para cada una dos cosas: Su nombre (el que aparecerá en la cabecera de cada cuadro) que se especifica en ‘name’ => ‘Tercera Barra Lateral’ y el ID de cada uno que se especifica en id’ => ‘tercera_barra’. Un poco más adelante veremos dónde se utiliza este ID único que identifica cada barra lateral con sus widgets propios.

Ahora vamos a situar cada barra lateral dinámica en su página correspondiente. Antes hemos visto cómo crear distintos archivos sidebar (ejemplos: sidebar-producto.php, sidebar-blog.php, etc…). Lo más probable es que tengamos unas líneas como estas en el archivo sidebar.php y en cualquiera que hayamos creado a partir de una copia de este:

1
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

Este condicional lo que consigue es que si hay widgets se pongan los widgets en la barra lateral, y si no existen se ejecuten las líneas de código que siguen al condicional. Vamos a cambiar este condicional para la página de Producto (siguiendo con el ejemplo anterior) o para la página que deseemos. Para ello en sidebar-producto.php cambiamos ese condicional por:

1
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('solo_producto') ) : ?>

Como vemos hemos añadido el ID de la barra lateral que antes hemos llamado Barra Lateral Producto al añadirla en functions.php.

Ahora en sidebar-producto.php estarán sólo los widgets que hayamos arrastrado a esta barra lateral.

Otras lecturas recomendadas

BlogCraving, How To: Different Homepage and Single Post Sidebars
Wordpress.org, Customizing Your Sidebar
Things by Mike, Wordpress – Using a different sidebar for pages and single posts.

Comparte este artículo en tu red social:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • BarraPunto
  • email
  • LinkedIn
  • Live
  • Technorati
  • DZone
  • Meneame
  • MySpace
  • PDF
  • Print
  • Reddit
  • StumbleUpon
  • Twitter
  • Yahoo! Bookmarks
  • Bitacoras.com
  • Blogosphere News
  • Add to favorites

28 Comentarios a “Barra Lateral diferente para cada página en Wordpress”:

  1. José Ramón LeónNo Gravatar dice:

    A veces no valoramos la importancia de los post que publicamos…, tu con este desde el que te escribo, me has quitado un mini marrón de aúpa!, de encima con copiar-pegar…

    Muchas gracias,

    J.R. León

  2. Juan Diaz-BustamanteNo Gravatar dice:

    Gracias José Ramón, me alegro que te haya sido útil!

  3. kbronciyoNo Gravatar dice:

    en el tema de un sidebar.php para todos, se podra utilizar ese mismo llamado pero con el header.php ???

    necesito mostrar en una categoria un banner en el header diferente al que esta en portada.

    se puede?? :D

  4. Juan Diaz-BustamanteNo Gravatar dice:

    Hola kbronciyo,

    Si, claro. Puedes poner condicionales donde quieras, incluso dentro del header para por ejemplo cargar algún código de javascript sólo para alguna página concreta. En el caso que me indicas de una categoría podrías poner:

    1
    2
    3
    
    <?php if(is_category('1') || in_category(1)){ ?>
    // Aquí iría el banner
    <?php } ?>

    Prueba con eso. Ten en cuenta que en vez del “1″ que está entre paréntesis tendrás que poner el ID de tu categoría, que lo ves en Entradas/Categorías. Al poner el ratón sobre la categoría te sale abajo en el explorador el URL con el ID

  5. kbronciyoNo Gravatar dice:

    Muchas, muchas gracias.

    Me ayudaste bastante Juan Diaz-Bustamante salio justo como queria, ahora intentare hacerlo pero que sea diferente dependiendo de la categoria y publicacion que se encuentre. :)

    Gracias por la ayuda.

  6. jordi villanuevaNo Gravatar dice:

    hola compañero, me interesa muchisimo tu publicación y la estoy siguiendo al pie de la letra, pero lo que no consigo localizar es el php de cada una de mis paginas [ blog, fotografia, slot, atletismo...]

    he modificado el sidebar.php, he hecho el sidebar-blog.php, sidebar-fotografia.php, he modificado el functions.php, pero cuando quiero llamar cada sidebar a cada pagina, no localizo el php de cada pagina, es decir blog.php ( en tu ejemplo en el punto 4 productos.php)

    he entindo mal algo?

  7. Juan Diaz-BustamanteNo Gravatar dice:

    Hola Jordi,

    Gracias por tu comentario. Debería funcionarte sin problemas. Sólo tienes que hacer un nuevo archivo sidebar, por ejemplo sidebar-nuevo.php y para llamarlo sólo tienes que escribir:

    1
    
    get_sidebar('nuevo');

    en vez de:

    1
    
    get_sidebar();
  8. fabianNo Gravatar dice:

    este articulo es algo valiosisimo para mi se te agradece un monton socio!

  9. ReguloNo Gravatar dice:

    Buenas necesito un apoyo para resolver este acertijo, ya que ya se me cierran los ojos del sueño y tengo que irme a acostar sin conseguir el objetivo, pero teniendo fe de que por esta via pueda resolverlo. seguitus sugerencias, calro esta no soy un virtuoso del htlm pero hice lo siguiente. en el archivo functions.php tengo lo siguiente:
    ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ));
    if ( function_exists(‘register_sidebar’) ) register_sidebar(array(
    ‘name’ => ‘Home’,
    ‘id’ => ‘205′,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”, ));

    }

    Tengo un archivo sideba.php:

    y otro sidebar-Home.php:

    Puedo visualizar en las Barras de los Widgets lo siguiente:

    Barra 1: donde tengo un widget de texto con el titulo 123 y
    Barra Home: igual in widget de texto pero con el titulo Recibe tu boletin.

    Sin embargo tanto en la Pagina Home la cual el ID es el 205 como en las demas pagina me aparece en la barra lateral lo concerniente a la Barra 1: lo que contiene el widget 123.

    espero me puedan apoyar a decifrar porque no puedo tener la barras diferenciadas.

    saludos

  10. Juan Diaz-BustamanteNo Gravatar dice:

    Gracias Fabián!

    Hola Regulo,

    Creo que lo que has escrito ha salido algo cortado, pero espero haber comprendido lo que te sucede. Ten en cuenta que al crear un widget en functions.php tu pones como se llama este widget. Vamos a poner un ejemplo. Supongamos que tengo en el footer de la página una dirección y un número de teléfono que quiero que sean editables. En functions.php pondría:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    
    if ( function_exists('register_sidebar') ) {
       register_sidebar(array('name' => 'direccion',
    		'before_widget' => '',
    		'after_widget' => '',
    		'before_title' => '',
    		'after_title' => '',
    		));
       register_sidebar(array('name' => 'telefono',
    		'before_widget' => '',
    		'after_widget' => '',
    		'before_title' => '',
    		'after_title' => '',
    		));	
    }

    Entonces, dentro del panel de control en Widgets me saldrán dos cajetines para meter widgets, uno que se llama “dirección” y otro que se llama “teléfono”. Para que ambos tengan texto arrastro a cada uno de estos cajetines un widget de texto y escribo. ¿Cómo lo recupero ya dentro del código de una página, en este caso del footer? Dentro del archivo footer.php busco dónde quiero que aparezca cada texto y escribo:

    1
    2
    
    <?php if(function_exists('dynamic_sidebar') && dynamic_sidebar(direccion)) : ?>
    <?php endif; ?>

    para que salga el contenido del widget “direccion”, y:

    1
    2
    
    <?php if(function_exists('dynamic_sidebar') && dynamic_sidebar(telefono)) : ?>
    <?php endif; ?>

    donde quieras que salga el widget “telefono”.

    No sé si era esto lo que preguntabas. Si no fuera así no dudes en preguntarme!

  11. ReguloNo Gravatar dice:

    Juan gracias por responder pero tengo el mandado a medio camino, te explico.en el archivo functions.php cree lo siguiente:

    if ( function_exists(‘register_sidebar’) ) {
    register_sidebar(array(‘name’ => ‘1′,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ));
    register_sidebar(array(‘name’ => ‘2′,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ));
    }

    lo que me genera la “Barra Lateral 1″ y la “Barra Lateral 2″. ahora lo que necesito es que por ejemplo si tengo 7 paginas, la pagina principal utilise la “Barra Lateral 1″ y para las demas paginas “Barra Lateral 2″, esto si no lo he logrado, por que en el archivo sider.php coloque lo siguiente:

    i lo que hace es incluir ambas barras laterales en todas las paginas.

    saludos y gracias por el apoyo

  12. Juan Diaz-BustamanteNo Gravatar dice:

    Hola Prueba a quitar los símbolos de inicio y fin de php, como has hecho en lo que has puesto de functions.php

  13. HugoNo Gravatar dice:

    Tengo una consulta, en mi “blog” tengo demasiadas sub-categorias, y el problemas es q tengo un menu desplegable en cada categoria y se me esta llendo d las manos ya que el menu cada vez q se abre esta quedando mas grande q el sitio en si, lo q quiero hacer es dejar las categorías (sin q se despleguen las subcategorias) y al entrar a las mismas se muestre en el sidebar las subcategorias d la categoria ingresada y ninguna otra, no se si se entiende… ojala m puedas ayudar, saludos y felicitaciones por el blog esta excelente!

  14. Juan Diaz-BustamanteNo Gravatar dice:

    Hola Hugo,

    Para poner una lista de subcategorias de una categoria determinada prueba con esto:
    http://yoast.com/showing-subcategories-on-wordpress-category-pages/

    Espero que te sirva. Como alternativa a las categorías puedes crear también tus propias taxonomías, como verás en el último artículo del blog.

  15. RolinNo Gravatar dice:

    primero agradecer mucho tu post.

    tengo el mismo problema que Jordi, no encuentro los archivos php de las paginas que he creado, por ejemplo (productos.php, que es donde se supone tengo que hacer el llamado a mi sidebar. La pregunta concreta es: ¿donde estan los archivos de pagina que dices en el punto 4 de tu articulo?.

    Muchas Gracias por todo

  16. Juan Diaz-BustamanteNo Gravatar dice:

    Hola Rolin,

    Gracias por tus palabras.

    Los tendrías que haber grabado en la carpeta donde esté tu tema, es decir en wp-content/themes/nombre-de-tu-tema

  17. RolinNo Gravatar dice:

    hola Juan
    Gracias por responderme, cuando dices que los tendría que haber “grabado” te refieres a crear a mano un archivo por ejemplo productos.php en la carpeta que me dices?. Porque desde luego si creo una pagina llamada “productos” desde mi Panel wp-admin el archivo “productos.php” no se crea en wp-content/themes/mi-tema, ni en ningún otro lado.
    Gracias

    Un Saludo

  18. Juan Diaz-BustamanteNo Gravatar dice:

    Hola Rolin,

    No, el archivo productos.php lo tienes que crear tu con un editor (Netbeans, Dreamweaver, PHPDesigner, etc.. el que utilices) no desde wp-admin.

  19. el CheNo Gravatar dice:

    Juan primero que nada felicitaciones por el post (si es que funciona jej)

    El tema es que lo hice una y otra vez durante horas pero no salio, creo que no estoy entendiendo bien el tutorial.

    Si no es molestia podría pedirte los pasos me los escribas?
    Para ambos casos.

  20. maralaNo Gravatar dice:

    Primero, muchas gracias por este post.
    Yo tengo un pequeño problema: tengo 9 páginas con sus 9 barras correspondientes. Todas las coloqué correctamente pero por alguna extraña razón en las 2 últimas páginas (8 y 9), se repite la barra de la página 7.
    Por más que reviso el código no encuentro el fallo. Alguna sugerencia? Muchas gracias de nuevo.

  21. Juan Diaz-BustamanteNo Gravatar dice:

    Hola marala,

    Sin poder ver el código no puedo saber qué puede estar pasando.

  22. Juan Diaz-BustamanteNo Gravatar dice:

    Gracias, lamentablemente llevo unos meses a tope y no le estoy podiendo dedicar mucho tiempo al blog… En cuanto pueda miro lo que me indicas y lo corrijo.

  23. maralaNo Gravatar dice:

    Hola Juan:
    aqui te paso el codigo que es un poco largo, no se si necesitaras todo o me quede corta, dime no obstante lo que necesites.

    functions.php: (barras de las páginas 7, 8 y 9)

    if ( function_exists(‘register_sidebar’) ) {
    register_sidebar(array(
    ‘name’ => ‘Como Llegar Barra Lateral’,
    ‘id’ => ‘comollegar_barra’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ));
    }

    if ( function_exists(‘register_sidebar’) ) {
    register_sidebar(array(
    ‘name’ => ‘Contacto Barra Lateral’,
    ‘id’ => ‘contacto_barra’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ));
    }

    if ( function_exists(‘register_sidebar’) ) {
    register_sidebar(array(
    ‘name’ => ‘Galeria Barra Lateral’,
    ‘id’ => ‘galeria_barra’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ));
    }

    page.php:

    Páginas 8 y 9:

    sidebar_contacto.php:

    sidebar_galeria.php:

    Muchisimas gracias

  24. maralaNo Gravatar dice:

    lo que falta:

    page.php:
    if (is_page(alojamiento)) {include (’sidebar_alojamiento.php’); }
    else if (is_page(spa)) {include (’sidebar_spa.php’); }
    else if (is_page(entorno)) {include (’sidebar_entorno.php’); }
    else if (is_page(promociones)) {include (’sidebar_promociones.php’); }
    else if (is_page(consejos)) {include (’sidebar_consejos.php’); }
    else if (is_page(como-llegar)) {include (’sidebar_comollegar.php’); }
    else if (is_page(contacto)) {include (’sidebar_contacto.php’); }
    else if (is_page(galeria)) {include (’sidebar_galeria.php’); }
    else {include (’sidebar.php’); }

    pagina8:
    if ( !function_exists(‘dynamic_sidebar’)
    || !dynamic_sidebar(‘galeria_barra’) ) :

    pagina 9:
    if ( !function_exists(‘dynamic_sidebar’)
    || !dynamic_sidebar(‘contacto_barra’) ) :

  25. Juan Diaz-BustamanteNo Gravatar dice:

    Gracias Marala,

    Por lo que me indicas para las páginas 8 y 9 te carga el widget de la página 7 no? Has revisado bien la página de widgets para ver que has puesto en la casilla de cada una?

  26. maralaNo Gravatar dice:

    Hola Juan,
    lo revise todo y nada.
    En todos las barras tengo un widget de texto con 2 imágenes e incluso cambié en las páginas 8 y 9 por un widget de imágen y sigue cargandome la barra de la 7. Si quito los widgets en la 8 y la 9 tambien me carga la barra de la 7.
    Es una cosa un poco extraña porque si funcionó todo bien para las barras 1 a 7 no entiendo que puede pasar, además mis conociemientos son muy limitados y no tengo demasiados recursos para buscar una solución mas alla del error en el código.
    Si se te ocurre algo perfecto!, si no muchas gracias de todas formas.

  27. MartinNo Gravatar dice:

    Maestros, buenisimo tu post, lo unico me salio la primera opcion de un sidebar para todos.. ahora tengo otro problema q seguro es una boludes…

    como seria el codigo para poner en distintas paginas categorias de links diferentes.. o sea q en una pagina me aparescan lis link de la categoria rock por ejemplo y en otra de pop, por ejemplo..

    ya prove con varios codigos

    este me muestra todo

    y teoricamente este me mostraria por separado sino entendi mal

    y no me lo toma… gracias de ante mano!!

  28. [...] tienes a tu disposición numeros tutos en Internet. Juan Díaz Bustamante aporta a la comunidad un post bastante completo con explicaciones detalladas y ejemplos de códigos; Mario contribuye con otra [...]

Escribir un comentario

XHTML: Puedes usar estos códigos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">