Spaghetti Wordpress

L’uso della tipografia è sempre stato un problema per ogni webdesigner. Per creare un sito che sia compatibile con il sistema operativo di ogni utente ci si deve limitare all’uso di una manciata di pochi caratteri che spesso limitano le soluzioni creative. Per ovviare a questo problema sono state introdotte varie tecniche, tra cui la più comunemente utilizzata è quella del cosiddetto “image replacement”, ovvero la sovrapposizione di un immagine al testo utilizzando i CSS, cosicchè tutte le limitazioni possano essere superate, mantendendo però allo stesso tempo la parte semantica da quella grafica separate.

L’utilizzo di questa tecnica ha però i suoi limiti. Come si può facilmente intuire, per ogni parola o frase deve essere creata un’apposita immagine, cosa difficilmente realizzabile con un blog che ha un contenuto dinamico e in continua evoluzione.

Fortunatamente, io e voi lettori utilizziamo Wordpress, e per ogni evenienza c’è un plugin che ci viene incontro.

In questo caso è John Leavitt che ci rende tutti più felici, grazie al suo TTFTitles Wordpress Plugin, con il quale è possibile applicare ai titoli o altri elementi del proprio blog la tecnica dell’image replacemente in maniera automatica senza bisogno di creare le immagini da parte nostra.

Vi mostro subito un esempio che utilizza i font preinstallati per farvi capire meglio (a sinistra la versione “normale” e a destra quella con il plugin “in azione”):

Per installare TTFTitles potete scaricarlo dal sito ufficiale oppure utilizzare il comodo sistema di ricerca e installazione incorporato nel pannello di amministazione di Wordpress. Dopo averlo attivato comparirà una nuova voce chiamata TTF Titles nel menu Appearance, da cui potete modificare la configurazione del plugin. Questa è composta da 4 sezioni che vi spiegherò di seguito nei particolari:

1. Styles

Qui potrete vedere i caratteri e le rispettive personalizzazioni di stile che sono preconfigurate con l’installazione del plugin. Oltre ai due stili predefiniti (che potete comuqnue modificare premendo su Edit), ne potete anche creare di nuovi premendo su Add New Style, dove potete scegliere il carattere che volete utilizzare, il colore, la larghezza e varie altre opzioni per personalizzare il font nella maniera che desiderate.

2. Cache

Nel menu Cache potete modificare la cartella del server dove verranno salvate le immagini, ma soprattutto per quanto a lungo queste debbano essere salvate. Poichè ovviamente ogni immagine occupa un determinato spazio, potrete decidere se eliminare le immagini dai post più vecchi e mostrare solamente il titolo con i caratteri originali. Se avete molto spazio libero a disposizione potete anche inserire un numero elevato (per esempio 1000) e lasciare così tutte le immagini salvate.

3. Fonts

In questa schermata potete  caricare i font che volete utilizzare per i titoli o altri elementi in base alle vostre scelte.

4. Usage

L’ultima schermata spiega come modificare il tema del proprio blog per utilizzare il plugin. Per modificare il titolo dovrete aprire con un editor i file principali del tema dove si trova il Loop e cercare la seguente stringa di codice (ho segnato in grassetto la parte che deve essere modificata):

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

e modificarla nel seguente modo:

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_ttftitle(); ?></a></h2>

Il comando

the_ttftitle();

utilizza anche alcuni attributi, tra cui il più importante è $style = “xxx” con cui potete utilizzare un’altro stile tra quelli creati all’interno del menu Styles. Se invece volete usare lo stile predefinito non serve che utilizziate l’attributo.

E’ inoltre possibile utilizzare il tag

<?php the_ttftext(); ?>

per sovrapporre immagini anche ad altri elementi come categorie, tag o menu. Ecco un esempio di utilizzo:

<?php get_bloginfo('name'); ?>

può essere sostituito con

<?php the_ttftext(get_bloginfo('name')); ?>

e poi specificato con il relativo attributo di stile come spiegato poco sopra.

Riassumendo ritengo questo un utilissimo plugin per creare titoli diversi dal solito senza doversi limitare alla solita ristretta cerchia di caratteri disponibili. Cosa ne pensate? Fatemi sapere le vostre opinioni nei commenti!