Un tema italiano, professionale, versatile: con uno slideshow di presentazione degli articoli

Si chiama DiploMagazine ed è nato per chi utilizza wordpress come motore per realizzare un sito evoluto: non un semplice blog, ma un notiziario, il sito di un quotidiano, di un magazine online o un sito dove lo notizie sono organizzate in maniera professionale e non come un semplice elenco di articoli in ordine cronologico.

La demo è visibile qui, dai un’occhiata per renderti conto.

Download del Tema

Scarica diploMagazine – Template per wordpress gratuito (versione 1.0)

Uno Slideshow centrale dove mostrare foto e titoli a rotazione

Come tutti i magazine che si rispettino, è possibile impostare il tema per mostrare al centro uno slideshow con le immagini di articoli provenienti da una determinata categoria. Nessun campo aggiuntivo, nessun nome obbligatorio per la categoria: puoi scegliere tu quanti e quali articoli mostrare. Il titolo e il breve riassunto del post saranno inseriti nel caption delle immagini.

Per impostare la categoria, è sufficiente andare nel pannello di amministrazione del tema (vedi sotto) e impostare l’ID della categoria interessata.

Per ricavare l’ID di una categoria andare nella pagina di gestione delle categorie wordpress, cliccare col tasto destro sul titolo della categoria interessata e scegliere “Copia collegamento”. In questo modo, facendo incolla sulla barra degli indrizzi o su un qualsiasi file di testo, si otterrà il link completo della categoria. Sarà un url simile a questo: http://lab.diplod.it/demo/wp-admin/categories.php?action=edit&cat_ID=25

L’ultimo numero in fondo al link è l’ID della categoria in questione, da riportare nel campo “ID Categoria per Slideshow”.

Un pannello di amministrazione per costruire l’home page e organizzare le notizie

diploMagazine ha un pannello di amministrazione tramite il quale è possibile personalizzare il tema e costruire l’home page a proprio piacere. Per accedervi cliccare sul link “diploD Magazine Option” sotto alle impostazioni di Aspetto del pannello di amministrazione WordPress (vedi figura).

Impostare le parole chiave del sito e l’immagine di sfondo della testata

Se non utilizzi nessun plugin di gestione delle keywords (come ad esempio All in One SEO Pack), puoi impostare direttamente nel pannello di amministrazione del tema le parole chiave del tuo sito, utili per ottenere un buon posizionamento sui motori di ricerca.

Puoi inoltre impostare una immagine di sfondo della testata. Il tema ne ha già una utilizzabile. Inserendo infatti l’indirizzo http://lab.diplod.it/demo/wp-content/themes/diplo-magazine/images/header-photo.png si ottiene una testata come quella nella foto sottostante.

Puoi caricare online la tua immagine personalizzata da utilizzare come sfondo della testata del sito, basta riportarne l’url.

Attivare Google Adsense sul proprio sito

E’ possibile attivare la pubblicità di Google sul tema, senza mettere mano al codice. Basta riportare il proprio Google Adsense ID (lo puoi trovare in alto a destra quando entri nel pannello di amministrazione di Google) e i colori desiderati per i propri banner.

Impostare le colonne e le categorie da visualizzare in home page

L’home page può essere a colonna singola, a due colonne, con o senza lo slideshow centrale (nell’immagine sopra sono visualizzate tutte le possibilità).

Impostando il “Numero di Categorie in Rilievo nella Home Page” a zero, sarà visualizzata una sola colonna centrale, mentre cambiando tale numero saranno visualizzate due colonne. Nella colonna laterale è possibile pubblicare articoli provenienti da diverse categorie, basta indicare l’ID delle categorie e il numero di articoli desiderati.
Per ricavare l’ID di una categoria, come descritto sopra, andare nella pagina di gestione delle categorie wordpress, cliccare col tasto destro sul titolo della categoria interessata e scegliere “Copia collegamento”. In questo modo, facendo incolla sulla barra degli indrizzi o su un qualsiasi file di testo, si otterrà il link completo della categoria. Sarà un url simile a questo: http://lab.diplod.it/demo/wp-admin/categories.php?action=edit&cat_ID=25

L’ultimo numero in fondo al link è l’ID della categoria in questione, da riportare nel campo “ID Categoria #”

