Incluir una sidebar dinámica en nuestro theme de WordPress

Incluir una sidebar dinámica en nuestro theme de WordPress

Fecha: 06-May-2010 | Autor: .
Guardado en: Artículos, Tips

Luego de unas cuantas semanas, hoy vuelvo a traer una entrega de Jueves de WordPress, explicando hoy cómo incluir una sidebar dinámica (en la que luego desde el panel, podremos agregar, editar o quitar widgets) a nuestro theme de WordPress.

Lo primero que debemos hacer es definir la sidebar dinámica en nuestro archivo funciones.php (en caso de que no esté ya definida). Para ello debemos editar (o crear) el archivo functions.php de nuestro theme y agregar:

if(function_exists('register_sidebar')){
    register_sidebar(array(
        'name' => '',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '',
        'after_title' => '',
    ));
}

En name indicaremos el nombre de nuestra sidebar (podemos tener más de una), luego con before_widget y after_widget podemos indicar que código HTML debería aparecer antes y después del bloque en cuestión. De igual forma hacemos con before_title y after_title para definir el código anterior y siguiente al título del widget.

Como adicional, podemos utilizar la pseudo-variable interna: %1$s para agregarla (por ejemplo) en un class y que cada widget tenga un class asociado (además de por ejemplo, un class=”widget”).

De modo que nuestra definición podría ser algo así:

if(function_exists('register_sidebar')){
    register_sidebar(array(
        'name' => 'Sidebar Personalizada',
        'before_widget' => '<div class="widget %1$s">',
        'after_widget' => '</div>',
        'before_title' => '<h4>',
        'after_title' => '</h4>',
    ));
}

Luego, debemos incluir la llamada a la sidebar dinámica desde el archivo sidebar.php, para ello:


¿Por qué este anuncio?
<?php
if(function_exists('dynamic_sidebar')){
    dynamic_sidebar('Sidebar Personalizada');
    // Donde pone 'Sidebar Personalizada' iría el nombre
    // que hayas puesto a tu sidebar al definirla
}
?>

Finalmente, sólo nos resta, accediendo a nuestro panel de WordPress, activar y personalizar los widgets que deseemos dentro de nuestra Sidebar Personalizada ;)

Puedes ver funcionando un ejemplo de sidebar dinámica en la demo de aetherius dónde los 2 primeros bloques que aparece en la barra de la derecha son widgets añadidos desde el panel de WordPress. El primero mostrando las etiquetas más populares y el segundo los últimos posts desde el feed de Pixelar.me ;)

Por último, vale aclarar que la sidebar dirnámica puede no ser literalmente una “barra lateral” sino que podemos aplicarla al titular o al pie de página por ejemplo, con la correcta maquetación de los elementos que en ella aparezcan. También es posible definir múltiples sidebars dinámicas con distintos nombres y cargar diferentes widgets en cada una, pero eso lo dejo para que tú lo investiges un poco! ;)


Si te gustó, comparte:
Y si fue de ayuda, puedes comprarme un café:
...ó la cena si quieres! ;)

Etiquetado como: , , , ,


Gravatar

Marcelo


Desarrollador web, trabajando desde Montevideo, Uruguay para todo el mundo. Me especializo en Diseño web, Maquetación HTML5 & CSS3, jQuery y Programación PHP & MySQL, e intento aprender un poco más cada día.

8 comentarios, participa!

  1. Lex Castillo

    06. May, 2010

    Excelente Marcelo, como siempre, ya había yo averiguado como se hace esto, pero como que lo leí mas complicado jajaja pero aquí si está bien clarito, y tambié como siempre GRACIAS !!! =D

  2. Ichigo

    06. May, 2010

    Excelente, y combinado con el estilo de side bar dinámico se puede tener contenido estático y widgets :D
    Un abrazo man.

  3. javi

    27. Jun, 2010

    vaya vaya, no conocia esta web, me la guardo en favoritos, a ver si aprendo bien a diseñar (que tampoco es complicado, solo hace falta imaginacion) y tambien a maquetar la web para crear el theme wordpress de mi web, que ahora mismo el que tengo es creado con artister y retocado por mi en varios aspectos

  4. Frixzer

    20. Sep, 2010

    MUy bien explicado, se ve tan facil. queria saber si se puede hacer lo mismo pero para crear una seccion dinamica? quiero colorcar una seccion especial para twitter, sin ponerlo en el sidebar.

  5. Alberto

    19. Jun, 2011

    Muy bueno Marcelo, gracias por el aporte :D

  6. Yanko Blumen

    22. Ago, 2011

    Gracias, era exactamente lo que buscaba :)

  7. sugarfree

    23. Feb, 2012

    Buenas,

    No soy muy experta en wordpress pero creo que hay un plugin que haría la misma función llamado Custom Sidebar.

    Gracias por el aporte.

  8. Daniel

    11. Nov, 2012

    Gracias por la explicación me sirvió de maravilla.

Deja tu opinión