DiploMagazine: elegante tema wordpress per blog magazine
Pubblicato da Davide, Aggiornato lunedì 1 febbraio 2010 37 Commenti »
Un mese di silenzio; ho lavorato sul mio nuovo tema wordpress per diversi giorni in apnea, non ho avuto un attimo per postare qualche novità. Ma finalmente il momento è arrivato, da oggi puoi scaricare il nuovo tema.
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.
Varie info
Articolo pubblicato domenica 31 gennaio 2010 alle 23:52
Segnala questo articolo.. e sentiti utile!
37 Commenti »
Puoi lasciare un tuo commento, oppure fare un trackback dal tuo sito.
Lascia il tuo commento
1
jasha - Pubblicato il 01 02 2010 alle 10:05
Ottimo lavoro :)
2
Lino - Pubblicato il 01 02 2010 alle 14:55
Molto bello, complimenti!!!
3
Diplomagazine: elegante tema per wordpress | ilprogramma.com - Pubblicato il 01 02 2010 alle 16:31
[...] DiploMagazine Versione 1.0 è stato progettato principalmente per siti evoluti, che si occupano di notiziari, quotidiani, magazine online, etc, e certamente non come un semplice elenco di articoli in ordine cronologico. [...]
4
nuZz - Pubblicato il 01 02 2010 alle 16:41
Lo proverò su nuZzmoVie.it… grazie 1000.
nuZz
5
Nino - Pubblicato il 01 02 2010 alle 16:48
Grande Tema, complimenti.
Già fatta una piccola recensione.
Ciao e grazie per la condivisione.
6
Davide - Pubblicato il 01 02 2010 alle 17:28
Grazie a tutti.. è un piacere condividere!
@Nuzz: fammi sapere poi se è tutto ok!
7
jasha - Pubblicato il 01 02 2010 alle 18:08
Ciao Davide, questa mattina non avevo molto tempo da spendere sul tema, ho appena guardato nel dettaglio tutte le features e mi sembra assolutamente un tema paragonabile a quelli “professionali”. Onestamente capita giusto a proposito, lo stò per utilizzare in un nuovo portale a cui ho appena dato vita. Ho solo una domanda per te: Con che licenza lo stai distribuendo? Te lo chiedo perchè voglio capire se posso metterci un pò su le mani qualora decidessi di apportare qualche modifica. Fammi sapere, a presto :)
8
Davide - Pubblicato il 01 02 2010 alle 18:17
Non l’avevo specificato nell’articolo e ora l’ho aggiunto: come tutti i lavori da me rilasciati, sono sotto licenza Creative Commons. Ergo puoi modificarlo finchè ti pare purche citi la fonte con un link nel footer.. ;)
9
jasha - Pubblicato il 01 02 2010 alle 18:39
Perfetto, come sospettavo, grazie mille per la precisazione. A presto!
10
Nerveness - Pubblicato il 01 02 2010 alle 19:21
Ecco perchè eri sparito da un pò dalla circolazione, stavi lavorando a questo gioiello di tema!!
Complimentissimi, è stupendo/utile!
11
Davide - Pubblicato il 01 02 2010 alle 19:23
Un po’ per lavoro (molto!), un po’ per il tema (meno..), mi sono preso un mesetto sabbatico :)
12
jasha - Pubblicato il 02 02 2010 alle 15:41
Ciao Davide,
come avviene la selezione dell’immagine per lo slideshow all’interno degli articoli?
Nello specifico, ho un articolo con molte immagini, dimensione approssimativa di ogni immagine 300×500px, in Home questo articolo (che dovrebbe essere presentato all’interno dello slideshow restituisce un errore.
Puoi visualizzare la home con l’errore qui: http://www.pcfacile.info/
Attendo tua risposta, grazie mille!
13
davide - Pubblicato il 02 02 2010 alle 16:59
Ciao,
hai cambiato il codice php del file header?
Sembra ripetere 2 volte il javascript che carica le immagini dello slideshow..
Se mi mandi il tuo codice via mail ci do un’occhiata.
Un saluto!
14
Antonio Patti LdF - Pubblicato il 04 02 2010 alle 15:05
Bello, bello davvero!
Non so se si adatta a quello che devo fare per un amico, ma per altro sicuramente si!
Bravo e grazie per lo share!
15
Davide - Pubblicato il 04 02 2010 alle 18:17
Tnx!
Giusto per la cronaca: il problema riscontrato da Jasha era dovuto al plugin DISQUS Comment System, che annida un javascript tutto suo all’interno di quello del tema.
16
salvo - Pubblicato il 08 02 2010 alle 00:45
salve. sto provando questo bel tema, ma i caratteri sono un po’ troppo piccoli. Quale parte di codice devo modificare per poter cambiare dimensione al testo, ed eventualmente anche il tipo di carattere utilizzato?
grazie.
17
davide - Pubblicato il 11 02 2010 alle 20:44
Ciao…bellissimo il tema….volevo sapere anche io come fare a aumentare di default i caratteri della barra nel template…..(ho guardato style.css ma non ne sono venuto a capo!) inoltre non riesco a capire perchè non si vedo le anteprime delle immagini dentro gli articoli del mio sito…
spero in un aiutoooo!
18
Davide - Pubblicato il 12 02 2010 alle 09:12
Ciao, per aumentare la dimensione del testo, nella prima parte del file css, devi cambiare la dimensione del testo. Invece di .76em, metti .85em o così via..
body {
font: .76em/150% Calibri, Verdana, Arial, Helvetica, sans-serif;
19
salvo - Pubblicato il 12 02 2010 alle 10:31
ho provato a modificare il valore .76em, il testo si vede per un attimo più grande, per poi ritornare subito alla dimensione iniziale, forse bisogna anche modificare un altro parametro?
20
salvo - Pubblicato il 12 02 2010 alle 11:12
Scusate ho un altro piccolo problema, non riesco a distanziare un paragrafo dall’altro con una riga vuota, quando scrivo il post non ci sono problemi, ma al momento del salvataggio tutte le righe vuote vengono cancellate, e dunque i paragrafi si uniscono in un unico testo.
dove intervengo?
grazie
21
nuZz - Pubblicato il 12 02 2010 alle 11:26
Ciao. Volevo chiedere, quali sono i tag da modificare nello style css per il display:none del nome e dello slogan affinchè non siano visualizzati nell’header?
Grazie.
nuZz
22
nuZz - Pubblicato il 12 02 2010 alle 11:42
Tutto ok… ho risolto… cioè ho trovato i due tag analizzando il file header.php
CiauZz
23
max - Pubblicato il 17 02 2010 alle 18:05
Complimenti per il tema. L’ho subito implementato nel mio sito.
E’ di facile configurazione e la grafica è pulita e semplice.
24
Lido - Pubblicato il 27 02 2010 alle 01:46
Non posso che accodarmi a tutti i giudizi : veramente bellissimo, è perfetto!
Ho dei problemi però nel funzionamento e delle modifiche che vorrei fare e volevo chiederti se vuoi darmi una mano :
1 – Non visualizza lo slideshow
2 – Non visualizza le immagini nei riassunti degli articoli (negli articoli interi invece si)
3 – Siccome ho molte categorie risulta antiestetico averle nella barra nera in alto. Vorrei che non comparissero lì (le metto io nella sidebar ) e magari in quella barra farci invece apparire i link delle pagine
Grazie mille in anticipo!!…e ancora complimenti e grazie della condivisione!
25
Lido - Pubblicato il 27 02 2010 alle 13:27
Per le immagini ho risolto!
Siccome i miei articoli erano importati da Blogger il tema non trovava le immagini perchè non erano su wordpress ma su un link blogger. Quindi ora funziona slideshow e immagini nei riassunti.
Mi rimane il dubbio di come eliminare le categoeri dalla barra in alto e metterci i link delle pagine.
26
Davide - Pubblicato il 27 02 2010 alle 14:57
Ciao Lido,
per strutturare meglio il menù hai due strade:
1. crei le categorie ad albero, ovvero raggruppi sotto la categoria padre energia tutte le sotto categorie come eolico, nucleare, ecc..
2. modifichi direttamente il codice php del file header.php. Alla linea 104 trovi questo codice: “< ?php wp_list_categories('title_li=&depth=2&sort_column=menu_order'); ?>”
devi modificarlo con questo: “< ?php wp_list_categories('title_li=&depth=2&sort_column=menu_order&exclude=1,2,3'); ?>” dove al posto di 1,2,3 ci metti gli id delle categorie che vuoi escludere, separati da virgole
la documentazione la trovi qui: http://codex.wordpress.org/Template_Tags/wp_list_categories
27
Lido - Pubblicato il 27 02 2010 alle 16:33
Ciao
grazie mille della risposta!
Se può essere utile anche ad altri, quello che ho fatto è di mettere i link alle pagine del blog nella barra orizzontale in alto.
Per farlo basta sostituire al codice indicato da Davide questo :
modificandolo cosi se si vogliono escludere alcune pagine : (mettendo ID delle pagine da escludere al posto di 1,2,3,…
Grazie ancora Davide!
28
Lido - Pubblicato il 27 02 2010 alle 16:34
Scusate ma non si vede il codice… devo metterlo tra le virgolette perchè si visualizzi nel commento?
29
Paolo - Pubblicato il 08 03 2010 alle 01:28
Salve complimenti,un tema davvero bello;ho un problema,ho modificato l’immagine della testata ,ma rimane cmq la scritta del titolo del blog che si sovrappone all immagine,non c’è un modo per non far comparire il titolo sull’immagine?
Grazie
30
Davide - Pubblicato il 08 03 2010 alle 09:13
Ciao, per rimuovere il titolo devi cambiare il file style.css
Da qualche parte c’è una regola tipo #logo-text e #intro, aggiungi tra le parentesi graffe la scritta “display:none;” per entrambi.
31
Paolo - Pubblicato il 08 03 2010 alle 11:12
Grazie
Un’altra cosa,non posso far apparire negli articoli l’autore? Ecse solol’articolo senza l’autore.
32
Lido - Pubblicato il 09 03 2010 alle 22:23
Ciao Davide, scusa se torno alla carica.
Vorrei eliminare le barre orizzontali (nera ed arancione ) della testata, o perlomeno riuscire a fare in modo che siano “fissate” e “segueno” l’immagine da me inserita nella testata il titolo ed i link della barra orizzontale. Mi spiego : se aggiungo un banner o qualsiasi altra cosa sopra la testata faccio sendere il titolo, i link orizzontali e l immagine ad me inserita ma non scendono queste due linee cosi mi viene tutto sfalsato. Spero di essermi spiegato. Se vuoi ti mando un immagine.
33
Davide - Pubblicato il 10 03 2010 alle 13:56
@Paolo: dipende dove vuoi farlo apparire.. in ogni caso devi modificare i file di template. Se vai sul Codex di wordpress ci sono tutte le istruzioni sulle funzioni disponibili, nel tuo caso: the_author()
@Lido: devi modificare il file css, intervenendo sulla regola #header, proprietà width. Adesso credo sia impostata al 100%, modificala in pixel mettendola uguale all’immagine, ad esempio: width: 980px;
34
Lido - Pubblicato il 10 03 2010 alle 16:16
Ciao Davide
ho provato ma il problemma rimane.
Quello che devo risolvere è questo :
http://img52.imageshack.us/img52/9201/cattura3c.jpg
Vedi che l immagine e il menu orizzontale vengono sposta in basso mentre lo sfondo no(le barre orizzontali nere e quella arancione). In questo modo si sfalsa tutto.
35
Davide - Pubblicato il 10 03 2010 alle 17:06
pardon.. lo sfondo con le barre nere è sul body, quindi dovresti rimuovere lo sfondo dal body e piazzarlo sull’header-wrap.
36
Lido - Pubblicato il 10 03 2010 alle 18:37
Perfetto! Funziona!
Grazie ancora! Ho scritto un post sul mio blog dedicato al tema.
Lo trovi qui
http://www.sviluppo-energia.com/2010/03/il-tema-di-energiasviluppo-by-diplod.html
Ciao
37
Paolo - Pubblicato il 11 03 2010 alle 13:48
Ho risolto tutti e due i prpblemi sia dell’autore che del titolo.
Ora ne ho un altro,vorrei aumentare la dimensione dei caratteri,ho modificato nel css la stringa che hai detto
body {
font: .76em/150% Calibri, Verdana, Arial, Helvetica, sans-serif;
Ma si ingrandiscono solo per 2-3 secondi per poi tornare piccoli,come risolvo?
Grazie :)