Pixelar.me

Incluir una sidebar dinámica en nuestro theme de WordPress

Fecha: 06-may-2010 | Autor: Marcelo.
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:

1
2
3
4
5
6
7
8
9

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í:

1
2
3
4
5
6
7
8
9

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:

1
2
3
4
5
6
7

<?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! ;)

Relacionado:

Checklist al integrar un diseño a WordPress

Descarga el tema aetherius para WordPress

Jueves de WordPress

A 2 lectores les ha gustado esta entrada.

 Loading ...

Etiquetado como: jueves de wordpress, sidebar, sidebar dinámica, widget, WordPress

Marcelo Ferreiro

Desarrollador web: me especializo en Diseño web, Maquetación xHTML & CSS y Programación PHP & MySQL, e intento aprender un poco más cada día.