Per vederlo subito all’opera basta dare un’occhiata agli esempi che ci sono sul sito ufficiale.

Questo plugin torna veramente utile se accoppiato ai classici menù per wordpress, dove tipicamente la sintassi html è la seguente:

<ul class="sf-menu">
<li class="page_item"><a href="#" title="Home">Home</a></li>
<li class="page_item page-item-1"><a href="#" title="About">About</a>
<ul>
<li class="page_item page-item-2"><a href="#" title="Sottopagina Uno">Sottopagina Uno</a></li>
<li class="page_item page-item-3"><a href="#" title="Sottopagina Due">Sottopagina Due</a></li>
</ul>
</li>
<li class="page_item page-item-4"><a href="#" title="Contatti">Contatti</a>
</ul>

Questa sintassi viene generata dalla funzione wp_list_pages(), indicando come argomento depth=2. E’ sufficiente assegnare la classe “sf-menu” alla lista (<ul>) che compone il menù e lo script farà il resto del lavoro, individuando le liste annidate e nascondendole. Quando l’utente passerà con il mouse sulla pagina padre, allora saranno mostrate a cascata le pagine figlie.

Ovviamente per far funzionare il tutto è necessario includere nella testata della pagina qualche riga di codice, per caricare jquery, il plugin e alcuni file css:

// link al file CSS
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" />
// link al javascript (hoverIntent è opzonale)
<script type="text/javascript" src="hoverIntent.js"></script>
<script type="text/javascript" src="superfish.js"></script>
// inizializzazione di Superfish, sf-menu è la classe su cui sarà attivo l'effetto
<script type="text/javascript">
$(document).ready(function(){
$("ul.sf-menu").superfish();
});
</script>

I temi rilasciati su eleganthemes fanno abbondantemente uso di questo plugin e gli effetti sono piuttosto gradevoli. Credo proprio che mi divertirò nei prossimi giorni.. Conoscete altri script altrettanto versatili e pronti all’uso?

La funzione è semplice: permette di aggiungere campi personalizzati al profilo utente base. In questo modo è possibile strutturare la pagina di registrazione per chiedere ai nuovi iscritti informazioni extra, come ad esempio la volontà di iscriversi ad una newsletter, attraverso un campo checkbox, far inserire un avatar, richiedere la data di nascita o l’indirizzo.. 

Altra esigenza comune è quella di risistemare graficamente il form di registrazione e login, a partire dal logo. Spesso è utile uniformarlo alla grafica del proprio sito web, nei colori e nella formattazione. I file su cui intervenire si trovano nelle cartelle wp-admin/css e wp-admin/images; nella prima vi sono tutti i css di base (il consiglio è sempre quello di farsi un backup prima di apportare modifiche) mentre nella seconda le immagini che utilizza wordpress.

Il logo si trova al path wp-admin/images/logo-login.gif; è sufficiente sovrascrivere questa immagine per cambiare il logo che sta sopra al form di registrazione e di login. Una volta sostituito è bene mettere mano al css per sistemare l’altezza del box che lo contiene, intervenendo sul file wp-admin/css/login.css:

h1 a {
background: url(../images/logo-login.gif) no-repeat;
width: 292px;
height: 166px;
text-indent: -9999px;
overflow: hidden;
padding-bottom: 15px;
display: block;
}
#login { 
width: 680px; 
margin: 1em auto; 
}

Già queste semplici regole sono sufficienti ad allargare il form di login e cambiare le dimensioni del logo.

Unica cosa che manca, a questo punto, è la possibilità di creare un’area riservata per gli utenti registrati. Altra pecca dell’attuale versione di wordpress. Poco male, anche in questo caso ci può venire in aiuto un valido plugin: Disclose Secret.
Può essere utilizzato per proteggere gli articoli e le pagine del blog. Una volta che l’articolo è protetto dal plugin, l’intero articolo incluso il titolo, l’excerpt, il contenuto e i commenti verranno visualizzati solo se il visitatore ha effettuato l’accesso e rispetta i criteri di sicurezza stabiliti per quel determinato articolo. La protezione avviene sia sul singolo articolo che sulle pagine di ricerca, sui feed, sugli archivi e sulla home page.

