Crear dos o más sidebars en WordPress

This post was published 10 years ago. It may be exremely outdated.

Ahora mismo la mayoría de los themes de WordPress ya tienen una sidebar dinámica (con la que puedes añadir los elementos que desees que se vean al entrar a tu blog desde el panel de administración).

Sin embargo en algunas ocasiones tener una única sidebar no es suficiente. Por ejemplo, tal vez queremos tener una sidebar para los artículos, otra para las páginas, otra para las búsquedas y los archivos, otra para el index, etc.

En este tutorial os explicaré cómo añadir no sólo una sidebar, sino todas las que queráis, además de explicar un poco cómo darle formato a la sidebar.

El primer paso es elegir el theme en el que vamos a trabajar. Yo usaré el theme classic, que viene por defecto en WordPress y que no es muy difícil de modificar.

Nota: Todos los archivos a modificar se encuentran en la carpeta classic, dentro de themes (en wp-content).

La idea es la siguiente: Queremos una sidebars para el index, una para las páginas y los artículos individuales, otra para las búsquedas y los archivos y una última compartida entre artículos, páginas, búsquedas y archivos.

Como las sidebars siempre ocuparán la misma posición únicamente editaremos el archivo sidebar.php y functions.php.

El primer archivo contiene el código de la sidebar, mientras que el segundo el código que las define y permite que muestren los widgets.

Sidebar-index

Abramos sidebar.php. Vemos 43 líneas en el archivo, 38 de ellas con código y 5 en blanco.

Entre las líneas 6 y 7 encontraremos el siguiente código:


