En esta ocasión no voy a dar ninguna nueva noticia, simplemente quería compartir una herramienta muy copada para hacer themes WordPress, y un machete con las funciones para imprimir y ahorrar tiempo cuando vayamos a darle nuestro toque final al theme.

WordPress Cheat Sheet

A través de AyudaWordPress siempre obtengo recursos fundamentales para esta plataforma, como en este caso llego al machete (chuleta) con las funciones de WordPress en un PDF prolijo y listo para imprimir. Visualizala completa en el sitio del autor

WordPress Theme Generator

Uno de los mejores generadores de themes online que pude ver. Ingresá a pixopoint.com/generator, verás en el texto que tiene dos links para activar o desactivar el generador de themes.

Generator on
Generator off

Una vez que des click en “ON”, comienza la creación del theme. La pantalla quedará dividida en dos, teniendo a la izquierda la barra con funciones para administrar la creación del theme y a la derecha una vista, en vivo, de nuestro trabajo.

El menú nos indica que tenemos templates, o sea diseños ya realizados, sobre los que podemos trabajar para hacer el nuestro propio. Overall nos permite manejar aspectos sobre la totalidad del theme (el fondo de tu sitio, por ejemplo), le siguen botones que tienen nombres de las plantillas a modificar, Posts corresponde a single.php y a page.php, en Headings deberemos definir el aspecto visual de <h2> <h3>, etc. En Forum se abre un panel de opciones para exportar nuestro estilo de modo de poder ser utiizado por bbPress. Widget Areas nos permite definir en dónde estará permitido agregar widgets, y finalmente upload/save nos deja llevar nuestro trabajo a casa.

Para descargar el archivo .zip conteniendo los archivos php y css de nuestras plantillas, tenés que seleccionar Export WordPress o bien Export bbPress si es para el foro.

Se complica un poco ir armando el theme con archivos de imagen, ya que no podemos subirlo al servidor de ellos con una cuenta Free, pero igualmente es MUY completo. Otra cosa interesante es que nos permite agregar breadcrums (indica la ruta de donde estás debajo de la navbar) y también cambiar a estilo magazine. Si necesitás acceder a funciones más avanzadas u obtener soporte, las cuentas premium cuestan desde unos 5 dólares por semana en adelante. ¡Nada mal!Y ahora veamos los templates que nos ofrecen para empezar a trabajar.

Basic Blue

Revolution Generated

Hellish Simplicity

Aqua Vaccinium

Yoghourt

Es una muy buena variedad de themes para que puedas comenzar con tus creaciones sin necesidad de saber sobre código y dandote una oportunidad a que empieces a aprender pero viendo los frutos con rapidez.

Al subir una imagen para acompañar un post en WordPress, la plataforma genera tres tamaños de imagenes (miniatura, medio y grande). Nosotros podemos utilizar estas imagenes para llamarlas desde una plantilla home.php para introducirlas en el loop de las noticias y lograr un estilo “magazine” sin mayores complicaciones.

La pequeña aplicación está pensada para desarrolladores o meros fanáticos de la plataforma que gustan de personalizar los themes. Tan sólo debemos agregar lo siguiente al loop que deseamos acompañar de una imagen:

En resumen, con este plugin podés:

Como si fuera poco, Darío nos deja un demo francamente muy bueno de como funciona el plugin y las diferentes opciones de personalización que nos ofrece. Click acá para ver el demo!

La instalación es típicamente sencilla y comprende de descargar el plugin desde wordpress.org, subirlo a /plugins/ de nuestro servidor, activarlo desde la solapa de plugins y configurarlo desde options > WP Smart Image Menu . Luego elegí en donde insertarás la llamada a la función desde tu theme.

Fuente DarioFerrer.com - ForosDelWeb.com

Finalmente Emanuele Feronato terminó el trabajo sobre WordPress que comenté hace poco para colocar juegos flash y además terminó compartiendo una modificación al theme Gallery (Child de Thematic) para redondear la idea.

Podemos ver que agregó una prolija sidebar y modificó convenientemente el footer para lucir puntajes y valoraciones de los usuarios sobre los juegos.

El plugin ahora nos muestra que juegos están publicados y si los hosteamos nosotros o MochiAds, si el juego es nuevo y sin publicar o está sin publicar porque así lo decidimos. Tenemos mucho mas control sobre los juegos que se publican y más información.