Combianando i due plugin è quindi possibile spingere wordpress su una gestione avanzata degli utenti: impostando profili ad hoc e aree riservate. Ne conoscete altri? Sono sempre più convinto della bontà di questo CMS.

• Per articolo: ad esempio 10 euro ogni articolo che scrivi
• Tramite adsense: l’autore inserisce il proprio annuncio pubblicitario adsense e viene pagato in base ai clic

Generalmente il secondo è quello più utilizzato, saranno gli utenti stessi, coi loro accessi e i loro clic, a decretare il successo o meno di un articolo. Il concetto è semplice: ogni autore possiede un account Google Adsense e gli viene concesso di inserire un annuncio relativo al proprio Publisher ID all’interno dell’articolo che scrive.
Il Publisher ID si trova in alto a destra nel pannello di amministrazione di Google Adsense, tipicamente è una stringa del tipo pub-1234567890. Questa stringa appare nel codice html degli annunci, nell’esempio seguente è evidenziata in grassetto:

<script type=”text/javascript”><!–
google_ad_client = “pub-1234567890“;
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = “468x60_as”;
google_ad_type = “text”;
google_ad_channel = “”;
google_color_border = “FFFFFF”;
google_color_bg = “FFFFFF”;
google_color_link = “CCCCCC”;
google_color_text = “000000″;
google_color_url = “666666″;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>

Per costruire un sito web write to paid, potremmo utilizzare i campi personalizzati di wordpress. Se chiediamo agli autori di creare un campo dal nome adsenseID e compilarlo con il proprio publisher ID, ogni volta che scrivono un nuovo articolo, potremo andare poi a ripescarlo nel tema di wordpress per pubblicare il suo gruppo di annunci.

Creare un campo personalizzato è molto semplice: dall’editor di scrittura, sotto alla finestra di testo, basta aggiungere nome e valore e premere il tasto “Aggiungi campo personalizzato”.

I modi per visualizzare i campi personalizzati nel tema sono descritti molto accuratamente qui: http://codex.wordpress.org/Using_Custom_Fields
La funzione che ci interessa è get_post_meta($post_id, $key, $single)

• $post_id è l’ID odel post per il quale vogliamo visualizzare il campo personalizzato. Si può usare $post->ID per ricavare quello del post attuale all’interno del loop
• $key è la stringa che identifica l campo personalizzato, nel nostro caso sarà adsenseID (creato in precedenza)
• $single è un valore booleano (vero/falso). Se impostato a true la funzione restituisce un risultato singolo, come stringa. Se impostato a false, o non impostato, la funzione restituisce un array coi campi personalizzati

Dove vogliamo far apparire gli annunci bastarà scrivere, nel file del tema (ad esempio in single.php):

<?php $key=”adsenseID”; ?>
<script type=”text/javascript”><!–
google_ad_client = “<?php echo get_post_meta($post->ID, $key, true); ?>”;
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = “468x60_as”;
google_ad_type = “text”;
google_ad_channel = “”;
google_color_border = “FFFFFF”;
google_color_bg = “FFFFFF”;
google_color_link = “CCCCCC”;
google_color_text = “000000″;
google_color_url = “666666″;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>

Non è altro che il codice precedente, dove al posto del pub-1234567890 abbiamo messo la funzione php che stampa l’ID relativo al post. Ovviamente è possibile personalizzare il fomato e i colori del blocco di annunci, modificando gli opportuni parametri.

Se poi volessimo in qualche modo tenere traccia degli articoli più popolari, per valorizzarli e riconoscere un premio agli autori in grado di scrivere contenuti validi, potremmo utilizzare il Popularity Contest Plugin, che permette di impostare una serie di parametri tramite i quali valutare un post.

Semmai un giorno vorrete fare un sito tipo Ewrite.us o MondoInformatico.info, potete provare così..

