¿cómo debería ser un theme WordPress?

Y no hablo sólo de diseño, sino de características,  de funcionalidad, debería ser minimalista o explotar todas las partes de la anatomía de un blog.

Sé que en gustos se rompen géneros y por eso no titulé el post: buscando el WordPress theme perfecto o algo parecido, porque eso no existe ni existirá, sin embargo, respecto a un theme WordPress:

¿Qué características y/o funciones piensas debería tener?

Posts populares y aleatorios, últimos comentarios con avatars, tabbers o pestañas, ¿miniposts en la sidebar?, avatar de los autores en cada post, miniaturas automáticas.

¿Cuán funcional debería ser?

Controlar todo desde un panel, ser altamente personalizable de forma manual, decenas de template pages o plantillas de página, posibilidad de poner widgets en todo el blog, plugins embebidos en el theme.

¿Qué tipo de diseño debería tener?

2 sidebars, 3 sidebars, diseño a 2 columnas con una sidebar y el área de posts, colores pastel o  tonos y colores neutros, he allí varios dilemas.

En todo caso sé que es una pregunta al aire, todos tendrán sus preferencias pero tal vez en algo la mayoría coincidiremos ¿quién sabe? espero escuchar sus opiniones respecto al tema.

Pero siempre se puede mejorar y es por esta razón que me propuse listar al menos 7  pequeños, grandes errores que la mayoría de los bloggers cometemos al crear el diseño de nuestro blog; y creanme que hasta a los mejores les pasa.

Mostrar el Index como Posts Recientes

Hace un tiempo escribí como mostrar posts recientes en WordPress, pero no fue hasta hace poco que un comentario me hizó darme cuenta  que hay un pecado que todos comentemos cuando utilizamos este recurso en nuestro theme.

Incluimos los posts de la portada, en conclusión creamos una sección nada usable para el visitante, pues mostramos lo mismo que hay en nuestro Index.

Pero como en todo, hay una forma de corregirlo, usando el parametro offset, que se encargará de excluir el número de posts de nuestra portada de los artículos que tomará WordPress para mostrar, un ejemplo:

<ul>
<?php $lastposts = get_posts('numberposts=5&offset=5');
foreach($lastposts as $post) : setup_postdata($post); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>

¿Una nueva ventana para cada enlace?

Personalmente no me gusta el uso de target=”_blank”, la mayoría se va por el hecho de creer que si los usuarios abren una página por ventana no se irán del sitio.

Tremendo error, como webmaster tu controlaras el sitio pero no debes interferir en como el usuario interactua con él, siempre se debe dejar que el lector administre el destino de los links que abre.

Usar bloques de texto extensos

Si la buena comunicación verbal es usando frases cortas, porque la escrita habría de ser diferente, si escribes en parrafos extensos la idea se pierde y asustas al lector, información dosificada es mejor aceptada que impactante y larga.

Ocultar ú omitir datos

A veces creemos que es tan redundante poner datos como: la fecha, el autor o las etiquetas del post, que simplemente las eliminamos.

Sin considerar que esos pequeños detalles influyen en la intectividad del usuario con el sitio, como en la decisión de comentar o el seguimiento de un topic mediante las tags.

No aprovechar toda la anatomía del blog

Lugares como la sidebar, el footer o el header son mayormente discriminados colocando sólo las categorías, los créditos y el logo respectivamente.

He aquí algunas tecnicas y consejos que pueden ayudarte a hacer mejor el diseño de esas secciones de tu blog:

- Tecnicas para mejor tu Sidebar si usas WordPress

- Colección de hacks para los comentarios en WordPress

Y ustedes, ¿que otros “pequeños, grandes errores en el diseño de un blog” consideran que hay o han visto? estoy deseoso de leer sus comentarios y si de paso quieren criticar el diseño de este su blog que mejor.

Es por ello que hoy les presento 3 tecnicas para que puedan crear en su actual o futuro theme WordPress una sidebar única y darle a su proyecto un aire fresco en su diseño:

Crear un Dropdown Blogroll sin Javascript

Idea de Michael Martin, gran diseñador y blogger de Pro Blog Design, es un tecnica que usa CSS para crear un bello dropdown blogroll sin necesidad de JavaScript.

Posts Recientes con efecto Newsticker

Hace un tiempo escribí al menos 3 formas para mostrar posts recientes en WordPress con PHP, sin embargo si lo suyo es ser más dinámicos y lo estático les aburre desde PVM Garage, gran blog que vengo siguiendo hace un tiempo y que recomiendo, nos acercan un método que usa Jquery para crear un efecto newsticker e implementarlo a nuestros posts recientes, de modo que estos roten de abajo para arriba cada corto tiempo.

Mostrar y esconder Widgets con Jquery

Tiene un tiempo pero no por eso deja de ser asombroso; Austin de WPCult nos muestra como usar Jquery para esconder o mostrar los widgets de la sidebar a pedido de los visitante y un click de distancia, inperdible, yo ya estoy pensando en implementar algunas en Kernel Web.

Sin más que decir allí les va el primero

Listar los posts más recientes del blog en WordPress

Para hacerlo hay varias formas, podemos poner:

<ul>
<?php $lastposts = get_posts('numberposts=5');
foreach($lastposts as $post) : setup_postdata($post); ?>
<li>
<a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>

O recurrir a usar la función wp_get_archives un poco personalizada de esta forma:

<?php wp_get_archives('type=postbypost&limit=20'); ?>

Incluso podemos usar la función query_posts() para mostrarlos de esta forma:

<ul>
<?php query_posts('showposts=7'); ?>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>

En todo caso cualquiera desplegará un resultado igual, despues sólo queda jugar con el CSS y hacer que luzca como deseemos, aunque en lo personal siempre prefiero el primero sobre los demás.

Hace tiempo que el blanco y el negro ya me habían cansado, pero por más que buscaba un theme no daba con ninguno que se ajustara a mis gustos por eso hace eso de unas semanas me dijé: porque no hacer un theme desde cero;  y ese fue el inicio hasta llegar a lo que ustedes están viendo.

En una traducción literal Renovatio significa renacimiento y es lo que yo buscaba con el nuevo theme, un aspecto más usable y con colores más agradables, espero haberlo logrado, igualmente he de decir que aprendí mucho haciendo este theme y me dió algunas grandes ideas para elaborar algunos artículos en el futuro.

De créditos y cambios

• Los iconos son de We Function, bastante vistosos he de decir.
• Cambios en la tonalidad, como dijé ya estaba relativamente cansado del Black and White, por eso opté por tonos azules y grises, espero que como a mí les de una sensación de tranquilidad y tenga un buen contraste para la lectura.
• Añadí una sección de en la sidebar donde se mostrarán los artículos sobre WordPress que se vayan publicando en el blog, un tema que me empezó a interesar aún más, principalmente en la sección de hacks y diseño de themes.
• También se implemento una authorbox, más adelante diré como lo hicé, una barra de navegación con efecto Lavalamp y a grandes rasgos ese fue el cambió, me hubiera gustado hacer más pero el Photoshop es una asignatura pendiente en mi caso.

Y aunque me aseguré de pulir lo más que pude el diseño estoy seguro que todavia quedan algunos cabos sueltos,  y es algo en lo que ojalá me puedan ayudar ya sea mediante un comentario o contactandome directamente.

Bueno eso es todo, espero les guste y a retomar el tiempo perdido que sé que no he escrito mucho, pero es porque se lo dedicaba al theme en fin ya me diran que tal les parece el nuevo theme Renovatio de Kernel Web.

Incluso para los que no somos profesionales en este campo pero tenemos algún emprendimiento en internet es bastante correcto que nos esforzemos por crear un sitio con accesibilidad y usabilidad total, ¿cómo lograrlo?, a continuación algunos recursos y consejos.

1.  Sigue las reglas y los estandares

Lograr que un blog o sitio sea cross browser no es fácil, pero el seguir los estandares de la W3C ayuda bastante a cumplir el objetivo.

Usable y Accesible

2.  No uses hacks, mejor usa Fixes

Lo puedes hacer manualmente o usando IE6 CSS Fixer.

3.  Optimiza tus imágenes

No es secreto que el tiempo de carga influye mucho para los usuarios; y es que son las imágenes las que más demoran en mostrarse, por ello es bueno siempre bajarles unos bytes con algún software para optimizar imágenes o herramientas web como Smush.it.

4. No te olvides del iPhone

Furor que causo el 3G y el iPhone es ya uno de los medios de entrada a internet que más adeptos gana dia a dia, por eso no es bueno olvidarse de él, checa como se ve tu sitio en el iPhone y si tienes un blog corriendo con WordPress optimizalo para el juguete favorito de Apple.

5. No uses tanto Flash y JavaScript

Dado que son lenguajes que para su interpretación y lectura son necesarios algunos reproductores y habilitación de opciones es recomendado usarlos sólo cuando es necesario, así se evita la falta de elementos en tu sitio web si el usuario no cuenta con tales cosas y se aligera un poco más el peso final de la página.

Kernel Web en el iPhone

6. Describe tus elementos

Imágenes con el atributo ALT, enlaces con title y buen anchor text, descripciones de videos y multimedia.

7. Genera contenido legible, usable y escaneable

El contenido lo es todo, más alla de si el diseño es bueno, el contenido es el rey, hacer contenido usable y de calidad es una directriz no escrita, pero que es bueno seguir para hacer de la web una herramienta optima y completa.

8. Prueba y Comprueba

Nada más sabio que el arreglar y romper, tanto para aprender, como para mantener una website en optimo estado, usa los recursos que la web de brinda para asegurarte de que tu trabajo esta bien hecho:

• Hera, completa y muy buena herramienta que rescate de las entrañas de Webmaster Libre una suerte haberla visto.
• CrossBrowserTesting, visualiza tu website en tiempo real en todo navegador.
• IE Collection, todos los enemigos de los estandares (IE6,7 y 8 ) en uno sólo , para comprobar si se ve bien tu sitio y nada más.

Y aunque en el pasado recomendé una gran herramienta llamada Browsershots, desde que descubrí esta no la cambio por nada; dado que a diferencia de la primera que sólo te regresa un screenshot, CrossBrowserTesting te permite visualizar tu sitio web en cualquier navegador sin instalarlo en tu PC y hasta interactuar en vivo con él.

Eligiendo la configuración que desees, tienes la oportunidad de testear tu blog o sitio web sobre cualquier browser y hasta elegir sobre que sistema operativo estará  instalado, logrando así visualizar Firefox en Macintosh o hasta el arcaico Internet Explorer 6 en Windows XP.

Sin duda la mejor forma de checar el diseño y la programación de tu sitio sin limitaciones de hardware o software, asegurando que el usuario tenga una experiencia agradable y sin complicaciones.

Enlace | CrossBrowserTesting

Tu web en todos los browsers

Por lo que puedes recurrir a 2 cosas, ir chequeando tu diseño manualmente o usar Browsershots, el cual se encargará de hacerlo por ti, pues el servicio se encarga de enviar consultas a diferentes computadoras que tienen instalados determinados navegadores y estos a su vez devuelven una captura de pantalla de la apariencia del blog en ese navegador.

El proceso es sencillo, escribes la URL de tu página, eliges los browsers en los que quieras visualizar tu sitio y esperas un corto periodo de tiempo en lo que te Browsershots te devuelve las capturas de pantalla.

Themesbase, repositorio de themes

Si estas buscando una plantilla para tu blog, web o foro, Themesbase te puede ayudar a encontrarla.

Ya que se trata de un repositorio de themes gratis para todos los gustos y CMS, en el sitio se pueden encontrar desde themes para WordPress hasta plantillas para Vbulletin o phpBB, que son sistemas de creación de foros, Joomla o PHP-Fusion; y plataformas y CMS no tan conocidos como: Website Baker o Tiny Portal.

El sitio esta muy bien diseñado y organizado, puedes buscar tus templates explorando las categorías o utilizar el buscador que tiene integrado la web, además de que hay un foro de soporte, en el cual puedes hablar con los distintos creadores y diseñadores de estos para que te brinden ayuda o sepas si pronto habra una actualización de alguna.

Así que ya lo sabes, si quieres darle un lavado de cara a tu sitio web o foro, Themesbase es para ti, un sitio en el que podrás encontrar los mejores themes gratis para cualquier CMS o plataforma de foros.

Proudblack: Excelente theme para un blog personal, los tabbers y el footer son sin duda los que más resaltan.

Excelente Theme para Blog Personal

Masaahan: La verdad que cuando lo vi, dije: que theme!, si, algunos diran: este ya tiene una fijación por los themes jaja, pero es que la verdad es un theme espectacular, bastante premium si me preguntan, pero gratuito y compatible al 100% con WordPress 2.7.

Theme Maasahan para WordPress

Freemium: Fantastico template, Freemium, su nombre lo dice todo.

Freemium Theme

Typebased: De pago en sus comienzos gratuito en estos tiempos, sus listas de 2 columnas en la sidebar son lo que más me gustan, un theme que no pasa de moda.

Typebased de Woothemes

SimplePro: Otra forma de decir, aquí esta un theme profesional completamente gratis.

Simplemente PRO

Magazeen: Que decir de esta plantilla, hecha por WeFunction a petición de Smashing Magazine.

Magazeen Template

Evelon: De WP Dots nos llego el theme, bastante minimalista y con colores agradables a la vista.

Evelon

Vexed.Box: Bonita plantilla de 3 columnas, en la que se ve que su creador si aprovecho todo el espacio disponible.

Vexed Box

iNove: Uno de los themes para WordPress 2.7 más descargado hasta ahora, simple, elegante y trae integradas todas las bondades de la versión Coltrane de este CMS, que más se puede pedir.

iNove

SimpleX: Simplemente un gran template que con su estilo hace honor a su nombre.

Un simple theme (?)

Okinawa Sky: El theme esta hecho por un diseñador relativament nuevo, pero en mi opinión muy bueno, si buscan un template verdaderamente espectacular este sin duda es una opción,  junto con el Dramaga del mismo autor.

Okinawa Sky

Bueno y eso es todo, para mí 10 themes WordPress que deberían ser  premium, todos compatibles con WordPress 2.7 y unicos diseños, disfrutenlos y si conocen otro buen theme no duden en comentarlo.