sIFR y WordPress: tipografía de lujo para nuestro Blog

Habitualmente, la gama de fuentes entre las que podemos escoger para el diseño web, se limita a un puñado de clásicas familias bién conocidas : Georgia, Arial, Verdana, acaso Times New Roman.

La sencilla razón detrás de esta limitación, es que nuestros navegadores no están aún en condiciones de librar por sí solos más que las fuentes que nuestro internauta disponga ya instaladas en su ordenador, a partir del momento en que accede a la página que le hemos diseñado.

Así, una fuente como Helvetica puede salirse en algunas ocasiones de lo común, de modo que podemos encontrarnos con bastantes personas que casualmente no la tienen instalada, leyendo de pronto en Arial, o en Verdana, o en la fuente que por defecto nosotros hayamos especificamos en nuestra hoja de estilo.

body{
font-family: Helvetica, Arial, Verdana, sans-serif;
}

¿Se trata exclusivamente de un problema técnico? No únicamente: mientras que en la nueva versión de CSS3 podremos linkar desde la hoja de estilo a archivos de fuente específicos (de nuestra elección), consiguiendo implantar fuentes que el usuario no tenga necesariamente instaladas, las “Foundries” que diseñan y guardan derechos sobre tal o cual fuente se reservaran aún el aceptar o no que su producto sea utilizable por nosotros gratuitamente en tanto que diseñadores.

De este modo, cuando el conjunto de navegadores soporte el CSS3 (por el momento, sólo Safari lo hace), tendremos que confiar en que la fuente que nos gusta es de uso gratuito.

sIFR al rescate

En este tutorial vamos a mostrar cómo integrar sIFR con WordPress rápidamente, para disfrutar de la tipografía que queramos para nuestros encabezados, y siempre dentro del marco legal que los diseñadores de fuentes proponen respetar.

Como algunos sabéis, sIFR reemplaza ciertos tags en nuestro HTML con pequeñas películas de Flash, una tecnología capaz de renderizar, para el usuario, cualquier fuente que queramos, y ello de forma legal – puesto que Flash es una tecnología que no distribuye la fuente como archivo explotable, sinó como vídeo.

Como nota, siempre es bueno saber que un pequeño porcentage de internautas no dispondrá de Flash en su navegador, o lo mantendrá desactivado, ante lo cual sIFR simplemente no entrará en acción y los encabezados se mostrarán normalmente (con Georgia, Verdana, o la fuente que en su momento especificamos en nuestra hoja de estilo).

El código mágico que tendremos que utilizar, se lo debemos a Pat Dryburgh, un diseñador de Canadá que amablemente publicó la idea en su blog.

Lo primero que tenemos que hacer, es bajar la última versión de sIFR, de su base de datos. La base de datos no está formateada, nosotros simplemente bajaremos el primer archivo de la lista, es decir, la última versión.

Modificando los archivos

Una vez en el Escritorio, lo vamos a descomprimir y borrar la demo y el changelog, que no necesitaremos.

Entraremos entonces en el dosier llamado “flash” y abriremos sifr.fla.

(Si no tenemos el programa, siempre podemos ir a sIFR Generator, subir una de nuestras fuentes preferidas, y recibir el archivo en .swf, que es cuanto necesitamos.)

Clicamos ahora en el rectángulo blanco, seleccionamos el texto, y, con él aún seleccionado, le daremos la fuente que nos apetezca a partir del cuadro de diálogo inferior.

Si queremos añadir símbolos y alfabetos especiales, ahora es el momento : una función a la derecha de las tipografías nos lo va a permitir.

Vamos ahora a exportar esa película de Flash. Archivo -> Exportar -> Exportar Película.

Usaremos los parámetros por defecto y salvaremos el archivo con el nombre de la fuente escogida, por ejemplo en nuestro caso “rockwell”, y especificaremos salvar el archivo en el Escritorio.

Vamos a recuperar ahí el archivo, y a emplazarlo dentro de la carpeta que abrimos en primer lugar, esto es, “flash”.

Iremos ahora a la carpeta “js” y abriremos sifr-config.js con nuestro editor de texto favorito.

Seleccionaremos todo … y lo borraremos.

Pegando nuestro particular sifr-config.js

Ahora tenemos que recuperar el nombre que le dimos a nuestra película de Flash exportada. En nuestro ejemplo, será rockwell.swf, de modo que aquí, en sifr-config.js, lo usaremos correspondientemente :

sIFR.activate(rockwell);

