Un Blog Más

FLEXGS - Tema visual para WordPress
VERSION 3.2.1 (Segundo update)

1. HISTORIA

En una muy temprana primera instancia, FlexGS surge de una modificación de una de las plantillas predeterminadas de Blogger, Denim. Luego, al migrar a Blogsome y elegir GreenTrack como plantilla base, al adaptarla para que se parezca a la del servicio anterior indefectiblemente tomó rasgos de su nueva madre. También, y como ya venía usando, tiene algunos toques CSS de Blue-k2, dado los párrafos modestos pero atractivos que emplea para resaltar cosas importantes.

La primera versión fue la 3.1 (y no 1.0 o 0.1) dado los continuos cambios de diseño que tuvo desde su versión inicial, sin importar que realmente es esa la primera que publiqué oficialmente.

2. CARACTERISTICAS

La versión de WordPress tiene como base GreenTrack 2.1. Desde la misma, se actualizaron algunas funciones de WP que habían quedado obsoletas y se cambiaron otras para hacer compatible a la plantilla con las versiones 2.3 y posteriores. Se tradujo el tema al castellano completamente (creo), y se lo hizo validar en situación inicial como XHTML 1.0 Estricto (y tengo visto que XHTML 1.1 también tentativamente).

También se agregó el soporte para “widgets”, que originalmente no poseía. Aunque la barra lateral puede modificarse tranquilamente desde el archivo sidebar.php siguiendo el ejemplo de los ítems predeterminados, o insertando HTML puro. Uno de los últimos pasos fue modificar el fondo por completo para que tenga el aspecto de la plantilla predeterminada de WordPress (basada en Kubrick), aunque en un ancho mayor (optimizada para 1024×768 o más). Luego de un par de horas también pude hacer que sea compatible con IE7, aunque no lo es con IE6 por cuestiones de transparencia de imágenes y en general con la hoja CSS (dado el raro entendimiento de la misma que hace el navegador).

A continuación describo las capacidades CSS que posee, que tomé de Blue-k2 (o en
las cuales me inspiré).

<p class="green">Texto centrado con fondo verde y símbolo relacionado a downloads</p>

<a class="blue" href="http://hernaaan.com/archivos/temaswp/flexgs-3.2.1.zip">Enlaces en negrita de color azul (para usarse con párrafos "green")</a>

Texto centrado con fondo verde y símbolo relacionado a downloads
Enlaces en negrita de color azul (para usarse con párrafos “green”)

<p class="blue">Texto centrado con fondo azul y símbolo relacionado a enlaces web</p>

Texto centrado con fondo azul y símbolo relacionado a enlaces web

<p class="yellow">Texto centrado con fondo amarillo y símbolo relacionado a información importante</p>

Texto centrado con fondo amarillo y símbolo relacionado a información importante

<p class="gray">Texto monoespaciado con fondo gris y símbolo relacionado a código</p>

Texto monoespaciado con fondo gris y símbolo relacionado a código

<p class="orange">Texto pequeño con fondo naranja y cara pensante, destinado a aclaraciones o pensamientos</p>

Texto pequeño con fondo naranja y cara pensante, destinado a aclaraciones o pensamientos

Otras características CSS corresponden a la alineación de los elementos. Con el atributo class="center" pueden centrarse párrafos, imágenes, etc. Y con el atributo class="right" la alineación es a la derecha.

Ejemplos:

<p class="center">Párrafo centrado</p>

<p class="right"><img src="http://hernaaan.com/wp-content/themes/flexgs/images/imp.png" alt="Imagen a la derecha" /></p>

3. PERSONALIZACION

Incluyo dentro de la carpeta “images” los archivos header-base.png y header-base220.png para poder hacer encabezados con imágenes personalizadas sin mucho esfuerzo. El resultado final debería guardarse como header.jpg dentro de la misma carpeta (sobreescribiendo al original) para obtener un resultado inmediato. Con un editor como GIMP no debería tomar más de 5 o 10 minutos.

Otro dato del encabezado es la posibilidad que de desee mostrar una imagen, pero sin el texto del título y/o la descripción del blog. En ese caso, puede modificarse a gusto desde el archivo style.css. Tanto en #header h1 como en #header .description hay una propiedad visibility. Los valores pueden ser visible para ser visto, o hidden para no serlo.

En el caso de mostrarse el texto, la alineación puede cambiarse desde #header. Dentro de la propiedad text-align, los valores pueden ser left (para izquierda), center (centrado) o right (a la derecha).

Como último dato, menciono la compatibilidad con dos plugins que me parecen interesantes.

I) Gravatar

