Crear Sidebars en WordPress

wordpress-logoHemos aprendido a crear Widgets. Hemos aprendido a crear menús personalizados. Pero hay una cosa que aun nos falta por aprender y que nos puede venir muy bien como complemento a estos dos elementos: Sidebars.

¿Qué es una Sidebar, en términos de WordPress? No nos referimos al elemento físico div class=’sidebar’ situado a izquierda o derecha y que ocupa unos 200px. No exactamente. Eso es cosa de diseño. Cuando hablo de crear sidebars en WordPress más bien me refiero a crear «una zona«, un lugar, que el administrador reconocerá como tal y nos permitirá añadir widgets, y que en el Theme podemos llamar para que muestre los Widgets que hemos configurado. Como aparezca esta zona, ya sea en forma de barra lateral, de menú superior, o de bocata de calamares, es cosa del diseño.

Lo primero es lo primero, en nuestro plugin/Theme crearemos una función para registrar la sidebar, gracias a la función de WordPress ‘register_sidebar‘. Seguro que nadie lo había deducido…

<?php
function miplugin_register_sidebars(){
    register_sidebar(array(
        "name" => "Nombre de la Sidebar",
        "id" => "id-unico-para-la-sidebar",
        "descripcion" => "Descripción de la Sidebar",
        "class" => "clase-del-elemento",
        "before_widget" => "<li id='%1$s' class='%2$s'>",
        "after_widget" => "</li>",
        "before_title" => "<h2 class='titulodelwidget'>",
        "after_title" => "</h2>"
    ));
}
add_action('widgets_init','miplugin_register_sidebars');
?>

Es importante saber que cada sidebar que creemos necesita tener un id único, que no se repita en otras Sidebars. Esto podemos conseguirlo añadiendo prefijos y sufijos al id, como el acrónimo de nuestro plugin, o lo que se os ocurra. En el campo before_widget vemos dos valores omitidos (%1$s y %2$s), que son la id y la clase de los respectivos Widgets que aparezcan en nuestra Sidebar.

Hecho esto, WordPress reconoce a nuestra Sidebar en «Apariencia» > «Widgets», y podemos empezar a rellenarla con los plugins que hayamos destinado para ella.

Mostrar la Sidebar

Ahora hay que mostrar la Sidebar en pantalla. No importa cómo, pero sí dónde. Cuando decidas en qué lugar va a aparecer tu Sidebar, el código a añadir es algo como esto:

<div id="mi-sidebar" class="mi-sidebar">
    <?php if ( is_active_sidebar('id-unico-para-la-sidebar') ) { ?>
        <?php dynamic_sidebar('id-unico-para-la-sidebar'); ?>
    <?php } ?>
</div>

Lo que hacemos es preguntar si la Sidebar existe y está activa. Si es así, entonces llamamos a la función dynamic_sidebar, donde podemos introducir el id o el nombre de la Sidebar que acabamos de crear.

Con esto y un bizcocho… las dudas nos las podéis dejar en el bloque de comentarios de aquí abajo (el bizcocho sabemos que no, pero se agradece la intención).

“Un buen programador es aquél que mira a los dos lados
antes de cruzar una carretera con un único sentido”

    .- Doug Linder

¿Te ha gustado el artículo?
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (4 votos, promedio: 5,00 sobre 5)
Loading...

Suscríbete. Déjanos tu email y recibe contenido genial cada mes


Artículo escrito por

¡Exprésate! Dejanos tu comentario

Tu dirección de correo electrónico no será publicada.

7 Comentarios

Ximena Infante

Como hago para que me aparezcan las imagenes en el widget de facebook en el sidebar, solo me aparece el texto. Gracias

Ximena Infante

Como hago xa q el widget d facebook muestre las imagenes en el sidebar, solo me sale el texto. Gracias

yaret

Saludos, una pregunta. :)  Y luego que este hermoso codigo que das me funciona, como hago en el style.css, para aliniar el widget a la izuierda, derecha, arriba o abajo?? y para que se vea ajustadito.

Niell

Deberás muchas gracias, vi otro tutorial que no me funciono xD, pero el tuyo me trajo alivio.

Niell

Gracias por este tutorial, espero funcione :D

Juan Viñas

Entonces quizá deberías leerte el tutorial para crear un plugin en WordPress primero! :) Puedes hacer dos cosas:

  • Poner el código de registro del sidebar en el archivo "functions.php" del Theme que estas usando.
  • Poner el código de registro del sidebar en un plugin que desarrolles específicamente para esto (es lo que yo recomiendo, te da la opcion de activar/desactivar y no se toca el Theme).
Eso con el primer bloque de código. El segundo, que es el que muestra la sidebar, lo tienes que colocar en el Theme sí o sí, en el lugar donde quieras que aparezca la sidebar. ¡Ánimo! :)

dani

muy interesante!! una pregunta tonta....el código que has puesto en que archivo se pone?? o hay que crear uno nuevo?? estoy muy verde ja ja