Demo del Theme y del Plugin

Descarga e info del Plugin

Descarga e info del Theme

El theme premium Sofa Yellow, a simple vista es un típico theme estilo Magazine en color blanco, con tres columnas, etc. En realidad es eso y ADEMAS es un theme preparado para hacer que tu sitio se convierta en un CMS que permite a cualquier usuario registrarse y publicar artículos pagando una tarifa o de modo gratuito con cierta limitación. Pensemos en que esto puede utilizarse, tras algunas modificaciones, para anuncios clasificados, o publicidad de otros sitios.

El theme viene con modo de publicación Pago y gratuito (solo trabaja con Paypal). El usuario tiene una sección para subir sus artículos que no es la que utilizamos nosotros sino que es una totalmente generada para esta cuestión:

El posteo puede ser o no automático, y el precio del mismo puede ser completamente configurado tanto en cantidad como en moneda. También podemos indicar cuanto tiempo estarán activas las entradas de los usuarios, pudiendo el usuario “comprar” una renovación del período que desea mantener su post visible.

El modo gratuito permite que configuremos el máximo de entradas por usuario a subir, como un modo de evitar el spam.

El theme es muy completo, con todas las funciones que podemos esperar de los themes modernos y con la calidad que nos ofrece ThemeForest.

Podemos ver los detalles del Theme aquí y un demo online aquí.

Desde annalinnea.net nos liberan un recurso mas que interesante para quienes diseñan sus propios themes. Son SEIS themes en blanco con diferentes disposiciones de Sidebars, headers, etc.

Cada theme tiene su propia miniatura en png como para que podamos seleccionar con rapidez el deseado y comenzar a armar el theme. Hay que destacar que son para wordpress 2.7 y que vienen con el sistemita de comentarios anidados ya resueltos.

En cuanto a la licencia, es totalmente libre para todos, y como pienso hacer uso de este recurso creo que lo mínimo que puedo hacer es devolver una nota al sitio original.

Descargar

Hermoso theme que da absoluta prioridad a tus imagenes. Es totalmente gratuito y está permitida la modificación en cualquier aspecto del mismo. La idea detrás de “Viewport” es la de exaltar las imagenes y romper un poco la forma básica de los blogs, colocando al contenido como un mero complemento de la imagen.

El unico punto flojo del que advierte el autor, radica en que alguna imagen puede no mostrarse en IE 6, pero teniendo en cuenta que ya solo un 20% de los usuarios totales de Internet Explorer utilizan dicha versión podemos inferir que en muy poco tiempo ya no habrá que preocuparse en absoluto de esto.

Demo del Theme (utilicen las flechas laterales)

Descarga del Theme en Smashing Magazine

Este theme es modificación de Indomagz de magznetwork y cuenta con aprobación de su autor para ser redistribuido bajo el nuevo formato. El soporte del theme Simple Tabloid 2 se hará acá indefectiblemente, Magznetwork no está al tanto de todas las modificaciones realizadas. El set de íconos utilizado se llama Milky y se puede obtener el set completo en min.frenzy.com. La función de comentarios recientes es de www.g-loaded.eu.

Gracias a Naurgalen y a hectorejch por los aportes!

Para su correcta instalación, tenemos que seguir los siguientes pasos:

1- Subir la carpeta Simple Tabloid 2 a wp-content/themes y darle permisos de escritura (CHMOD 777) a la carpeta “cache” que trae el theme. De este modo puede crear las miniaturas que luego se despliegan en el home del sitio.

2- Habilitar los plugins sugeridos

3- Modificar la cantidad de entradas y las categorías sugeridas para el home del sitio.

4- Opcional: Preparado para usar Custom Search de Google en vez del buscador típico de wordpress.

3.1 Home.php y sidebars

Para modificar la categoría de la que extrae este post, tenemos que buscar en la primera parte de la plantilla el siguiente code:

<?php $recent = new WP_Query(“cat=1&showposts=1″); ?>

Modifiquen “cat=1″ por la categoría que deseen.

La segunda sección de imagenes está compuesta por dos columnas separadas. A cada una le pueden asignar una categoria o bien extraer de la misma pero indicando que debe exceptuar cierto numero de posts para no repetir:

<?php $recent = new WP_Query(“showposts=3&offset=1&cat=1″); ?>

En esa linea le indioco que busque 3 posts, excepto el primero de la categoria uno. Si desean colocar otra categoria, modifiquen la linea a algo como:

<?php $recent = new WP_Query(“showposts=3&cat=2″); ?>

Repitanlo con el codigo siguiente, que verán de este modo como viene por defecto:

<?php $recent = new WP_Query(“showposts=3&offset=4&cat=1″); ?>

La cuarta parte del home, extrae miniaturas y las despliega con el titulo debajo. Cambien la categoría a la deseada.

<?php $recent = new WP_Query(“cat=1&showposts=6″); ?>

En el home, van a ver en cada caso este código:

<h3 class=”headtitle”><?php wp_list_categories(‘include=1&title_li=&style=none’); ?></h3>

Esta porción es la que llama al título de cada categoría. Para llamar a la categoría correcta deben cambiar include=1 por el ID de la categoría deseada.

Finalmente tenemos una sección en donde despliega los links a las ultimas entradas por categoría:

<?php $recent = new WP_Query(“cat=1&showposts=5″); ?>

 A esta altura ya saben como cambiarlo y verán que en sidebar.php y sidebar-left.php se repite exactamente igual. La diferencia radica en que los titulos se los dimos a mano modificando este código:

<div class=”sidebartitle”><h3>Noticias Breves</h3></div>

3.2 Recuadro del autor single.php

Verán que en la plantilla single.php existe un recuadro para llamar al avatar del autor y a su descripción.

<div id=”authorbox”>
<strong>Sobre el autor: <?php the_author(); ?></strong>

<div>
<img src=”/autores/<?php the_author_ID();?>.png” alt=”Imagen del Autor” id=”authorpic”/>
</div>

<div id=”authorbio”>
<?php the_author_description();?>
</div>

</div>

Para que funcione correctamente ustedes deben colocar una carpeta en el raiz de su wordpress llamada “autores”  dentro de él colocar un avatar en png. El archivo debe tener por nombre el numero de id de cada autor. Ej el del admin se deberia llamar 1.png.

Si no querés usarlo, borralo (o comentalo) y descomentá esta sección:

<!–     <span class=”post-author”><?php the_author(); ?></span>
–>

Para ver los ID de categoria y de usuarios, podemos usar el plugin reveal-ids-for-wp-admin-25 que se deja recomendado instalar y estará en el zip de descarga.

Para el uso del theme

1- Escribimos nuestro artículo e insertamos nuestra imagen haciendo uso de la galería común del wordpress. Desde la vista de subir imagen nos dará una url que debemos copiar y pegar abajo de todo

Esto aparece al hacer scroll hacia el inferior de la página para crear entradas en wordpress al estar activado el theme:

Con esto debería bastar!

Vista completa del theme

Demo online

Soporte y Descarga en el foro

Cuando una plataforma comienza a gustarte y te parece que te vas a quedar trabajando sobre ella largo y tendido, lo primero que puede rondar por tu cabeza es “Cómo puedo hacer un theme desde cero para esto?”. En el caso de Wordpress, el entorno que nos ofrece para editar sus archivos y poder ver al instante como se reflejan esos cambios nos facilitan la tarea bastante.

Por mas que veamos mucho php en los templates y eso nos acobarde, recuerden que solo es necesario saber un poco de html y css, o bien tener ganas de ir leyendo al respecto. Voluntad y una ventana del navegador dispuesta para el googleo son los dos unicos requisitos indispensables.

Veamos algunas guías:

How to design your own wordpress theme : Explica de modo sencillo como diseñar un theme. Está en inglés, no se asusten cuando vean cosas en alemán. Proveen de un blank theme para trabajar sobre él, explican la base y sirve para practicar.

Themes wiki.org tiene un tutorial mas extenso, en inglés, en donde amplian un poco mas sobre cada template y además nos indican como hacer una sidebar “widget ready”.

Wordpress Theme Generator Es una aplicación online que nos permite generar themes sencillos, a la par que vemos como se reflejan los cambios que efectuamos. Al terminar de trabajar podemos hacer una última preview y finalmente guardar el trabajo. Inmediatamente nos dan los links de descarga a cada template o bien al conjunto de los mismos (o sea, el theme completo). Es interesante si lo tomamos para aprender.