• Como

    Como Implementar Sidebars Dinámicos (Widgets) en WordPress

    Los Widgets son pedazos de contenido administrables desde el backend (Apariencia > Widgets), estos se almacenan en espacios conocidos como ‘Sidebars Dinámicos’.

    En este tutorial aprenderas como implementar Sidebars Dinámicos (Widgets) en tu theme de WordPress.

    Registrando el Sidebar

    El proceso es sencillo, lo unico que tenemos que hacer es colocar la función register_sidebar() en el fichero functions.php de nuestro theme.

    Esta función acepta como parametro un Array en el cual se especifican los detalles del Sidebar:

    • name: El nombre del Sidebar, por defecto es ‘Sidebar’.
    • id: El id del sidebar (ej: sidebar-derecha), por defecto es el ID numerico auto-generado.
    • description: Texto de descripcion del sidebar a registrar, se muestra en la pagina de Widgets, por defecto esta vacio
    • class: Clase CSS a asignar a los widgets de este Sidebar.
    • before_widget: Código HTML que ira antes de cada widget, por defecto es <li>
    • after_widget: Código HTML que ira después de cada widget, por defecto es </li>
    • before_title: Código HTML que ira antes del título del Widget, por defecto es <h2>
    • after_title: Código HTML que ira después del título del Widget, por defecto es </h2>

    Sabiendo esto, procedemos a crear un Sidebar de ejemplo:

    <?php
    register_sidebar( 
    	array(
      		'name' => 'Zona de Anuncios',
      		'id' => 'ad-zone',
      		'description' => 'Aquí irán los anuncios del sitio',
      		'before_widget' => '<div class="widget ad">',
      		'after_widget'  => '</div>',
      		'before_title' => '<strong class="adtitle">',
      		'after_title' => '</strong>'
      	)
    );

    Con solo ese código, si vamos a Apariencia > Widgets deberíamos ver nuestro Sidebar, el cual podemos empezar a llenar con Widgets:

    wordpress-sidebars1

    Mostrando el Sidebar

    Para mostrar el Sidebar utilizamos la función dynamic_sidebar(), este lleva un solo parametro en donde debemos indicar que Sidebar mostrar, se pone el id (textual o numérico) del sidebar (en nuestro caso: ‘ad-zone’) si se deja vacío mostrará el primer sidebar registrado.

    <?php dynamic_sidebar( 'ad-zone' ); ?>

    Y esto lo podemos ubicar donde queramos, normalmente se acostumbra a crear un archivo sidebar.php, poner la función allí y luego incluirlo con get_sidebar().

    Sin embargo los Sidebars en WordPress no siempre son usados como sidebars (literal), sino mas como un area dinámica multiproposito que se puede colocar en cualquier parte, por ejemplo en el Footer o en el Header.

  • Josue Ochoa

    Hola, soy el editor de este blog, trabajo como desarrollador web freelance, sígueme en Twitter.

  • Tal vez te interese
Acerca de

WebTursos es un blog de tutoriales, articulos y recursos para diseñadores y desarrolladores web. mas...

Suscribete

Suscríbete para recibir los últimos posts directamente en tu bandeja de entrada: