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 post? ¡Compártelo!
  • Bitacoras.com
  • TwitThis
  • Facebook
  • Meneame
  • Google Bookmarks
  • del.icio.us
  • Live
  • Technorati
  • Ping.fm
  • Wikio
  • Turn this article into a PDF!
  • E-mail this story to a friend!
  • Print this article!

También te puede interesar:

cursos formación continua

    4 comentarios en “Cómo crear una página especial con Widgets”

  1. Javyer (23 comentarios) dijo:

    Lo probaré a ver qué tal ;)

    Por cierto, una paginación de las fotos al estilo de Flickr vendría muy bien a tu fotoblog, hay un plugin que lo hace fácilmente :D

    Saludos!

  2. Uy, lo tengo abandonadísimo, a ver si le echo un rato un día de estos. De todos modos el theme que tengo puesto es “especial”, casi me gusta así :roll:

  3. [...] Cómo crear una página especial con Widgets - AyudaWordpress [...]

  4. esta muy bueno, una preg. usted prestaria ese tema ya modificado ?

Escribe un Comentario

XHTML: Puedes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Subir

Expertos en WordPress
Euribor
Hardware. Software. Ocio & Multimedia. Humor. Internet. Videojuegos.Noticias
Participa en el Debate
  • edder15x: yo quiero meter una encuesta a mi blog pero cuando lo pongo me sale que tengo que...
  • edder15x: yo tengo el wordpress.com pero ace poco me entere que habia el wordpress.org osea para...
  • edder15x: oye tio una pregunta en esos codigos como puedo meter un video de megavideo con el...
  • alexito4: WLW! Es sin duda lo mejor que ha echo windows! Me va de perlas. tengo pendiente algun...
  • Félix Román: Gracias por ser agradecido ;-)
Noticias Breves
  • Si quieres aprender como hacer multitud de diseños distintos para WordPress no te pierdas esta estupenda recopilación de 26 tutoriales de diseño de blogs WordPress.

    [#3]

  • Acaba de salir a la luz la nueva versión de WordPress para iPhone 1.3, con soporte completo para el firmware de iPhone 3.0. Va de cojones estupendamente. Altamente recomendable esta actualización, que tienes en iTunes.

    [#1]

  • Me avisa Kike Alonso de un nuevo plugin que permite que los comentarios que dejen tus amigos de Friendfeed al respecto de un post de tu sitio WordPress aparezcan también en tu post como comentarios normales, algo realmente interesante pues permite, con algunos clientes de escritorio e iPhone, comentar en blogs sin dejar de usar la aplicación de mensajería.

    [#6]


  • Ahora mismo en los FOROS ...
    Usuarios Registrados
  • Acceder

  • Translate this Blog
    Spanish flagItalian flagChinese (Simplified) flagPortuguese flagEnglish flagGerman flagFrench flagJapanese flagRussian flagSwedish flagCatalan flagHebrew flag                              
    By N2H