Giocolando fai da te. Atto I

Primo articolo della serie: “rubami pure i cazzilli del layout, tanto io li ho rubati a qualcun altro”.
In questo articolo ci occuperemo delle personalizzazioni della pagina principale.
In particolare:
. titoli con font “strano”
. date in formato “umano”
. fumetto per i commenti
. “postille”
. tag

Titoli con font “strano”
La tecnica utilizzata per realizzare i titoli dei post nella pagina principale si chiama sIFR. Il che sta per salcazzoFlashImageRr. L’articolo che descrive tutta la tecnica lo trovi qua.
Io l’ho realizzato a manina, seguendo la tecnica indicata nell’articolo di cui sopra. Qualche giorno fa però è uscito un plugin che dovrebbe semplificare la cosa, lo trovi qui.
Ci sono tecniche alternative, il FIR ad esempio. Per una dissertazione sui vantaggi di una rispetto all’altra, guarda ad esempio qui.

Se vuoi comunque realizzare il tutto a mano anche tu, questi sono i passaggi:
. scarica l’archivio di sifr dal sito
. se ti va bene il font di default sei fortunato, altrimenti avrai bisogno di Flash MX per modificarlo.
. cambiare il font è facile: apri il filmato flash e sostituisci il font nella frase standard (che costituisce l’unico elemento del filmato).
. esporta il filmato in formato .swf
. metti il filmato flash in una directory (ad esempio /movies) sul server
la parte difficile è fatta, bravo(a). Ora, per fare in modo che il tuo blog utilizzi effettivamente i nuovi font, carica nell’header sIFR.js con una chiamata del tipo:

<script type="text/javascript" language="javascript" src="sIFR.js">

idem per quanto riguarda il foglio di stile CSS:

<script type="text/css" src="sIFR.css">

a questo punto, è sufficiente aggiungere una chiamata javascript, tipicamente nel footer della pagina, dove dare istruzioni al browser sugli stili da sostituire, ad esempio:

<?php if (is_home()) { ?>
<script type="text/javascript">
//<![CDATA[

if(typeof sIFR == "function"){
sIFR.replaceElement(named({sSelector:".post h2", sFlashSrc:"<?php bloginfo('template_url');?>/images/sifr_grunge.swf", sColor:"#333333", sLinkColor:"#000000", sBgColor:"#FFFFFF", sHoverColor:"#FF6666", nPaddingTop:0, nPaddingBottom:0, sFlashVars:"textalign=left"}));
};

//]]<
</script>
<?php } ?>

E il gioco è fatto. Ovviamente è possibile avere più sostituzioni, per ogni font diverso occorrerà tuttavia un opportuno filmato flash.

Le date in formato umano
Le date dei post, indicate sotto al titolo, sono composte in linguaggio “naturale”, invece che nel solito formato giorno/mese/ora.
In questo caso si tratta semplicemente della combinazione di due plugin già esistenti: dunstant_time_since e time_of_day, ovviamente localizzati in italiano (e adattati al fatto che in italiano non è che basti aggiungere la ’s’ per fare il plurale). Le versioni localizzate sono disponibili su richiesta.

fumetto per i commenti
Una cosa che mi affascina parecchio sono le mappe o, più in generale, i sistemi per rappresentare le informazioni. Volendo Giocolando essere un luogo dove fare conversazione, sentivo il bisogno di strumenti e metafore visive che da un lato ponessero indiscutibilmente l’accento sul lato conversazionale del blog, dall’altro che stimolassero il coinvolgimento dei lettori (che quindi da lettore passano a conversatore), facendo scattare meccanismi di curiosità/seduzione o oaltro. Il fumetto per i commenti serve esattamente a questo scopo.
L’ispirazione è nata da Wuhan Goodies. Sul suo sito potete trovatre (e scaricare)l’archivio con il balloon originale, la coccarda in alcuni colori ed il PSD (file in formato Photoshop) se volete sbizzarrirvi per creare nuove combinazioni.
Io sono partito da quest’idea e ho aggiunto il concetto di “temperatura della conversazione. In pratica, man mano che il tempo passa, se ad un post non vengono aggiunti nuovi commenti, la conversazione progressivamente si raffredda, e la coccarda cambia colore, da rossa a porpora a blu.

N.B.: questa soluzione si sta dimostrando non perfettamente (o meglio generalmente) usabile. Diversi commentatori, o aspiranti tali, si sono lamentati di “non trovare il link ai commenti”

Postille
Le postille sono quei post senza titolo che compaiono da qualche tempo su questo blog.
Io le ho implementate creando una nuova categoria, chiamata appunto “postille”, e modificando il template della pagina principale in modo che, all’interno del Loop, se il post corrente appartiene alla categoria di cui sopra (il controllo è possibile grazie alla funzione in_category()), venga modificata la modalità di visualizzazione (nel mio caso: no titolo, testo grigio, no indicazione su data e categorie).
Pare che anche in questo caso qualcuno abbia già creato un plugin all’uopo.

tag
Ci sono diverse soluzioni “preconfezionato” in formato di plugin per arricchire Wordpress coi tag.
Personalmente ho usato il plugin Bunny’s Technorati Tags, semplicemente perché so che posso rompere le scatole a Steph se qualcosa non funziona ;)

3 Responses to “Giocolando fai da te. Atto I”


  1. 1 Cat

    Ahaha LOL Anche tu un seguace della sacra setta del Cazzillo? Pensa che qui a Milano ogni volta che dico Cazzillo tutti mi guardano strano…dovremmo fare opera di proselitismo..! Un bacione! :*

  2. 2 wuti

    Tutto molto interessante e utile, peccato che non abbia un cazzo di tempo
    per provare niente di tutto ciò.
    Ma ci tornerò su, prima o poi.

    Saluti…

  3. 3 Corinna

    Le postille sono molto carucce, effettivamente

Leave a Reply