E’ inoltre possibile pubblicare una galleria di immagini proveniente da un articolo wordpress oppure un video di youtube nel footer. Per fare ciò, è sufficiente compilare i campi “Galleria Immagini” con l’ID del post al quale è associata la galleria e “Video Youtube” con l’URL embedded del video.

Per ricavare l’ID dell’articolo, dalla pagina di amministrazione degli articoli, cliccare col tasto destro sul titolo e scegliere “Copia collegamento”. In questo modo, facendo incolla sulla barra degli indrizzi o su un qualsiasi file di testo, si otterrà il link completo dell’articolo. Sarà una url simile a questo: http://lab.diplod.it/demo/wp-admin/post.php?action=edit&post=52
L’ultimo numero dell’url è l’ID dell’articolo, nel caso dell’esempio sopra è 52. Inserendo questo numero, saranno visualizzate nel footer di sinistra tutte le foto caricate in quell’articolo.

Per ricavare il link del video youtube è necessario partire dal codice embedded del video, quello offerto da youtube per inserire un video nel proprio sito. Qui sotto, in grassetto, è evidenziato l’url da inserire nel pannello di amministrazione del tema.

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/W7HNEfOf-Rw&hl=it_IT&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/W7HNEfOf-Rw&hl=it_IT&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Quattro spazi widget ready, tra sidebar e footer

Il tema dispone di ben quattro sidebar dinamiche, dove è possibile inserire widget direttamente dal pannello di amministrazione di wordpress. La sidebar numero 1 è relativa alla colonna laterale destra del sito, mentre le numero 2, 3 e 4 sono relative alle tre colonne del footer.

Archivi, commenti e altro

Il tema è organizzato secondo le categorie degli articoli wordpress, che compaiono come menù della testata; le sottocategorie sono gestite nelle stesso menù fino al secondo livello.

I link alle pagine vengono invece pubblicati nel menù in alto, sulla prima barra nera del tema.

diploMagazine dispone inoltre di una professionale gestione delle pagine di archivio e di ricerca, mentre i commenti agli articolo supportano i Gravatar.

Non resta che provarlo e lasciare commenti, suggerimenti, feedback o l’url del sito dove viene utilizzato.

NB: Questo lavoro è rilasciato con Licenza Creative Commons: puoi modificarlo e riutilizzarlo, purchè venga citata la fonte.

Mammaimperfetta.it si aggiunge al portfolio, già da un paio di mesi è online il nuovo sito di Silvia. Una migrazione da iobloggo e un nuovo design wordpress, al quale ha collaborato per l’azzeccatissima illustrazione in testata Daria Manenti.

Silvia è una mamma blogger che parla di figli e vita. Dopo appena un mese dalla sua pubblicazione, mammaimperfetta.it è stato segnalato su Repubblica come uno tra più accreditati blog delle mamme italiane. Per me è stato un onore contribuire alla realizzazione.

La particolarità di questo lavoro? Il menù. Ho utilizzato un divertentissimo script basato su jQuery: superfish menu. Per chi vuole studiarselo un po’, sul sito del plugin si trovano tutti gli esempi del caso.

Per i più curiosi, una pillola di css image replacement per rendere il link all’home page sulla testata del blog.

Questo il codice php:

<h1 id="logo-text"><a href="<?php bloginfo('url'); ?>" title="Mamma Imperfetta Home">MammaImperfetta</a></h1>

E questo il codice CSS:

#header h1#logo-text a {
position: absolute;
margin: 0; padding: 0;
font: bold 10px 'Trebuchet MS', Tahoma, Arial, Sans-serif;
letter-spacing: -1px;
text-decoration: none;
text-align: left;
color: #f2f0f1;
background: transparent url(images/logo.gif) no-repeat top left;
width: 357px;
height: 79px;
/* posizione del titolo principale */
top: 15px; left: 185px;
}

Più compatibile di così.. WordPress è sempre più bello! E i lavori statici di styleshout continuano ad offrire ottimi spunti. :)

Ovviamente consigli e suggerimenti sono sempre ben accetti.

Dopo qualche mese di apnea causa tesi, ecco un aggiornamento al portfolio: il nuovo tema per maestroalberto. Il buon Alberto ha deciso di rinnovare il vestito del suo blog, mi ha chiesto di dargli una mano e ho accettato volentieri. E’ nato così un tema pulito ed essenziale, con 6 sidebar gestite tramite widget (3 laterali e 3 nel footer).

