ago/090
Cómo crear temas para WordPress?
De un tiempo a esta parte WordPress se ha convertido en una de las plataformas de blogs y CMS más populares. Una de las principales razones de este éxito, es su sistema de plantillas/temas (templates/themes). De hecho, en Internet, se pueden encontrar miles de temas WordPress gratuitos, sin embargo, si deseas un tema verdaderamente único, tendrás que crear el tuyo propio, ya sea pagando o programándolo.
Este artículo te dará un conocimiento básico de la estructura de temas en WordPress.
Lo básico
Los temas WordPress estan compuestos por un conjunto de archivos (html, estilos, imágenes) que definen la apariencia de tu blog. Se compone de archivos de plantilla, funciones, imágenes y tags. Para instalar un tema de WordPress, sólo tienes que subirlo a tu servidor y activarlo en el panel de administración del mismo.
Estructura de las páginas
Por lo general, una página WordPress está compuesta por un encabezado, una barra lateral, el contenido y el pie de página. Habitualmente, los elementos de esta estructura están separados en archivos independientes los cuales podrás incluir en tus plantillas. Pueden existir más elementos en este estructura, como podrían ser otras barras laterales, espacios destinados a publicidad o cualquier otra cosa que te puedas imaginar.
Archivos de plantilla
En esta imagen se puede apreciar la jerarquía de archivos dependiendo de la página que se esté visualizando. Podrías utilizar únicamente la página “index.php” con su correspondiente hoja de estilos (css), pero estarías perdiendo el potencial de personalización y de lograr un tema más amigable.
Loops
<?php if(have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
En WordPress, los loops (iteraciones) se logran con un conjunto de funciones utilizadas para visualizar los posts y cualquier cosa relacionada con éstos (título, etiquetas, autor, categorías). Para utilizar esta funcionalidad, WordPress provee información bien documentada como podrán encontrar aquí y aquí. Para un uso más avanzado, como por ejemplo loops anidados en la página principal, lo mejor es buscar en internet (aquí les dejo una búsqueda).
Template Tags
<?php get_header() : ?>
Los Template tags son pequeños fragmentos de código PHP que se utilizan para desplegar información en el sitio web.
Por ejemplo “<?php bloginfo(‘url’) ?>” mostrará la url de su sitio, en este caso “http://www.gastonmarrero.com“. WordPress cuenta con una muy buena documentación al respecto que podrán encontrar aquí. Cuando se incorporan plugins a la instalación de WordPress, éstos podrá añadir template tags particulares.
Functions
El archivo “functions.php” no despliega ninguna información particular en la pantalla, sino que simplemente agrupa todas las funciones utilizadas por el tema. Aquí y aquí pueden encontrar algunos ejemplos de uso.
En una entrada posterior me extenderé en el uso de cada uno de estos componentes.
Artículo original (en inglés)
http://designreviver.com/uncategorized/wordpress-theming-for-beginners-an-introduction/
ago/090
Layouts logrados 100% con CSS
Quienes peinamos canas en la programación web, recordaremos que la estructura de las páginas web se armaba en base a tablas html (TABLE/TR/TD). Era, y para mi sigue siendo, la única forma de lograr exactamente la estructura que queremos.
Ahora bien, de un tiempo a esta parte, se ha desalentado el uso de esta técnica y reemplazado por el empleo de elementos DIV más el complemento de CSS. Una vez que le agarrás la mano, resulta muy sencillo de implementar y, lo mejor de todo es que, te da la flexibilidad de cambiar todo el diseño con tan solo tocar el CSS.
Lo que les quiero presentar hoy, es un sitio web en el cual podremos encontrar una gran cantidad de layouts predefinidos (varias columnas, varias filas, distintos anchos, etc.), los cuales podremos usar en nuestros desarrollos.
Por más información: http://layouts.ironmyers.com/
jul/090
CSS Hell !
Quienes desarrollamos/diseñamos sitios web, nos encontramos a diario con lo dificil que resulta organizar de una manera eficiente el contenido de nuestros CSS.
¿Repito el font type en distintos bloques o los agrupo en una única sentencia? ¿Cómo puedo hacer para reutilizar el código? ¿Cómo definimos los colores, con # o RGB?
Si pudieramos dotar al CSS con funcionalidades de lenguajes de programación, seguro la definición de constantes, variables, clases, el uso de sentencias anidadas y operaciones aritméticas tendrían su utilidad.
Bueno, si quieren eso, les recomiendo conocer LESS (http://lesscss.org).
Acá les dejo un ejemplo de su sintaxis.
Vale la pena aclarar que LESS no es un estandar de la web, por lo que no puede usarse directamente en nuestros sitios.
Una vez que tenemos generado nuestro archivo.less, debemos transformarlo a formato .css.
La única contra que tiene (por el momento) es que no tiene su versión para Windows.
jul/090
Qué fuente utilizo?
Quien diseña/desarrolla sitios web, con frecuencia se cuestion el tipo de fuente a utilizar en sus trabajos y las alternativas a las clásicas Arial y Verdana.
De pura casualidad di con el siguiente sitio web que me parece extremadamente útil y además es muy simple de usar.
Básicamente, arma un listado con todas las fuentes que tenemos registradas en nuestro PC y nos permite visualizar el texto que querramos con dicho formato, pudiendo cambiar facilmente a otros tipos de fuente.
Por más información: http://myfontbook.com/app