Gravatar es la abreviatura de Globally Recognized AVATAR, y es un servicio que hospeda avatares personalizados a cada persona que registre su email para mostrarlos en cada sitio Web que los invoque. FlexGS tiene soporte casi nativo para el plugin de gravatar.com. Personalmente lo uso, pero por motivos de compatibilidad tuve que deshabilitarlo para las instalaciones de plantillas en plataformas nuevas. Sin embargo, configurar el plugin es bastante fácil. Solamente hay que reemplazar en el archivo comments.php la línea comentada con "Insertar código PHP plugin Gravatar", y luego descomentarla (quitar <!‐‐ y ‐‐> de los extremos).

Código PHP predeterminado Plugin Gravatar:
<?php gravatar('', 50) ?>

Dirección Web Plugin Gravatar:
http://site.gravatar.com/site/implement#section_2_2

NOTA: Para todos los que quieran soporte para Gravatars, hayan instalado WordPress 2.5 y no quieran tener un plugin activo, ésta versión de WP permite habilitarlos invocando el siguiente código PHP (reemplazando toda la línea comentada para Gravatar en comments.php):
<?php echo get_avatar( get_comment_author_email(), '50' ) ?>

II) BrowSniff

BrowSniff es un plugin que sirve para identificar el navegador web y el Sistema Operativo de las personas que comentan en las entradas. FlexGS está configurada para posicionar la información al final de cada comentario, y en una fuente más pequeña. Lo que hay que hacer una vez habilitado el plugin es modificar el archivo comments.php. En donde dice "Insertar código PHP plugin BrowSniff" hay que insertar el código brindado más abajo, y luego se debe descomentar la línea (quitar <!‐‐ y ‐‐> de los extremos).

Posee la opción también de mostrar las imágenes de las dos variables (navegador y SO), pero por gustos personales están deshabilitadas. Para ver cómo configurar esta característica, basta con dirigirse a la web del autor.

Código PHP predeterminado Plugin BrowSniff:
<?php pri_print_browser('Usando ', '', false, 'desde'); ?>

Dirección Web Plugin BrowSniff:
http://priyadi.net/archives/2005/03/29/wordpress-browser-detection-plugin/

4. VISTA PREVIA

5. INSTALACION

Simplemente copiar la carpeta flexgs a /wp-content/themes/ con tu cliente de FTP o Web-FTP preferido. Si no tenés uno, te recomiendo FileZilla, al ser Software Libre operable tanto en Windows como GNU/Linux. El sitio web es http://filezilla-project.org/

Enjoy!

6. REGISTRO DE CAMBIOS

3.2.1 - 18/05/2008

• Optimización del archivo de funciones
• Hacks CSS especialmente para IE
• Rediseño del modo de navegación (categorías o fecha)
• Reorganización de la hoja CSS
• Mejoras varias en el código

3.2 - 20/04/2008

• Compatible con instalaciones de WordPress en otros directorios que no sean el root de un dominio o subdominio
• Compatible con instalaciones en las que la dirección del blog sea distinta a la ubicación de los archivos de WordPress
• Compatible con WordPress 2.5
• Corrección de visualización de las imágenes de fondo
• Mejoras en la visualización con IE7
• Ajuste del tamaño de fuentes (interoperabilidad entre navegadores)
• Actualización de la barra lateral
• Rediseño de la planilla de contacto
• Optimización de la hoja de estilos
• Mejoras varias en el código

3.1 - 25/02/2008

• Versión inicial
• Actualización de funciones PHP de WordPress a la rama 2.3
• Validación inicial como XHTML 1.0 Estricto
• Soporte para Widgets
• Plantillas especiales para páginas de Archivos y Contacto

7. LICENCIA

La plantilla y las imágenes que emplea quedan bajo la licencia Atribución-No Comercial-Compartir Obras Derivadas Igual 2.5 Argentina de Creative Commons.

Resumiendo, lo que se puede hacer:

• Copiar, distribuir, exhibir y ejecutar la obra.
• Hacer obras derivadas.

Aunque bajo las siguientes condiciones:

• Atribuir la obra al autor o licenciante.
• No usar la obra con fines comerciales.
• Si se altera, transforma o crea sobre la obra, sólo se puede distribuir la obra derivada resultante bajo una licencia idéntica a ésta.

Para más información visitar:
http://creativecommons.org/licenses/by-nc-sa/2.5/ar/

8. DESCARGA

FlexGS versión 3.2.1

También tienen que ver con esto:

• Status al 20/04
• Que sencillo
• Que quilombo!
• Web 2.0 (parte 2)
• Web 2.0 (parte 1)

Trackback a esta entrada | Suscribite a los comentarios a través del Feed RSS