Dal punto di vista tecnico, la cosa a mio avviso più interessante è il modulo di ricerca Google, riadattato alla grafica del tema. Per i curiosi, riporto il css utilizzato:

#header form#quick-search {
position: absolute;
top: 175px; right: 20px;
padding: 0; margin: 0;
border: 1px solid #fff;
width: 320px; height: 33px;
background: #e5e5e3 url(images/header-search.gif) no-repeat top left;
z-index: 999999;
overflow: hidden;
}
#header form#quick-search p {
margin: 0; padding: 0; border: none;
}
#header form#quick-search input {
border: none;
background: transparent;
color: #bababa;
float: left;
margin: 0; padding: 5px;
}
#header form#quick-search .tbox {
margin: 6px 0 0 5px;
width: 216px;
display: inline;
border: none;
}
#header #search form#quick-search .btn{
width: 25px; height: 25px;
border: none;
}
#header form#quick-search label {
float: right;
font-size: 10px;
line-height: 11px;
border: none;
padding: 2px 2px 0 2px;
margin: 0;
}
#header form#quick-search input.radio {
float: right;
clear: right;
height: 12px;
margin: 2px 2px 0 0;
padding: 0;
border: none;
}

Ecco come appare il modulo in questione:

L’unica criticità era far rientrare i label che veicolano la ricerca su google o sul web nel piccolo spazio a disposizione nel form, l’unico modo per far diregire a IE questa cosa è forzare le dimensioni del campo di input del radio button. Con Firefox o Safari nessun problema; con IE, nonostante i margini e il padding, il bottone continuava ad andare per i fatti suoi. Dando una regola di height a 12px tutto è tornato come voluto.

Altra cosa interessante del tema è l’utilizzo del 960 grid system: un framework css molto comodo per dimensionare e strutturare un template con dimensione fissa di 960 pixel. E’ un modo rapido e veloce per impostare gli spazi, il framework permette di utilizzare un sistema a 12 o 16 colonne, grazie a una serie di classi preconfezionate e pronte all’uso, sicuramente da approfondire.

Per quanto riguarda la validazione invece, il CSS è privo di errori, mentre il codice XHTML risulta inquinato dai vari plugin.. Mi chiedo: ha ancora senso correre dietro ai mille errori che si presentano quando questi non dipendono da te? La politica che ho adottato è quella di costruire codice valido nella parte che realizzo in prima persona e infischiarsene di ciò che scrivono gli altri, finchè questo non intacca le prestanzioni globali..

Ne approfitto per fare un in bocca al lupo ad Alberto e ringraziarlo per avermi dato fiducia.
Commenti e suggerimenti sono ben accetti.

Per la gioia di tutti i geek che gironzolano nella blogopalla ecco il template originale wordpress dell’ormai ex Geekissimo. Inutile dire che le caratteristiche sono del tutto simili all’altro tema rilasciato nei giorni scorsi: diplodGeek (che consiglio a chi non vuole in tutto e per tutto il vecchio stile, ma un po’ di rinnovamento).
Avevo collaborato con Angelo per curare la grafica del suo blog, ora ha lanciato il network IsayBlog e gli faccio i miei auguri, la nuova grafica è stata curata da Massimo di DesMM, al quale faccio i miei complimenti. Sono orgoglioso che almeno colori e stile del vecchio template siano confluiti nel nuovo, nel mio piccolo è una soddisfazione. Adesso il vecchio tema il mio lavoro è un bene per tutti, scaricatelo e modificatelo a vostro piacere.

La demo on-line? Dai un’occhiata qui.

Caratteristiche

• Sidebar laterale predisposta per i widget, con tre aree: la prima per la parte a colonna singola, la seconda per la parte di sinistra della colonna doppia, la terza per la parte destra
• Scorrimento tra i vari post in home page grazie a comode freccette e javascript (jQuery)
• Footer espandibile dal bottoncino in basso a destra
• Template di pagina per l’archivio: basta creare una pagina wordpress e assegnarle il template di pagina “Archivio”
• Supporto dei tag di wordpress
• Supporto CSS al plugin Pagenavi, per creare la navigazione per pagine stile digg. Installate il plugin e capirete di cosa si tratta
• Codice valido agli standard W3C

Installazione

