Tre pulsanti utility per i vostri post

aldolat@gmail.com (Aldo Latino) — Tue, 02 Mar 2010 05:00:14 +0000

Una delle ultime aggiunte che ho fatto al mio tema riguarda i pulsanti nella barra laterale sinistra, che accompagna ogni articolo: tre pulsanti (di cui uno visibile solo quando si guarda la pagina del post singolo) relativi a Delicious, Twitter e la stampa della pagina o il suo scaricamento in PDF o l’invio tramite email. Per aggiungerli non ho usato plugin perché questi spesso impongono una posizione in una determinata zona, mentre io preferisco inserirlo in quella piccola sidebar. E poi, comunque, presentano un codice molto più lungo di quello che ho usato io. Vediamo come ho fatto, pulsante per pulsante.

Per ognuno di essi ho creato una funzione specifica. Le tre funzioni potrebbero anche essere riunite assieme, ma probabilmente lo farò in seguito, visto che sono nate in tempi diversi. Ovviamente le tre funzioni sono separate l’una dall’altra e quindi utilizzabili per conto proprio.

Delicious

Tra i suoi strumenti, Delicious propone un pezzo di codice in JavaScript per conservare nei segnalibri la pagina che si sta visualizzando. Quel codice, però, non ha le & escaped, per cui il codice non viene validato dal W3C. Approfittando di ciò, ho incorniciato il codice in una semplice funzione richiamabile in modo pulito nel tema.

La funzione per Delicious

Nel functions.php del tema ho inserito:

1// Genera il pulsante Archivialo su Delicious
2function saveToDelicious() {
3    global $wp_query;
4    $stD = '<p><a class="save-delicious" title="Archivialo su Delicious" href="http://delicious.com/save" onclick="window.open(\'http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=\'+encodeURIComponent(\''.get_permalink($wp_query->post->ID).'\')+\'&amp;title=\'+encodeURIComponent(\''.get_the_title().'\'),\'delicious\', \'toolbar=no,width=550,height=550\'); return false;">';
5    $stD .= 'Archivialo su Delicious</a></p>';
6    echo $stD;
7}

Il CSS per Delicious

Questa funzione genera un elemento p con una sua classe e all’interno l’anchor col testo. Con un paio di stili CSS l’ho mutato in pulsante sensibile all’hover del mouse e ho usato uno sprite apposito. Questi gli stili:

.save-delicious {
    background: transparent url('images/delicious-twitter-print.png') no-repeat 0 0;
    display: block;
    height: 21px;
    text-indent: -9999px;
    width: 65px
}

.save-delicious:hover {
    background-position: 0 -21px;
}

Questi due stili faranno sparire il testo e lo sostituiranno con l’immagine del pulsante: l’effetto è nella sidebar di sinistra. Lo sprite, realizzato in Inkscape e utilizzabile liberamente, è il seguente: ~~Sprite pulsanti utility~~

Il richiamo della funzione per Delicious

Nel template del tema, ho poi inserito i pulsanti richiamando la funzione nei punti di interesse così:

if ( function_exists( 'saveToDelicious' ) ) {
    saveToDelicious();
}

Twitter

Anche per Twitter ho seguito un percorso simile, adattando però quanto scrissi tempo fa. Non mi dilungo e vi indico direttamente i punti.

La funzione per Twitter

Ho inserito nel functions.php:

 1// Genera l'HTML per un pulsante Send to Twitter
 2function sendToTwitter() {
 3    global $wp_query;
 4    $mynick = 'mio-nick';
 5    $fulltitle = get_the_title($wp_query->post->ID);
 6    if(function_exists('get_shortlink')) {
 7        $myshortlink = get_shortlink($wp_query->post->ID);
 8    } else {
 9        $myshortlink = get_bloginfo('url').'/?p='.$wp_query->post->ID;
10    }
11    $maxchars = 140-strlen($mynick)-strlen($myshortlink)-9; // 140 = max Twitter chars; 9 = RT + @ + 3 spaces + ...
12    if(strlen($fulltitle) > $maxchars) {
13        $shorttitle = substr($fulltitle, 0, $maxchars).'...';
14    } else {
15        $shorttitle = $fulltitle;
16    }
17    $send2twitter = '<p><a class="send-twitter" title="Condividilo su Twitter" href="http://twitter.com/home?status=RT @'.$mynick.' '.$shorttitle.' '.$myshortlink.'">';
18    $send2twitter .= 'Condividilo su Twitter</a></p>';
19    echo $send2twitter;
20}

Quando si fa clic sul pulsante, la funzione porta alla pagina di Twitter e riempie il campo del tweet con il titolo del post, il link e una citazione del nick dell’autore. La funzione, poi, calcola automaticamente, in base alla lunghezza del nickname, quanto debba essere lungo a sua volta il titolo: se eccede il limite massimo calcolato, lo tronca, aggiungendo tre puntini di sospensione.

L’unica cosa da cambiare prima di salvare è alla riga 4 il nome mio-nick con quello che vi identifica su Twitter.

Il CSS per Twitter

Ecco gli stili CSS usati, molto simili al precedente:

.send-twitter {
    background: transparent url('images/delicious-twitter-print.png') no-repeat 0 -42px;
    display: block;
    height: 21px;
    text-indent: -9999px;
    width: 65px;
}

.send-twitter:hover {
    background-position: 0 -63px;
}

Il richiamo della funzione per Twitter

Questo il modo per richiamarla in safe mode, cioè usando — anche in questo caso — una condizione che verifichi la sua esistenza:

if( function_exists( 'sendToTwitter' ) ) {
    sendToTwitter();
}

Printfriendly

Questo comodo servizio offre la stampa dell’articolo in versione ottimizzata e modificabile dall’utente, il file in PDF dell’articolo e qualcos’altro ancora. Esiste un plugin ufficiale per questo scopo e l’ho utilizzato per parecchio ma, nata l’esigenza di spostarlo nella sidebar di sinistra, ho preferito adattarlo alle mutate condizioni. In più ho ottenuto l’eliminazione di numerose righe di codice.

La funzione per Printfriendly

Eccola, semplicissima e adattata all’uopo: 😀

1// Genera il pulsante Print/PDF con link a printfriendly.com
2function print_pdf_show_link() {
3    $outputPf  = '<p><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script>';
4    $outputPf .= '<a class="print-pdf" title="Stampa una versione ottimizzata di questa pagina" href="http://www.printfriendly.com" id="pfLink" onclick="window.print(); return false;">';
5    $outputPf .= 'Stampa / PDF</a></p>';
6    echo $outputPf;
7}

Il CSS per Printfriendly

Questi gli stili:

.print-pdf {
    background: transparent url('images/delicious-twitter-print.png') no-repeat 0 -84px;
    display: block;
    height: 21px;
    text-indent: -9999px;
    width: 90px;
}

.print-pdf:hover {
    background-position: 0 -105px;
}

Il richiamo della funzione per Printfriendly

Ed infine il richiamo nel template:

if ( function_exists( 'print_pdf_show_link' ) ) {
    print_pdf_show_link();
}

L'articolo Tre pulsanti utility per i vostri post è uno scritto di aldolat.it. Rispettane le condizioni di licenza.

Aldolat.it — Post con tag Printfriendly