<?php /* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

Este código es el que le dice a WordPress que aquí es donde debe mostrar la sidebar X. En este caso al sólo haber una sidebar no llama a ninguna en concreto.

Unas líneas más abajo (en la línea 37) vemos el siguiente código:

<?php endif; ?>

Este código le avisa a WordPress de que hasta aquí llega la sidebar dinámica.

Veréis que entre ambas líneas hay más código, este código se ejecutará en caso de que no tengamos ningún widget activado, mostrando una lista de páginas, categorías, un cuadro de búsqueda, el archivo y links de meta.

Comenzaremos eliminando estos widgets, ya que si no ponemos widgets en el panel de administración es porque no queremos que se muestre nada.

Borramos (o comentamos) todo el código desde la línea 8 a la 36 (ambas incluídas). Con esto al no tener widgets activados en la sidebar no se mostrará nada.

El siguiente paso será definir las sidebars que queremos.

Abrimos el archivo functions.php.

Veremos el siguiente código:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '',
'after_title' => '',
));
?>

La primera línea indica que viene código PHP.
La segunda comprueba que existe la función de sidebars dinámicas.
La tercera define una nueva sidebar
Las líneas cuarta, quinta, sexta y séptima indican variables para la sidebar (explicadas más adelante).
La octava indica el final de la función.
La décima (la novena está en blanco) el final del código PHP.

Las variables que he mencionado antes le indican a WordPress el código que debe aparecer antes y después.

before_widget y after_widget indican el código que WordPress añadirá antes y después de cada widget, mientras que before_title y after_title indican el código que se mostrará antes y después del título del widet.

El próximo paso será darle un nombre a esta sidebar, que será la que se mostrará en el index, por eso la llamaremos sidebar-index.

En la línea 4 creamos una nueva línea y escribimos:

'name' => 'sidebar-index',

Con esto la sidebar pasará a llamarse sidebar-index, y para que WordPress la utilice en el index del blog habrá que editar de nuevo sidebar.php, así que lo abrimos.

Vamos a la línea 7 y sustituímos:

!dynamic_sidebar()

Por:

!dynamic_sidebar('sidebar-index')

Por ahora ya tenemos la primera sidebar definida.

Si os habéis fijado, cuando no tenemos widgets activos, vemos un cuadro blanco muy antiestético. En este paso lo eliminaremos y añadiremos una condición: la que hace que la sidebar se muestre sólo en el index.

En sidebar.php nos situamos en la primera línea y escribimos:

<?php if ( is_home() ) { ?>

Ahora vamos a la última y añadimos:

<?php } ?>

Con esto ya tenemos lista la sidebar del index del blog.

Preparando las demás sidebars

Continuaremos definiendo las demás sidebars en el archivo functions.php, así evitaremos tener que volver a editarlo. Lo abrimos.

En la segunda línea, al final, añadimos un corchete ( { ). En la lína 10 añadimos un cierre de corchete ( } ).

Todo el código que añadiremos ahora será antes del segundo corchete y después del )); .

Basicamente lo que haremos será copiar y pegar el código que define a sidebar-index, y luego modificaremos el nombre en cada caso.

Llamaremos a la sidebar de los artículos y las páginas sidebar-single, a la de las búsquedas y archivos, sidebar-search y a la compartida entre artículos, páginas, búsquedas y archivos, sidebar-compartida.

Después de copiar y pegar el código y modificar los nombres deberíamos tener este código en functions.php:

<?php
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'sidebar-index',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '',
'after_title' => '',
));
register_sidebar(array(
'name' => 'sidebar-single',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '',
'after_title' => '',
));
register_sidebar(array(
'name' => 'sidebar-search',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '',
'after_title' => '',
));
register_sidebar(array(
'name' => 'sidebar-compartida',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '',
'after_title' => '',
));
}
?>

Si lo tenemos podemos seguir, y si no basta con copiar el que veis.

Probad a entrar en el panel de administración: podréis ver que ahora tenéis 4 sidebars entre las que escoger.

Ya podemos cerrar el archivo functions.php, hemos completado todas las modificaciones necesarias en él.

Mostrando las sidebars

Vayamos a sidebar.php.

Editamos la primera línea y añadimos el resto de páginas en las que mostraremos sidebars, sustituyendo este código:

<?php if ( is_home() ) { ?>

Por este:

<?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_paged() || is_single() || is_page() || is_search() || is_home() ) { ?>

Ahora mostraremos la sidebar en todas las ocasiones que queríamos.

Tenemos que añadir la llamada al resto de sidebars, así que copiamos y pegamos el código que llama a la primera, pero cambiando el nombre, dejando así el archivo:

<?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_paged() || is_single() || is_page() || is_search() || is_home() ) { ?>
<!-- begin sidebar -->
<div id="menu">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-index') ) : ?>
<?php endif; ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-single') ) : ?>
<?php endif; ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-search') ) : ?>
<?php endif; ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-compartida') ) : ?>
<?php endif; ?>
</ul>
</div>
<!-- end sidebar -->
<?php } ?>

Seguiremos añadiendo condiciones para evitar que se muestre una sidebar en la página que no debe. comenzaremos con sidebar-index. Añadimos una línea antes de:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-index') ) : ?>

En la que escribimos:

<?php if ( is_home() ) { ?>

Una par de líneas más abajo, después de:

<?php endif; ?>

Añadimos:

<?php } ?>

Con lo que nos quedaría:


<?php if ( is_home() ) { ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-index') ) : ?>
<?php endif; ?>
<?php } ?>

Ahora seguimos con sidebar-single. Tenemos que hacer una condición para que se muestre sólo en caso de ver un artículo o una página, así que añadimos antes de:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-single') ) : ?>

El siguiente código:

<?php if ( is_single() || is_page() ) { ?>

Y después de:

<?php endif; ?>

El correspondiente cierre de condición:

<?php } ?>

Nos quedan dos sidebars: sidebar-search y sidebar-compartida. Así que añadiremos antes de:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-search') ) : ?>

El código para comenzar la condición:

<?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_paged() || is_search() ) { ?>

Y después de:

<?php endif; ?>

El correspondiente cierre de condición:

<?php } ?>

Ya sólo nos queda sidebar-compartida, y como en las anteriores añadimos antes de:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-compartida') ) : ?>

Este código:


<?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_paged() || is_single() || is_page() || is_search() ) { ?>

Y después de:

<?php endif; ?>

El cierre de esta condición:

<?php } ?>

Y después de este último cierre ya tenemos completo el archivo sidebar.php, que debería quedar así:

<?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_paged() || is_single() || is_page() || is_search() || is_home() ) { ?>
<!-- begin sidebar -->
<div id="menu">
<ul>
<?php if ( is_home() ) { ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-index') ) : ?>
<?php endif; ?>
<?php } ?>
<?php if ( is_single() || is_page() ) { ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-single') ) : ?>
<?php endif; ?>
<?php } ?>
<?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_search() ) { ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-search') ) : ?>
<?php endif; ?>
<?php } ?>
<?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_single() || is_page() || is_search() ) { ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-compartida') ) : ?>
<?php endif; ?>
<?php } ?>
</ul>
</div>
<!-- end sidebar -->
<?php } ?>

¡Felicidades! Ya hemos convertido el theme classic en un theme con cuatro sidebars, una para cada ocasión.

Descargar el theme

Por último os dejo el link de descarga del nuevo theme classic.

Descargar.

34 Responses to Crear dos o más sidebars en WordPress

Hola… gracuas por el tutorial de como crear mas de un sidebar, ya lo probé hasta la mitad en itheme y todo perfecto… solo que queria comparar con el classic que pones en descarga e imaginé que era el que modificaste pero es el orginal del que podemos encontrar en wp-conten… si no fuera mucha molestia, nos podrías fasilitar tu theme modificado por favor….
 
Desde ya agradesco tu gentil apoyo y muchas gracias por el tutorial es el unico en toda la web 😉

Ya me salio muchas gracias…! solo una recomendacion a todos los que tratan de hacer…!! tienen que fijarse bien en los codigos del functions.php por que no son iguales al del classic.
Muchas gracias por tu tutorial…. =)

solo que queria comparar con el classic que pones en descarga e imaginé que era el que modificaste pero es el orginal del que podemos encontrar en wp-conten… si no fuera mucha molestia, nos podrías fasilitar tu theme modificado por favor…

Qué extraño… pensaba que había subido el theme Classic modificado (en ningún momento quise subir el original).
De todos modos ya he actualizado los archivos del theme, ahora ya está el modificado.
¡Gracias por el aviso!

Hola amigo, me gustaría poder hacer eso con mi theme, pero casi no puedo con el theme, por mas que lo he intentado siempre sale error, me podrías ayudar? mi messenger es cristhian[@]redtextual.com Gracias de antemano!

¿Qué problema tienes exactamente?
¿Qué theme estás tratando de modificar?
Intenta subir los archivos modificados del theme a Rapidshare, Megaupload o similares para que lo pueda descargar y mire qué falla.

Asu, ya podre aumentar mas sidebars para mi plantilla.
ojalas que pueda ps ..XD 🙂

Hola. He logrado crear sidebars diferentes para cada pagina con widgets diferentes. Saben como insertar en una misma pagina varios sidebars en posiciones diferentes, ejemplo: 4 columnas, en una un poll, en otra las categorias, en otra las etiquetas y en la ultima el meta
Este tutorial esta super. Gracias
En espera de su ayuda.

@Yenkys Gonzalez: Es muy sencillo. Imaginemos que tenemos el siguiente código para una sidebar, y queremos mostrar dos:

<?php if ( is_single() || is_page() ) { ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-single') ) : ?>
<?php endif; ?>

Nuestra segunda sidebar se llama sidebar-dos, así que el código quedaría así:

<?php if ( is_single() || is_page() ) { ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-single') ) : ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-dos') ) : ?>
<?php endif; ?>

Otro caso, imaginemos que queremos mostrar una de las sidebar en el home y al ver un artículo, y la sidebar-dos sólo al ver artículos. Pues sólo habría que alterar el if, dejándolo así:

<?php if ( is_single() || is_page() ) { ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-single') ) : ?>
<?php if(is_home()): ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-dos') ) : ?>
<?php endif; ?>
<?php endif; ?>

Como puedes ver se basa en usar el operador || (ó) y/o el operador && (y). Si queremos que una sidebar salga en dos lugares usaremos el operador ||, mientras que si queremos que se den dos condiciones para mostrarla usaremos el operador &&.

Gracias por la pronta respuesta colega, pero tengo la impresion de que no tiene muy clara cual es mi duda, lo que me explica en verdad si es sencillo y llegue a eso gracias a su completo tutorial, pero el tema es la posibilidad de colocar sidebar(con widgets diferentes) o cambiar de posicion de los widgets del siderbar, y me refiero a la posicion vertical que viene por defecto, yo deseo como ejemplo poner la lista de ultimos comentarios y la nube de etiquetas debajo en el footer y a un costado en una columna las categorias, algo asi.
Con el tuto pense que creando sidbar diferentes y cada uno con widgets especifico lo podria lograr, pero no se como deberia llamar los sidebar por el ejemplo desde el index.
Los theme por defecto lo incluyen asi
entonces como le haria para que llamar en cada lugar al sidebar que corresponde.
como ejemplo yo escribi esto en una columna y por supuesto no funciona ya que los llama a todos.

##############################################################

tusaportes

######################################

Como soy novato en wordpress y ademas principiante empirico de php no se como solucionarlo, pero creo que todo esta relacionado con el por favor, si creen que ayude el ver una imagen del diseño para tener una idea mas exacta de lo que hablo me pueden escribir a [email protected] y se las envio.
Gracias a todos y especial a sumolari.

Si no he entendido mal, lo que quieres es mostrar las sidebars en diferentes columnas. Eso lo lograrías con CSS, pero depende mucho del tema que utilices, puede que un CSS en un tema funcione de una forma y en otro lo haga de una diferente.

Sin saber el theme que usas es prácticamente imposible ayudarte.

Gracias, el theme los estoy creando yo por eso no es conocido, y si eso mismo es lo que quiero hacer y en verdad ya estoy por la pista, gracias a este tuto y otros theme similares al que estoy haciendo y he estado mirando por dentro ejemplo el networker-10
Gracias una vez mas

Hola.
He probado el tutorial y me salió perfecto.
Mi consulta es por lo siguiente:
Tengo un theme que armé con diferentes templates. Y lo que necesito es un sidebar distinto para cada template.
Por ejemplo; tengo varias páginas en las que muestro entradas distintas, y esas páginas deben mostrar un sidebar distinto.
Si puedes ayudarme te lo agradeceré mucho.
Saludos y gracias. (B)

@Pahito: ¿Tienes problemas en algún punto en especial? Porque realmente no debería haber ningún problema usando varias sidebars en diferentes templates.

chicos necesito su ayuda, estoy creando un sitio con wordpress.
el sitio es para una revista, lo que necesito es saber como hago para poder mostrar distinta publicidad en las distintas paginas.
Osea en la index 6 publicidades de 125 que eso lo hice con el plugin wp125, y en las otras paginas 6 publicidades distintas.
Agradezco desde ya su ayuda.

Y otra cosa com hago para tener en el blog 2 o mas paginas de entradas. osea que no solo en la index se puedan ingresar entradas.
Saludos

@ma: Nunca he usado el plugin wp125, así que no tengo ni idea de cómo funciona. Te recomiendo que preguntes en el foro de AyudaWordPress, donde seguro que te darán una respuesta mejor de la que yo te pueda dar.

Hola, sabes que tengo una duda al crear mas sidebars, ya que hize lo que tu planteaste y no pasa nada, en la pagina de admin sigue saliendo lo mismo, me podrias ayudar, es el theme "modern-style"

Espero una respuesta, muchas gracias.

Atte.
Antonio.

@Antonio: En el archivo functions.php, en las líneas 3-8 es donde se declara la sidebar:

<code>register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));</code>

Cámbialo por:

<code>register_sidebar(array(
'name' => 'sidebar-index',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
register_sidebar(array(
'name' => 'sidebar-single',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
register_sidebar(array(
'name' => 'sidebar-search',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
register_sidebar(array(
'name' => 'sidebar-compartida',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));</code>

Y debería funcionar.

Buenas noches Sumolari,

Lo explicas tan tan bien que estaba toda contenta por haber dado contigo!! Pero lamentablemente a pesar de seguir paso a paso todas tus instrucciones en el theme(Be a Gourmet) que tengo, no me funciona ;-( Voy consiguiendo cambiar cosillas pero esto no puedo.

Qué es lo que he podido hacer mal?

Muchas gracias por todo eres genial 😀

Saludos

Pues necesitaría ver el código PHP de los archivos de tu theme para encontrar el error. La advertencia que has puesto corresponde con un error con el que me encuentro a menudo: se ha enviado una cabecera al cliente y más adelante se ha enviado una nueva cabecera, dando lugar a un conflicto.

La causa más probable es que en el archivo functions.php de tu theme haya algún echo o alguna función que muestre contenido.

Si quieres podemos seguir a través del foro, donde es más cómodo seguir las conversaciones y se pueden añadir imágenes y enlaces con más facilidad.

ahora sí que la fastidie del todo.. me sale esta advertencia y la pagina no se abre 🙁

me puedes ayudar por favor?

Advertencia: no se puede modificar la información de cabecera – cabeceras ya enviada por (la producción comenzó en / home / klwkqple / public_html / venytomateuncafeconcafeina.es / blog / wp-content / temas / Be_a_Gourmet / functions.php: 2) en / home / klwkqple / public_html / venytomateuncafeconcafeina.es / blog / wp-includes / pluggable.php on line 868

Hola sumolari, genial tu tutorial.

¿Me podrías decir qué variación debo hacer para añadir una sidebar dentro de header.php?

gracias de antemano

Fácil, en lugar de modificar el archivo sidebar.php, haz las modificaciones en header.php.

Para añadir una sidebar basta con añadir:

&lt;?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('NOMBRE_SIDEBAR') ) : ?&gt;
&lt;?php endif; ?&gt;

Defines la sidebar en functions.php y la muestras donde quieras (puedes mostrarla varias veces o ninguna, es todo a tu gusto).

Hola, que tal si lo que quiero hacer es tener varias paginas y cada pagina con un sidebar diferente: ejmplo: pag1 sidebar1; pag2 sidebar2; y asi susesivamente…

saludos y gracias

Pues creas más sidebars (siguiendo los pasos del artículo) y a la hora de mostrarlas utilizas la función is_page(ID_DE_LA_PAGINA_EN_CUESTION) como valor para la condición:

&lt;?php if ( is_page(ID DE MI PAGINA) ) { ?&gt;
&lt;?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-mi-pagina') ) : ?&gt;
&lt;?php endif; ?&gt;

Hola. uso la plantilla "my engine" de wordpress. La encontré entre las que trae wp pero quiero añadir otro sidebar a la derecha pero no tengo ni idea de hacerlo. ¿Podriais ayudarme? Mi blog es http://www.invertiras.com Gracias de antemano

Siguiendo el tutorial deberías de poder añadir la sidebar sin problemas, aunque eso sí, cada theme es diferente y puede que en el que usas haya alguna peculiaridad que no esté recogida en el tutorial.

Te sugiero que te pongas en contacto con el creador del theme que usas si no consigues añadir la sidebar: él conoce mejor que nadie su creación y sabrá responderte a tus preguntas.

Por otro lado, yo no voy a explicar cómo añadir la sidebar a un theme específico: yo explico el proceso general basándome en un theme que todo el mundo tiene a mano (uno de los que viene por defecto en WordPress).

Sobre tu segundo comentario, te digo lo mismo: consúltale al creador del theme: él lo ha hecho y seguro que no le importa explicarte cómo modificarlo a tu gusto.

Ah y se me olvidó comentar tambien que cómo podría ampliar el tamaño del sidebar pero casi casi que me interesa más que me contesteis a mi primera pregunta si es mucho engorro. Tampoco quiero dar mucho la brasa. Saludossss

De acuerdo muchas gracias pero me parece que lo mejor será que cambie de plantilla por que entiendo bastante poco de código html.

Verás me ocurre que al cambiar la plantilla me sale el segundo sidebar derecho abajo del todo y me ocurre con todas las plantillas de tres columnas. ¿Sabes algo de esto?

Pues no sé qué decirte aparte de que preguntes al autor de esos themes.

Gracias por todo. Un saludo

Genial la explicación!!! (Y)
Gracias!!!

Saludos,
Laura

Que clase de maestro.Nunca habia leido algo igual.Muchos son expertos en estos temas pero a la hora de plasmarlo en una pagina se les hace imposible. Esto tiene que ser una cualidad mas que solo ser experto en su rama. Deberias dedicarte a enseniar mas y mas cosas y te aseguro que llegaran millones a ver tus articulos y luego los anunciantes te lloveran por montones y de paso benificias a la humanidad completa. Sencillamente eres el mejor.

Leave a Reply