La procedura è sempre la solita. Si scariza il file zip qui sotto e si decomprime la cartella /geekissimo/ all’interno della cartella che contiene i templates di wordpress: /wp-content/themes/
Ovviamente se volete sfruttarlo al meglio il mio consiglio è di installare anche il plugin Pagenavi: per le istruzioni rifarsi a WordPress Codec.

Le solite note

Il tema è stato testato con wordpress 2.3, ma dovrebbe girare senza problemi anche sulle altre versioni. Supporta i tag. Viene rilasciato sotto licenza GPL, potete modificarlo, aggiustarlo, rivoluzionarlo. E ovviamente fatemi sapere dei vostri lavori. Vi chiedo solo di lasciare un link a questo sito.

Download

Scarica Geekissimo Theme di diploD – Tema wordpress gratuito

Una demo?

Ecco la versione di prova con Nerino.

Da oggi Nerino ha un pannello di amministrazione tramite il quale si possono personalizzare diverse cose e gestire la pubblicazione degli annunci ad sense.

Le caratteristiche di Nerino:

• widget ready – puoi personalizzare la barra laterale in base alle tue esigenze tramite i widget
• adsense ready – puoi pubblicare annunci pubblicitari adsense senza mettere mano al codice
• possibilità di attivare le icone sui link a files (doc, pdf, ecc..), foto e filmati compresi Flickr e YouTube
• possibilità di avere il tema san-serif (ovvero i titoli coi caratteri senza grazie)
• comodi pulsanti per ingrandire il testo
• gestione degli archivi (per categorie, mese, tag..)
• Supporto ai Gravatars. Commenti ridisegnati, con l’aggiunta del numero del commento
• commenti dell’autore del blog evidenziati
• top-menù con un effetto gradiente
• tag alla fine dei singoli post
• favicon
• pagina 404 per la gestione degli accessi a pagine inesistenti
• comoda navigazione tra post precedenti e successivi quando ci si trova all’interno del singolo articolo
• barra di navigazione tra pagine precedenti e successive nella home-page e nelle pagine di archivio
• varie cosette e dettagli..

Download, Installazione e personalizzazione

Scarica Nerino – Template per wordpress gratuito (versione 2.3)

E’ disponibile anche la versione senza pannello di amministrazione. Nerino utilizza il noto toolkit open source per temi wordpress, tuttavia qualcuno ha segnalato problemi con l’editor di scrittura avanzato, per questo metto a disposizione una versione di Nerino senza pannello di amministrazione, tutte le personalizzazioni sono comunque effettuabili intervenendo direttamente sul file header.php (vedi istruzioni sotto).

Scarica Nerino – senza pannello di amministrazione (versione 2.3)

L’installazione è semplicissima, scompattate la cartella contenuta dentro allo zip nella cartella dei temi di wordpress: /wp-content/themes/
Andate nel pannello di amministrazione, clic su ‘Design’, da qui sarà possibile selezionare Nerino come tema predefinito. Se volete gestire la sidebar tramite i widget, basterà cliccare su ‘Widgets’ dal pannello di amministrazione wordpress.

Una volta attivato il tema comparirà la tab ‘Nerino‘ dalla quale si accede al pannello di amministrazione del tema. Chi ha la versione senza pannello può aprire il file header.php con un editor di testo (ad esempio notepad). Da qui è possibile:

• Attivare/Disattivare le icone sui link ai media e a documenti esterni
• Attivare/Disattivare i titoli con le grazie
• Impostare l’ID del proprio account adsense e decidere il colore dei link pubblicitari, in questo modo si attiveranno gli annunci adsense sul blog. Per disattivarli lasciare vuoto il campo relativo all’ID.

Il tema è stato testato su FireFox 1.5, FireFox 2, Firefox 3, IE7, Opera, Safari, Google Chrome.
IE6 che fine ha fatto? Su IE6 Nerino funziona, ma ha qualche leggero difetto. Siccome il browser è vecchiotto, è ora di aggiornarsi! Le mie ore di sonno sono più importanti.. Il codice CSS e XHTML è validato W3C.
Si accettano di buon grado consigli, suggerimenti e feedback di ogni genere..

Ovviamente restano valide tutte le funzionalità della precedente versione.

• I pulsanti che tramite javascript modificano la dimensione del testo, per agevolare la lettura agli utenti con difficoltà nella vista
  