sIFR.replace(rockwell, {
      selector: 'h1',
     css: [
        '.sIFR-root { color:#000000; font-size: 3em; }',
        'a {color: #000000; text-decoration: none;}',
        'a:hover {color: #555555;}'
        ]
});

sIFR.replace(rockwell, {
      selector: 'h2',
     css: [
        '.sIFR-root { color:#000000; font-size: 2em; background-color:#F9F9F9 }',
        'a {color: #000000; text-decoration: none;}',
        'a:hover {color: #555555;}'
        ]
});

sIFR.replace(rockwell, {
      selector: 'h3',
     css: [
        '.sIFR-root { color:#000000; font-size: 1.5em; background-color:#F9F9F9 }',
        'a {color: #000000; text-decoration: none;}',
        'a:hover {color: #555555;}'
        ]
});

sIFR.replace(rockwell, {
      selector: 'h4',
     css: [
        '.sIFR-root { color:#000000; font-size: 1.2em;  background-color:#F9F9F9  }',
        'a {color: #000000; text-decoration: none;}',
        'a:hover {color: #555555;}'
        ]
});

sIFR.replace(rockwell, {
      selector: 'h5',
     css: [
        '.sIFR-root { color:#000000; font-size: 1em; background-color:#F9F9F9  }',
        'a {color: #000000; text-decoration: none;}',
        'a:hover {color: #333333;}'
        ]
});

sIFR.replace(rockwell, {
      selector: 'h6',
     css: [
        '.sIFR-root { color:#000000; font-size: 18px; background-color:#F9F9F9  }',
        'a {color: #000000; text-decoration: none;}',
        'a:hover {color: #555555;}'
        ]
});

Salvamos y cerramos. Recuerda que aquí debes incluir el nombre de tu propia fuente escogida. Rockwell es solo el ejemplo que estoy utilizando.

Vamos ahora a renombrar al fin toda la carpeta que contiene a sIFR, con un nombre sencillo, “sifr” mismamente, porque normalmente ella nos vendrá con el nombre de la versión. La vamos a emplazar seguidamente dentro de la carpeta de nuestro tema de WordPress en uso, al lado de la carpeta de imágenes.

Tenemos ahora 3 sub-carpetas dentro de “sifr” :

  1. en “flash”, hemos añadido una película .swf con nuestra fuente escogida.
  2. en “js”, hemos modificado uno de los archivos.
  3. una carpeta llamada “css”, que vamos a abrir.

Iremos directamente al final del archivo, y añadiremos los siguiente :

.sIFR-active h1 {
  visibility:hidden;
  }

.sIFR-active h2 {
  visibility:hidden;
  }

.sIFR-active h3 {
  visibility:hidden;
	}

.sIFR-active h4 {
  visibility:hidden;
	}

.sIFR-active h5 {
  visibility:hidden;
	}

.sIFR-active h6 {
  visibility:hidden;
	}

Este código prevendrá que los encabezados se hagan visibles durante la milésima de segundo en que son reemplazados, lo cual nos puede convenir siempre que sIFR tarde algo más en cargarse.

Vamos ahora hacia el último paso.
Vamos a crear con nuestro Editor de Texto un nuevo archivo, llamado functions.php, o lo abriremos si ya disponemos de él en el tema de WordPress que queremos utilizar.

Functions.php

Vamos a llenarlo con este código.

//sIFR

function sifr_scripts() {
	global $siteurl;
	if (empty($siteurl)) $siteurl = get_settings('siteurl');
	$sifrurl = $siteurl.'/'.'wp-content/themes/NOMBREDECARPETADELTEMA/sifr/';

    /* The xhtml header code needed for lightbox to work: */

	echo '<!-- start sifr scripts -->

	<link rel="stylesheet" href="'.$sifrurl.'css/sifr.css" type="text/css" media="screen">
	<link rel="stylesheet" href="'.$sifrurl.'css/sIFR-print.css" type="text/css" media="print">

	<!-- Added inline JS for mod_rewrite concerns - http://jbradforddillon.com -->

	<script src="'.$sifrurl.'js/sifr.js" type="text/javascript"></script>
	<script type="text/javascript">
		var NOMBREDELAFUENTE = { src: "'.$sifrurl.'flash/NOMBREDELAFUENTE.swf" };
	</script>
	<script src="'.$sifrurl.'js/sifr-config.js" type="text/javascript"></script>

	<!-- sifr scripts -->

	' ;

	}

	add_action('wp_head', 'sifr_scripts');

Si ya disponamos de un functions.php, asegurémonos que estamos pegando el código al final del archivo, antes del fin de la declaración PHP.