Qualche tempo fa Camu illustrava un metodo semplice ed efficace per aggiungere questa funzione a un sito web, attraverso un javascript che agisce sull’onclick. Lo stesso concetto viene sfruttato da questo plugin, che offre inoltre diverse funzionalità:

• Si possono monitorare i soli domini sui quali gli utenti vengono indirizzati oppure gli url di destinazione completi
• Si può sapere se qualcuno clicca dal testo dell’articolo, dai link degli autori dei commenti o dal testo dei commenti stessi
• Si può monitorare il numero di download dei files che mettiamo a disposizione sul nostro blog, specificandone l’estensione (.pdf, .zip, .doc, ecc..)
• Le parole chiave tramite le quali salvare il numero di click le decidiamo noi, specificando ad esempio la stringa uscenti per i link in uscita dal blog o downloads per i link ai file

Non c’è bisogno di aggiungere nulla al codice, il plugin monitorizza tutto in automatico.

Come leggere queste statistiche?
Dal pannello di Google Analytics, sulla sinistra, cliccando su Content e poi su Content Drilldown si apre una schermata dove sono visualizzate tutte le pagine che hanno avuto accessi, divise in base ai criteri che erano stati impostati in precedenza nel pannello di amministrazione del plugin su wordpress.

Buone statistiche a tutti..

Questo processo avviene ogni qual volta ci si ritrova a scrivere un elaborato. Costruire la bibliografia è importante, spesso vi è l’esigenza di tenerla strutturata e leggibile. All’interno del testo poi si fanno citazioni, che vanno riportate tra le note del documento. Nel fare questa attività ci viene in aiuto Zotero, estensione per Firefox che si piazza proprio dove avviene il lavoro quotidiano di ricerca e consultazione: sul browser internet.

Zotero è stato sviluppato dal “Center for History and New Media” della George Mason University e finanziato dal “United States Institute of Museum and Library Services“; quindi ha tutti i presupposti per funzionare, e bene.

Quando ci si trova su un sito web che ha dei rimandi ad un libro, ad esempio su una pagina di amazon, Zotero lo riconosce in automatico e appare un’icona sulla barra degli indirizzi per aggiungere il libro alla bibliografia. Ovviamente i testi si possono aggiungere anche manualmente. Oltre ai libri è possibile inserire pure articoli di giornale, blog, pagine web, documenti e tanti altri tipi di informazioni (compresi i file allegati). Il tutto è strutturabile per cartelle, si possono assegnare tag, inserire note o collegamenti.

Questi screenshot rendono meglio l’idea circa il funzionamento: quello di sinistra mostra il salvataggio delle informazioni del libro direttamente da amazon, quello di destra invece da una pagina di ricerca di Google Scholar.

La bibliografia è poi esportabile nei più comuni standard (Dublin Core RDF, Wikipedia Citation Template..) e ci sono plugin che permettono l’integrazione con Microsoft Word o con Open Office, in questo modo fare citazioni o riportare la bibliografia sarà molto più semplice. Se state scrivendo qualcosa e dovete costruire una lista di riferimenti, un’occhiatina a Zotero è d’obbligo.

Questi video dimostrativi forse valgono più di mille parole..

Qualche nota per gli sviluppatori web

Esiste uno standard con il quale è possibile “marcare” gli articoli o le pagine web, per renderli riconoscibili a software come Zotero. Si tratta di OpenURL COinS (ContextObject in Span): uno standard conosciuto anche come Z39.88.

In sostanza si tratta di un elemento <span> la cui classe sarà “Z3988″ con un attributo title che contiene i dati utili. Una roba del tipo:
<span class=”Z3988” title=”ContextObject qui“></span>
All’interno dell’attributo title si possono inserire diverse cose, il modo più rapido è utilizzare il COinS Generator per generare in automatico il codice, chi volesse approfondire può invece dare un’occhiata al sito ocoins.info

A parte qualche problemino di validazione W3C sul codice generato in automatico (ma facilmente risolvibile), ciò che si ottiene è qualcosa come questo:

