Cómo crear una página especial con Widgets

Tengo un blog con un tema muy minimalista, tanto, que al estar compuesto de una única columna no tenía soporte para widgets. Para mantener esta línea de simplicidad, mi idea era poder mostrar los widgets en una página distinta de la principal. Así que a partir de una consulta en el foro de Ayuda Wordpress, obtuve la ayuda que necesitaba y conseguí desarrollar mi idea.

Fernando me ha invitado a escribir este artículo, así que os explicaré Cómo utilizar Widgets en tus páginas de Wordpress en unos sencillos pasos…

El procedimiento descrito se hizo sobre la versión Wordpress 2.6, aunque seguro que es aplicable al menos a las versiones que soporten widgets.

1. Añadir soporte para de widgets al tema. Para ello añadir al fichero functions.php del tema el texto:

<?php
if ( function_exists(‘register_sidebars’) )
register_sidebars(1);
?>

En mi caso he creado dos sidebars para poder repartir los widgets en dos columnas sobre la página.

Además crearemos la unit contenedora del ‘sidebar’ sidebar.php que será llamada cada vez que se intente generar el bloque de sidebars. El código es el siguiente:

<div>
<div class=»sidebar»>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(1) ) : ?>
<?php endif; ?>
</div>
<div class=»sidebar»>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(2) ) : ?>
<?php endif; ?>
</div>
</div>

Si no existen los ficheros descritos hay que crearlos dentro del directorio del tema activo.

2. Crear el código CSS asociado a los elementos básicos que componen el widget.

Modificamos a nuestro gusto las clases CSS que afectan a los elementos del widget en el fichero style.css de nuestro tema. Por lo menos estos:

.wcontainer{width:100%;
}

.sidebar {width: 50%;
float: left;
}

.sidebar ul {
font-size : 12px;
list-style: none;
margin: 5px;
padding: 0;
}

.sidebar li {
font-size : 12px;
list-style: none;
margin-left: 15px;
padding: 0;
}

3. Crear una plantilla que haga una llamada a la función de WP: get_sidebar();

En mi caso creé el archivo widgetized-page.php en el directorio de mi tema. Atención al comentario inicial con Template Name: xxxxx, es necesario para que WP lo reconozca como una plantilla. El código simplificado es:

<?php
/*
Template Name: widgetized page
*/
?>
<?php get_header(); ?>
<!– begin page –>
<div class=»wcontainer»>
<?php get_sidebar(); ?>
</div>
<!– end page –>
<?php get_footer(); ?>

4. Incluir los widgets en los dos sidebar creados desde el panel de control de WP.
Muchos de ellos permiten personalizar el título y algunos parámetros.

5. Crear una nueva página y asociarle la nueva plantilla.
Pues lo dicho, escribimos una nueva página y en opciones avanzadas le asignamos nuestra plantilla.
Debeis tener en cuenta que en el código de la plantilla se omite intencionadamente el texto incluído en la página. Así que sólo tendremos dos columnas invisibles conteniendo los widgets que hemos definido.

6. Probar el resultado.
Pues listo, ya tenemos nuestra página conteniendo los widgets independientemente de la página principal. Aquí podeis ver el ejemplo:

Para los que no tengais muy claro lo que hemos hecho, os resumo brevemente cual es la cadena de transmisión simplificada:

1. Declaración del contenedor de widgets = functions.php + sidebar.php + styles.css
2. Configuración de widgets visibles = panel de control de wordpress
3. Creación de una plantilla que incluya el sidebar = widgetized-page.php con un get_sidebar();
4. Creación de una página con la plantilla asociada
5. Probar

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)