?>

Si no tuviéramos un functions.php y lo hemos creado de cero, vamos a añadir tanto al principio como al final del archivo las declaraciones de apertura y cierre correspondientes :

<?php
// código proporcionado
?>

Una vez todo listo, reemplazamos, en ese código, tres elementos :

  1. NOMBREDECARPETADELTEMA
  2. NOMBREDELAFUENTE
  3. NOMBREDELAFUENTE (una segunda vez)

Salvamos y cerramos !

La mayoría de Temas de WordPress tienen, en header.php, una función para albergar código inyectado por nuestros plugins. Es la siguiente :

<?php wp_head(); ?>

Asegurémonos pues que la tenemos nosotros también, en header.php, y justo antes del cierre “head” de nuestro HTML.

Ahora deberíamos ir a ver nuestro Blog, y esperar que todo haya funcionado correctamente.
Para cambiar los colores de sIFR, nos dirigiremos a sifr-config.js.
Notad que yo he puesto las letras en negro, y cambian a gris si son links por los que pasa el cursor.

Es muy cierto que tenemos algunos plugins para WordPress que automatizarían el proceso, aunque a veces puede ser interesante entender lo que está ocurriendo en cada archivo; es así que quería compartir con vosotros este tutorial.

Comentarios
  1. No conocía sIFR, muy interesante e ilustrativo el post, lo paso a favoritos para cuando tenga un rato de investigar y aplicarlo.

    Felicidades Ignacio, gran post ;)

    Escrito el16/08/2009
  2. men muy bien.. todo esta bien jeje.. pero hay una cosa que no entiendo, una vez agregado todo esto, mi blog abre pero por ejemplo los titulos se repiten dos veces, 1 con la version flash y el otro con la fuente tradicional.. cual krees q sea mi error

    Escrito el19/08/2009
  3. Ignacio

    Gracias chicos por los comentarios. Adrian, me dí cuenta que es preciso renombrar el css de sIFR. Hay que llamarlo “sIFR-screen.css”, porque es así que en la función lo nombré (por defecto te viene con otro nombre, “sifr.css”). Naturalmente, con el nombre sin cambiar, la función no lo podía encontrar, y no puedes ocultar los ‘headings’ normales.

    Escrito el19/08/2009
  4. Hola, primero, muchas gracias, esto estaba buscando hace mucho y no sabia como hacerlo, segundo, yo tengo un blog que tiene thumbnails, y a la derecha del thumbnail van los titulos de los post, el problema es que el espacio para los titulos no es muy grande y los titulos cuando son mas largos se cortan, yo quisiera que cuando son largos se hagan parrafos, asi como tiene el blog de Collis Ta’eed: http://thenetsetter.com/blog/

    He estado investigando el css sifr que encontre en su codigo fuente y no encontre mucha info, agradeceria si me podrias enseñar a hacer eso.

    Saludos y Gracias nuevamente.

    Escrito el27/08/2009
  5. Hola Ignacio:

    He conseguido que se vean en flash los p y el h2, los agregue en el header.php de mi tema wordpress.

    Tengo una pregunta, veo bien el primer texto, pero el segundo se repite sin estilo flash, explico:

    con estilo en flash
    e inmediatamente despues se repite
    con el estilo css.

    He revisado que en mi header.php no tenga textos extras. Sabes que puede ser?

    Gracias, Gabriela.

    Escrito el01/09/2009
  6. Ignacio

    @Gabriela, he modificado el código que va en functions.php, para que se cargue adecuadamente sifr.css, que nos esconde el texto normal (y que yo escribí aquí con un nombre equivocado). Voy a corregirlo cuanto antes en el post.

    Si estás reemplazando también los ‘p’ tags, tienes que añadir esto en sifr.css :

    .sIFR-active p{
    visibility:hidden;
    }

    (pero cuidado con reemplazar grandes textos : se hace muy lento)

    @Gonzalo, ya sé a lo que te refieres, yo lo solucioné dándole una anchura a las divs que alberguen los títulos, y quizás un float:left suplementario, lo cual lo puedes hacer desde tu CSS general, sin tocar los archivos de sIFR.
    Para no afectar otros elementos, yo añadiría sólo la anchura :

    .post-title{
    width:340px;
    }

    Manejando el CSS seguro que puedes crear los párrafos cuando el texto es reemplazado.

    Escrito el01/09/2009
  7. gracias voy a tasar

    Escrito el07/06/2010

DEJA TU COMENTARIO


× nueve = 27