Qualche settimana fa
Francesca mi ha contattata dal blog e mi ha chiesto se era possibile stampare ogni singolo post.
Nel
suo blog infatti ogni post è una ricetta e vorrebbe dare la possibilità ai suoi lettori di stamparle.
Ed eccomi qui a spiegarle e spiegarvi come realizzare questa funzione.
Prima di iniziare a mettere mano al template fate il backup da
Layout -> Modifica HTML -> Scarica modello completo.
Poi cliccate su Espandi i modelli widget e trovate la riga con il codice
<div class='post-body' >
in alcuni template potrebbe essere
<div class='post-body entry-content' >
Prima del carattere
> aggiungete questa stringa:
expr:id='"post-" + data:post.id'
Quindi alla fine sarà così:
<div class='post-body entry-content' expr:id='"post-" + data:post.id' >
Poi trovate questa parte di codice:
</div>
<div class='post-footer'>
e subito prima va inserito il codice html per la funzione di stampa.
Io ho realizzato due funzioni (specifiche per il blog di
Francesca) che servono per stampare la singola ricetta o il singolo post... che non sono la stessa cosa visto che il suo template prevede delle sezioni "nascoste" che contengono le ricette. Vi basterà visitare il su blog per capire di cosa sto parlando.
Il codice html per stampare un post è:
<a class='printer' expr:onclick='"javascript:stampaPost(\"post-" + data:post.id + "\");"'>Stampa il post</a>
mentre per i template con sezioni nascoste, è possibile stampare solo il contenuto di tali sezioni inserendo questo codice:
<a class='printer' expr:onclick='"javascript:stampaRicetta(\"post-" + data:post.id + "\");"'>Stampa la ricetta</a>
Poi trovate la riga
]]></b:skin> e subito prima incollate questo codice css:
a.printer {
cursor: pointer;
background: url(http://www.iolecal.it/blog/posts/post074/printer.gif) no-repeat;
padding-left: 20px;
margin-right: 10px;
}
Poi trovate la riga
</head> e subito prima incollate questo codice javascript:
<script>
function stampaRicetta(divId) {
var postContent = getPostContent(divId);
stampa(postContent);
}
function getPostContent(id) {
var content = '';
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for(var i=0; i<spans.length; i++) {
if(spans[i].id == "fullpost") {
content += spans[i].innerHTML;
}
}
return content;
}
function stampaPost(divId) {
var postContent = document.getElementById(divId).innerHTML;
stampa(postContent);
}
function stampa(html) {
var printWindow = window.open("","printPost","top=100,left=200,width=600,height=400,scrollbars=yes,status=no,menubar=no,toolbar=no,locations=no");
printWindow.document.open();
printWindow.document.write('<div onclick="javascript:window.print();"><img src="http://lh4.ggpht.com/_fyUYhNUOXMw/Sg2XCP2OJaI/AAAAAAAAATo/vW0r9tXrpzU/printer.gif"/><div>' + html);
printWindow.document.close();
}
</script>
Salvate il modello e alla fine di ogni post vedrete i link "Stampa la ricetta" e/o "Stampa il post", come potete provare nel
mio blog di prova in cui ho pubblicato un post copiando
una ricetta di Francesca.
Cliccando sul link "Stampa la ricetta" o "Stampa il post" si apre una finestra popup con rispettivamente la ricetta (contenuta nella sezione nascosta) o il contenuto del post (tranne le parti nascoste). In quest'ultimo caso se prima di cliccare su "Stampa il post" si rende visibile la ricetta cliccando su "Read more..." allora nel popup sarà visualizzato il post per intero.
Dal popup basta poi cliccare sull'icona
per stampare il post.
Lo script dovrebbe funzionare su tutti i template... se avete problemi contattatemi o lasciatemi un commento che vi aiuto volentieri.
E' possibile inoltre stampare la ricetta o il post senza aprire il popup; basta solo apportare delle modifiche al codice javascript. Chiunque fosse interessato può contattarmi.
Io personalmente preferisco questa soluzione poiché consente di vedere prima cosa si sta per stampare.
volevo chiederti se era possibile far stampare anche il titolo e il link del post
Copyright 2008- 
Design by 