• Un menù che utilizza le gif animate per rendere un semplice effetto di movimento
  
• Il form dei commenti, ne vado troppo orgoglioso :)
  

Licenza

Questo tema è distribuito con licenza Creative Common (attribuzione): http://creativecommons.org/licenses/by/2.5/it/
Potete liberamente utilizzare e modificare il template a patto che venga citato l’autore con un link a diploD.

Qualche ringraziamento

Un grazie speciale a Daniele Salamina, che mi ha offerto validissimi consigli e ha contribuito attivamente allo sviluppo di Nerino. Le migliorie in ottica SEO e la gestione del messaggio 404 sono solo alcune delle “dritte” impartite da Daniele.

Un’altra persona che devo ringraziare è Paolo di 4exp, uno tra i primi utilizzatori del template, con il quale ci siamo spesso scambiati commenti sulle migliorie da fare..

La chicca..

Sono le icone sui link a files, filmati e immagini. E’ stato integrato nel tema il pacchetto Iconize, che permette di visualizzare le icone a fianco dei link che puntano a diversi tipi di files. Anche i link verso foto su Flickr o filmati di YouTube e delle più famose piattaforme di video e foto sharing vengono “iconizzati”.
Giusto per avere un’idea, i link su Nerino appaiono così.

Prima o poi doveva succedere: a Settembre si riparte, qualcuno decide di aprire un nuovo blog e qualcun altro di cambiare template. Ecco a voi Nerino 1.0, un nuovo tema per WordPress creato dal sottoscritto e rilasciato liberamente. Il nome in onore di un gattino che mi ha conquistato.

Fatene ciò che volete, instalatelo, provatelo, testatelo, modificatelo.. ma per favore lasciate sempre un link al mio sito. Se volete una versione personalizzata invece contattatemi.

Presentiamolo

Nerino è un semplice tema a due colonne, con la sidebar laterale e un footer popolato dagli ultimi articoli e dal blogroll. Il tema è widget ready, questo significa che se utilizzate i widget sul vostro blog potete personalizzare la sidebar direttamente dal pannello di amministrazione di WordPress.
L’impostazione cromatica gioca su blu, rosso e arancio. Non escludo che in futuro possano uscire altre versioni, se vi interessa fatene pure richiesta.

Le peculiarità di Nerino sono:

• Alcuni semplici pulsanti che tramite javascript modificano la dimensione del testo, per agevolare la lettura agli utenti con difficoltà nella vista
  
• Un menù che utilizza le gif animate per rendere un semplice effetto di movimento (ormai mi sono lanciato con le gif animate!)
  
• Il form dei commenti, ne vado troppo orgoglioso :)
  

A parte tutto, ecco alcune schermate dalle quali potete avere un colpo d’occhio su come si presenta il layout, si tratta dell’home page e di un post singolo con relativi commenti.

Se volete testarlo live lo potete vedere all’opera su DireFareComunicare, il blog di un amico sul quale l’ho installato (e per il quale è nato).

E adesso non vi resta che scaricarlo e iniziare ad utilizzarlo!

UPDATE: Nerino è giunto alla versione 2.0, vedi le novità e scarica la nuova versione!

Se invece desideri scaricare la vecchia versione:
Clicca qui per il download di Nerino 1.0

L’installazione è semplicissima, scompattate la cartella contenuta dentro allo zip nella cartella dei temi di wordpress: /wp-content/themes/nerino10
Andate nel pannello di amministrazione, clic su ‘Aspetto’, da qui sarà possibile selezionare Nerino come tema predefinito. Se volete gestire la sidebar tramite i widget, dopo aver installato il plugin di Automattic, basterà cliccare su ‘Sidebar Widgets’.

Il tema è stato testato e reso funzionante su FireFox 1.5, FireFox 2, IE7 e Opera (presumibilmente nemmeno Safari dovrebbe dare problemi). IE6 che fine ha fatto? Su IE6 Nerino funziona, ma ha qualche leggero difetto. Siccome il browser è vecchiotto, è ora di aggiornarsi! Le mie ore di sonno sono più importanti.. Il codice CSS e XHTML è validato W3C.
Si accettano di buon grado consigli, suggerimenti e feedback di ogni genere..

NB: WordPress theme Nerino in english? Stay tuned!