<span class="Z3988"
title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Focoins.info%3Agenerator&rft.title=esempio+di+titolo&rft.creator=davide+del+monte&rft.description=esempio+di+descrizione&rft.publisher=diploD&rft.date=2008-09-06&rft.source=http%3A%2F%2Fwww.diplod.it&rft.language=it">
<a href="http://www.diplod.it/">esempio di titolo</a>
</span>

Con una funzione di php si potrebbe integrare facilmente in un tema wordpress.. E con un semplice plugin si potrebbe ottenere lo stesso risultato ancora meglio.

E’ ciò che ho fatto: ecco disponibile il plugin.. ;)

Su questo blog è attivo il mio plugin: WP COinS. Non fa altro che inserire una riga di codice invisibile all’interno dell’articolo in modo che i software in grado di ricoconoscere i COinS ne ricavino le informazioni. Per chi non sa cosa siano i COinS, qui potete capirci qualcosa in più.

Download e Installazione

Potete scaricare lo zip da questo link: wp-coins

Installare il plugin è semplicissimo, basta copiare il file wp-coins.php nella cartella dei plugin (wp-content/plugins/) e attivarlo dal pannello di amministrazione.

Una volta attivo (se avete zotero) sarà visibile un’icona nella barra degli indirizzi, che permette l’archiviazione dell’articolo nella bibliografia: vedi screenshot sottostante.

Per onor di cronaca: esiste già un plugin di wordpress sviluppato dal team di zotero: allora perchè ne ho fatto uno io? Per due motivi, sono partito a svilupparlo senza guardare se in giro c’era già (pirla!) e avevo voglia di fare pratica con la realizzazione da zero di un plugin (un plugin in più è pur sempre qualche conoscenza in più..).
Inoltre, motivo più utile: è progettato per i blog in italiano. La lingua, le descrizioni, sono tutte in lingua nostrana. Motivo per cui non sarà diffuso in inglese ne distribuito sul repository ufficiale, ciò non toglie che sia pienamente testato sulla più recente versione di wordpress.
Che di inglese ne abbiamo già un sacco.. :)

Se poi la reperibilità dei vostri articoli vi sta particolarmente a cuore, non perdetevi il plugin di undolog che aggiunge il descrittore XML dello standard open search al vostro sito.

Ne ha parlato tom qualche giorno fa. Oltre ad essere cross-browser e compatibile agli standard, il vero punto di forza di questa galleria è il supporto a diversi framework javascript, questo permette di utilizzarla in tutti i contesti: supporta infatti YUI, Prototype + Scriptaculous, jQuery, Ext, Dojo e MooTools. Una meraviglia, visto che generalmente è proprio la difficile integrazione tra i diversi framework a impedire l’utilizzo di questi eleganti metodi di presentazione.

Ho cercato un plugin che integrasse su wordpress questa galleria, per utilizzarla nella presentazione del portfolio. Detto fatto: Shadowbox JS Plugin. Per onor di cronaca esiste pure un plugin italiano con lo stesso intento, ma non c’è la possibilità di scegliere quale framework javascript utilizzare. Questo è fortemente limitante, dato che l’arma vincente di shadowbox è proprio la possibilità di utilizzo sui diversi framework.

Ho fatto quindi una traduzione in italiano del suddetto plugin, nulla di travolgente: ho semplicemente modificato i commenti al file del plugin per impostare i parametri e cambiato le scritte “next” “prev” e “close”. Su un sito completamente italiano sta meglio la scritta “chiudi”.. ;)

Se volete provarlo, potete scaricare il plugin dal sito ufficiale e sovrascrivere questi files (tradotti in italiano):

Shadowbox – zip con files in italiano

Installazione

1. Caricare la cartella `shadowbox-js` in `/wp-content/plugins/`
2. Attivare il plugin dal ‘Plugins’ menu in WordPress
3. Aprire il file shadowbox-js.php e modificare $jsLib e $lightCSS in base alle istruzioni presenti nel file.

Utilizzo

Per far apparire un media all’interno di shadowbox basta inserire un link in questa forma:

<a href="http://domain.tld/directory/to/image.jpg" rel="shadowbox[album]">Image</a>

