SummArg | Cursos y recursos para webmasters

Clase 8: Sidebars y widgets

Hoy vamos a trabajar con el archivo sidebar.php y con áreas de widgets. Los widgets son pequeños módulos que se pueden añadir en sectores de nuestra elección y que tienen múltiples funciones. Por defecto WordPress nos ofrece un widget con un calendario, uno para mostrar páginas creadas, otro para categorías, menús, texto plano u HTML, links del blogroll, suscripción a feeds, campo de búsqueda, links administrativos, etc. Nosotros podemos añadir muchos mas mediante plugins.

Los widgets pueden agregarse a cualquier plantilla de nuestra web y combinado con condicionales, los cuales vimos en la Clase 6, nos dan un sinfín de posibilidades para nuestro sitio.

Para añadir un widget hace falta primero declararlo en nuestro functions.php, y luego insertarlo en la plantilla deseada. Vamos a generar un área de widgets básico para la sidebar.

register_sidebar(array(
 'name' => 'Sidebar',
 'before_widget' => '<div class="widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ));

El primer parámetro, name, asigna un nombre a nuestro widget que figurará luego en nuestro escritorio bajo “Widgets” para poder identiticarlo. before_widget y after_widget añade etiquetas al inicio y al final del mismo, en nuestro caso abrimos un div con class widget y lo cerramos. Finalmente repetimos la misma operación pero para el título con before_title y after_title. La función register_sidebar también admite los parámetros id (para colocar un ID al widget) y description (descripción).

Guardamos el archivo functions.php con estas líneas que acabamos de explicar y vemos si aparece el nuevo área de widgets en Apariencia > Widgets. Hoy vamos a generar tres áreas de widgets para utilizar en tres secciones diferentes: una sidebar en el inicio, otra para la plantilla de categorías y otra para una página. Las haremos idénticas entre si pero con diferentes nombres.

register_sidebar(array(
 'name' => 'Sidebar Home',
 'before_widget' => '<div class="widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ));
 register_sidebar(array(
 'name' => 'Sidebar Categoria',
 'before_widget' => '<div class="widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ));
 register_sidebar(array(
 'name' => 'Sidebar Pagina',
 'before_widget' => '<div class="widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ));

Hasta ahora venimos trabajando con una sola sidebar y vamos a explotar su uso todo lo que podamos. Abrimos el archivo y colocamos luego del listado de entradas que colocamos y antes del </div> de cierre del div #sidebar:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Home') ) : endif; ?>

Con eso sólo estamos insertando los widgets que cargemos dentro de la sección “Sidebar Home”, pero faltaría indicarle que queremos que se cargue dichos widgets si y sólo si estamos visualizando el home. Echamos mano a los Condicional Tags, como ya mencionamos.

Entonces reemplazamos el código por este nuevo.

<?php
 if (is_home()) {
 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Home') ) : endif;
 }
 ?>

Probamos añadir un campo de búsqueda o lo que sea para ver si se visualiza en el home y comprobamos que no se visualice en la vista por categorías o en una página.

Perfecto! Ahora generamos el código con sus respectivos condicionales para el área de widgets a mostrarse en el caso de estar en una categoría (is_category) y en una página (is_page).

<?php
 if (is_home()) {
 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Home') ) : endif;
 } elseif (is_category()) {
 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Categoria') ) : endif;
 } elseif (is_page()) {
 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Pagina') ) : endif;
 }
 ?>

Guardamos, activamos diferentes widgets en cada área y confirmamos que cada sidebar muestre lo que nosotros queremos. De acuerdo a lo que escribimos en nuestro functions.php el código HTML de cada widget quedó de la siguiente manera:

<div class="widget">
 <h3>Busqueda</h3>
 <!-- contenido del widget seleccionado -->
 </div>

Aplicamos un estilo diferente al widget para diferenciarlo de otros contenidos añadiendo un margen inferior, color de fondo, color de borde, borde redondeado y padding.

.widget {
 margin-bottom: 20px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 background: #f4f4f4;
 border: 1px solid #ececec;
 padding: 5px;
 }

Doble sidebar

A nuestro template de página le vamos a agregar una segunda sidebar, sólo por el gusto de ver como funciona el asunto. Abrimos el archivo page.php y observamos que en la anteúltima línea se utiliza una función para incluir la sidebar allí. Duplicaremos dicha función pero esta vez insertando entre comillas simples el nombre de nuestra nueva sidebar, que en este caso se llamará “dos”.

<?php get_sidebar();  get_sidebar('dos'); ?>

Ahora necesitamos crear el archivo de dicha sidebar y para nombrarlo debemos tener en cuenta que primero colocamos sidebar-nombreelegido.php. El “nombreelegido” es lo que colocamos entre comillas simples cuando invocamos al archivo con get_sidebar. En nuestro caso el archivo deberá llamarse sidebar-dos.php. Coloquemos dentro el siguiente contenido.

<div id="sidebar">
<?php
 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Dos') ) : endif;
 ?>
</div><!-- end of sidebar -->

Generamos esta nueva área de widgets en el functions.php.

register_sidebar(array(
 'name' => 'Sidebar Dos',
 'before_widget' => '<div class="widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ));

Y para que haya un poco de coherencia en el diseño, vamos a modificar los ids de page.php para generar un CSS para este layout.

<div id="wrapper-dos">
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 <?php the_content(); ?>
 <?php the_time('F jS, Y') ?> | <?php the_author() ?>
 <?php endwhile; else: ?>
 <h2>No encontrado</h2>
 <p>Lo sentimos, intente utilizar nuestro formulario de b&uacute;squedas.</p>
 <?php endif; ?>
 </div><!-- end of wrapper-->

Añadimos en el CSS las propiedades para #wrapper-dos y #sidebar-dos.

#wrapper-dos {
 width:392px;
 float:left;
 margin-top:20px;
 margin-left:20px;
 }
#sidebar-dos{
 width: 215px;
 margin-top:20px;
 margin-right:20px;
 float:right;
 }

Y vamos a darle un poco de formato a las listas dentro de widget, ya que nuestros widgets las usan mucho.

.widget li {
 list-style-type:none;
 padding: 0 0 0 10px;
 }

Nuestro ejercicio de hoy no ha quedado muy bonito que digamos, pero espero que la idea haya sido lo mas clara posible. Pueden agregar tantas áreas de widgets como quieran y tantas sidebars como sean necesarias.

 

Demo | Descargar Clase 8 (652)

Volver al temario del taller

 

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: Hoy vamos a trabajar con el archivo sidebar.php y con áreas de widgets. Los widgets son pequeños módulos que se pueden añadir en sectores de nuestra elección y que tienen múltiples funciones. Por defecto WordPress nos ofrece …..

  2. Ricardo

    Que biennn, me alegro ver esta clase publicada!! al lio!!! Gracias!!

  3. que ansioso soy! entro todos los dias aver si hay clase nueva 🙂

  4. Tio eres un grande!!!!!!

    Gracias!!!!!!

  5. Hola, primero muchas gracias por este excelente tutorial. Tengo un problema y es que no me aparece la posibilidad de escoger la plantilla en atributos de página. Solo me pasa en este tema que estamos haciendo, si activo otro tema si que me aparece. ¿Que puede ser?

    Gracias

  6. Arlekin

    Oye, tengo una duda, y aunque prácticamente no se nada de esto, siempre busco respuestas. Mi amiga tiene un blog de venta de productos varios, y siempre le interesa que su sitio sea cómodo y vistoso para sus clientes. Actualmente, lo que ella quiere hacer es que cuando un producto este seleccionado, y mostrándose en la página principal, la sidebar muestre en algún pequeño recuadro algunos datos como precio y disponibilidad, y que cuando seleccione otro producto y este aparezca en la página principal, la sidebar cambie y muestre la información del producto seleccionado. ¿Qué le recomiendas para que logre esto? Muchas gracias.

  7. Buenas!

    Muy buen tutorial. Hay algunas cosas que no acaban de funcionarme muy bien. Por ejemplo, cuando definimos los tamaños de imagen en el functions.php, no me los recorta. He tenido que usar la librería “timthumb.php” para que me funcionara bien. Y lo segundo es el slider. No solo no carga, sino que aparecen bastantes errores de javascript. Espero que lo puedan actualizar. Aun así, la base muy interesante y práctica.

    Saludos!

  8. […] Clase 8: Sidebar y widgets […]

  9. […] Clase 8: Sidebar y widgets […]

  10. Es la primera vez que comento, realmente iba a felicitarte por tu gran trabajo al finalizar todos los cursos muy bien explicado todo.. no había tenido problemas hasta ahora, hice todo tal cual y funcionó pero no sé que esté mal, los widgets de slider 2 de la página me los pone mas muy abajo, apliqué el CSS tal cual y modifiqúe el wrapper ¿que puede ser? he avanzado muchoa te lo agradezco !!!

Dejar un comentario