Il link può puntare a immagini, siti web, file flash, video su youtube, contenuto in linea. Basta assicurarsi di inserire `rel=”shadowbox”` poichè questo codice attiva il plugin.
Inserendo il codice `rel=”shadowbox[album]“` si possono inoltre raggruppare più immagini all’interno dello stesso album.

Integrazione con lightbox: se state già utilizzando lightbox sul vostro sito, non dovrete modificare nulla. Il plugin legge in automatico il codice ‘rel=”lightbox”‘ e lo interpreta normalmente.

Mi pare giusto scrivere due righe su alcuni gadget da domenica pomeriggio. Quelle cose che provi ad installare così per gioco e poi scopri che nella loro inutilità le consiglieresti ad altri.

Piclens

Piclens è la classica cosa che ti suggerisce l’amico, una estensione per il browser meravigliosa, esiste per Firefox, Internet Explorer o Safari. Se siete soliti navigare e fare ricerche su Flickr ne capirete immediatamente l’utilità. Se non lo siete, ma la installate ugualmente, ne coglierete subito l’eleganza.
In sostanza si tratta di un esploratore per siti che contengono immagini, funziona in automatico su Flickr, Google Images, Yahoo Image Search, SmugSmug, Photobucket, DeviantArt.. Quando si esegue una ricerca su questi siti e si clicca sul bottocino play che appare in alto a destra (in firefox), si apre un ambiente 3D sul quale si ha una panoramica completa delle fotografie che la ricerca ha restituito come risultato. Provatelo, e capirete avrete pietà per il mio entusiasmo.

Piclens Plugin per WordPress

Esiste pure un plugin per wordpress per riproporre ai propri visitatori l’eleganza di uno slideshow con piclens. Da questa pagina è possibile scaricarlo e trovare le istruzioni per l’installazione ed il suo utilizzo. Mi sarebbe piaciuto utilizzarlo sul mio blog ma purtroppo Aruba (la mia compagnia di hosting) ad oggi ha ancora la versione 4.4.7 di php, e questo plugin richiede la 5.1 o superiore.. Attenderò con pazienza.

Per la cronaca, esiste pure il programmino (win e mac) che permette di creare una galleria da aggiungere a qualsiasi pagina html, con tanto di javascript bello pronto. Utile ad esempio per inserire una galleria ad effetto su un sito che non giri con wordpress.

Google Screensaver

Google Scrensaver viene distribuito assieme al Google Pack (pacco a tutti gli effetti, nel suo complesso) e non è altro che uno screensaver che fa ruotare le fotografie quando il pc va in pausa. Funziona divinamente in parallelo a Picasa, dove è possibile marcare le foto per aggiungerle all’album “Salvaschermo”. Inoltre è possibile assegnare un feed di immagini dal quale pescare le foto e metterle in rotazione, quello predefinito di Google ad esempio offre fotografie d’autore di tutto rispetto.
Nulla di travolgente, solo qualche effetto un po’ più curato rispetto al salvaschermo classico di windows e la possibilità di aggiungere le immagini senza spostarle in una cartella apposita tutte assieme fanno di questo prodottino qualcosa a cui mi sono affezionato.
NB: per scaricarlo è necessario accedere alla pagina del google pack in inglese, in italiano infatti pare non esista..

Picasa

E’ tutta colpa delle compatte! Da quando ho questa benedetta fotocamera digitale le immagini sono al tempo stesso cruccio e passione. Mi piace catalogarle, ritoccarle, ma non troppo, ordinarle e naturalmente visualizzarle. Picasa è lo strumento ideale per tenere in armonia l’archivio delle fotografie: vacanze, gite domenicali e uscite con gli amici. E’ indicato sopratutto per un utilizzo personale, non è un software da professionisti, pochi semplici tasti che rispecchiano basilari funzioni: quando c’è troppa fretta un bel “mi sento fortunato” e la foto gode di nuovo vigore.
Probabilmente già lo conoscete, ma se non l’avessi citato mi sarei sentito in colpa.