Realizzare un tema per WordPress: Come Realizzare l’Header Del Tema? Parte 1
Update 20/04/2011: aggiornamento della guida Come realizzare un tema per WordPress.
Con il passare del tempo e delle nuove versioni rilasciate dal team di sviluppo della piattaforma di blogging più famosa al mondo, si rende necessario aggiornare anche alcune parti di questa guida per restare a passo con le ultime novità.
Iniziamo dunque con il primo articolo che necessita di alcune precisazioni: nello sviluppo dell’header del tema sono state deprecate alcune funzioni come bloginfo(‘stylesheet_url’) che utilizzavamo per richiamare in modo dinamico il collegamento al nostro foglio di stile principale e get_option( ‘home’ ) che usavamo invece per recuperare l’url del nostro sito/blog. Andiamo a vedere dunque cosa cambia nella realizzazione del nostro header sulla base di queste ultime novità introdotte.
Ed eccoci giunti al consueto appuntamento del martedì con il corso dedicato a come realizzare un tema per WordPress. Nella scorsa lezione ci siamo interrotti proprio sul più bello: dopo aver realizzato la struttura del nostro tema con i file necessari al suo funzionamento, lo abbiamo caricato sotto la cartella destinata a ospitare i temi di WordPress: “wp-content/themes” e in seguito abbiamo attivato il tema. Non avendo però scritto ancora alcuna riga di codice all’interno del file “index.php” la home page del nostro blog/sito risulta al momento completamente bianca.
Nella lezione odierna vedremo come realizzare la parte superiore del nostro blog, quello che generalmente in gergo tecnico è indicato come “header” del sito.
Contenuti della lezione
- Scriviamo Le Nostre Prime Righe Di Codice.
- Personalizzare Il Modo In Cui Saranno Visualizzati I Contenuti.
- Aggiungere Dinamicamente Alcune Informazioni Al Template.
- Quali Sono I Tag Che Possono Essere Utilizzati All’interno Di Un Template?
- Aggiungere Dinamicamente Altri Elementi Nell’Head Della Pagina.
- Come Aggiungere Titolo e Descrizione Del Blog Nell’Header?
- Conclusione
1. Scriviamo Le Nostre Prime Righe Di Codice
Apriamo dunque (con il nostro editor preferito) il file principale del tema denominato “index.php” che abbiamo creato nella precedente lezione e scriviamo il markup (X)HTML necessario a visualizzare i nostri primi contenuti sul sito.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Your Inspiration WordPress</title>
<link rel="stylesheet" href="wp-content/themes/YIW/style.css" type="text/css" media="screen" />
</head>
<body>
</body>
</html>
Non abbiamo ancora fatto nulla di particolare, ci siamo semplicemente limitati a definire il DOCTYPE del documento, il set di caratteri, un titolo per la pagina e infine abbiamo collegato il foglio di stile denominato “style.css” al nostro documento.
Se carichiamo adesso la Home Page del blog noteremo che è stato aggiunto il titolo della pagina che abbiamo indicato (Figura 1).
Figura 1 - Pagina bianca con Titolo del sito
2. Personalizzare Il Modo In Cui Saranno Visualizzati I Contenuti
Apriamo il foglio di stile denominato “style.css” e – subito dopo i commenti inseriti nella precedente lezione per definire alcune informazioni riguardanti il tema che stiamo sviluppando – aggiungiamo un reset generale in modo da azzerare i valori che i vari browser associano in modo predefinito ad alcuni elementi per poi ridefinirli quando sarà il momento con i valori che effettivamente ci servono. In questo modo rendiamo uguale la visualizzazione di ogni elemento su tutti i principali browser.
/***********************************************************************
******************* reset.css ******************************************
************************************************************************/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate; border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote, q { quotes:"" ""; }
a img {border:none;}
.clearer {height:0px;overflow:hidden;margin:0px;clear:both;}
.center {text-align:center;}
Dopo aver azzerato i valori predefiniti degli elementi andiamo a definire – nel foglio di stile – una sezione che farà da contenitore ai contenuti che vogliamo visualizzare sul sito.
.container {width:960px;margin:0 auto;min-height:100px;border:1px solid red;}
Ho aggiunto un bordo rosso e un’altezza di 100 pixel al contenitore in modo da poterlo visualizzare sullo schermo poiché non esistendo ancora altri contenuti ci saremmo trovati davanti una semplice pagina bianca.
Adesso ritorniamo sulla pagina “index.php” e nel markup (X)HTML, subito dopo il tag body, andiamo ad aggiungere la sezione contenitore che abbiamo appena definito nel foglio di stile:
… <body> <div class="container"> </div> </body> …
Se adesso andiamo a visualizzare la Home Page del nostro blog dovremmo vedere qualcosa di simile a quanto mostrato in Figura 2.
Figura 2 - Home Page del Blog con contenitore centrato
Riassumendo: abbiamo iniziato a scrivere le prime righe di markup nel documento principale del tema (“index.php”), gli abbiamo collegato il foglio di stile e adesso stiamo iniziando a personalizzare il modo in cui i contenuti saranno visualizzati sullo schermo.
3. Aggiungere Dinamicamente Alcune Informazioni Al Template
Per il momento ci siamo solamente limitati a scrivere del semplice markup html e qualche regola di CSS, ora vediamo come rendere dinamiche alcune delle cose che abbiamo già realizzato utilizzando i tag messi a disposizione dal template di WordPress.
3.1 Aggiungere Il Titolo Della Pagina
Iniziamo col rendere dinamico il titolo della pagina e facciamo in modo che questo sia preso automaticamente dal nome che abbiamo assegnato al sito in fase d’installazione e che possiamo cambiare in qualsiasi momento dal menù: “Impostazioni ->Generale” (Figura 3).
Figura 3 - Nome assegnato al Blog
Sostituiamo la riga di codice nel markup (X)HTML che definisce il titolo della pagina:
<title>Your Inspiration WordPress</title>
con questa nuova riga che utilizza il tag del template denominato: bloginfo(‘name’)
<title><?php bloginfo('name'); ?></title>
In questa riga non abbiamo fatto altro che sostituire il titolo della pagina inserito manualmente in precedenza con il titolo del sito preso in modo dinamico dalle impostazioni assegnate sul nostro WordPress in fase di configurazione. Infatti, il tag del template bloginfo permette di recuperare informazioni riguardanti il blog in questione e può essere utilizzato in qualsiasi punto del template per stampare a video questi dati.
Nel nostro caso al tag bloginfo abbiamo passato il parametro name e questo ci ha permesso di stampare a video il nome assegnato al blog. Se desideri approfondire gli altri parametri supportati dal tag bloginfo ti consiglio di leggere la documentazione sul sito ufficiale di WordPress.
Dopo aver eseguito questa modifica, se proviamo ad aggiornare la Home Page del nostro blog, possiamo notare che il titolo della pagina adesso viene recuperato in modo completamente dinamico (Figura 4).
Figura 4 - Titolo del Blog recuperato in modo dinamico
3.2 Aggiungere Il Collegamento Al Foglio Di Stile
Adesso rendiamo dinamico anche il collegamento al foglio di stile che abbiamo associato al nostro documento. Individuiamo dunque la riga di codice interessata:
<link rel="stylesheet" href="wp-content/themes/YIW/style.css" type="text/css" media="screen" />
In questa riga rimpiazziamo il collegamento al foglio di stile in modo che questo possa essere passato dinamicamente mediante l’utilizzo del tag bloginfo (che abbiamo visto in precedenza). Questa volta però per farci restituire il collegamento al foglio di stile del tema passiamo il parametro stylesheet_url, come mostrato nella riga sotto:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
Se aggiorniamo nuovamente la Home Page del blog e visualizziamo il codice (X)HTML generato dalla pagina possiamo vedere che il collegamento al foglio di stile è stato inserito dinamicamente grazie al corretto utilizzo del tag bloginfo(‘stylesheet_url’) come mostrato nella Figura 5.
Figura 5 - Collegamento dinamico del foglio di stile
**********************************************
Update (20/04/2011): Raccomandazioni
Per richiamare il foglio di stile predefinito del nostro tema adesso è raccomandato utilizzare la seguente funzione get_stylesheet_uri() messa a disposizione da WordPress. Pertanto il codice visto in precedenza dove facevamo uso della funzione bloginfo(‘stylesheet_url’) è da considerarsi deprecato; la riga di codice da scrivere a questo punto diventa la seguente:
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen" />
**********************************************
4. Quali Sono i Tag Che Possono Essere Utilizzati All’Interno Di Un Template?
I tag sono utilizzati all’interno dei template per visualizzare informazioni in modo dinamico o comunque per aiutarti a personalizzare il tuo blog, infatti forniscono tutti gli strumenti necessari per rendere il tema personalizzabile a tuo piacimento.
Se ti stai chiedendo quali sono i tag che possono essere utilizzati nello sviluppo di un template di WordPress ti consiglio di leggere l’ottima documentazione presente sul sito ufficiale di WordPress. Nella pagina suggerita, è riportato un elenco generale di tutti i tag disponibili in WordPress, ordinati per categorie di specifiche funzioni.
5. Aggiungere Dinamicamente Altri Elementi Nell’head Della Pagina
Nel paragrafo tre abbiamo visto come richiamare dinamicamente alcuni elementi all’interno del template mediante l’utilizzo del tag bloginfo. Procediamo dunque con questa operazione in modo da rendere dinamici altri elementi tipici presenti nell’head del documento.
Iniziamo con il meta tag, che definisce il contenuto del documento e il set di caratteri utilizzati:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
E sostituiamolo con la riga che segue:
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
5.1 Aggiungere Un Collegamento Ai Feed
Alcuni lettori di Feed possono avere problemi a riconoscere i Feed disponibili sul tuo blog WordPress. Di conseguenza è utile inserire queste righe di codice all’interno dell’head del documento per facilitarne la loro lettura:
//RSS 2.0
<link rel="alternate" title="<?php printf(__('%s RSS Feed', 'yiw'), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
//ATOM
<link rel="alternate" title="<?php printf(__('%s Atom Feed', 'yiw'), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />
5.2. Aggiungere l’URL Per Gestire I Pingback
Il Pingback è un protocollo definito da Stuart Langridge e Ian Hickson per permettere a blogger e autori del Web di ricevere una notifica quando un altro sito web inserisce un link verso uno dei propri documenti, per poi, in genere, elencarli alla fine del documento stesso [fonte Wikipedia].
WordPress dispone di questa funzionalità ma per usufruirne occorre definire la seguente riga all’interno dell’head del documento:
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
Questo è ciò che consente di inviare e ricevere pingback da altri blog che possono essere collegati al nostro contenuto.
5.3 Aggiungere Un Gancio Per I Plugin
Molti plugin di WordPress inseriscono dei propri fogli di stile CSS o codice Javascript direttamente nell’intestazione del documento. Per fare questo utilizzano un “gancio” messo a disposizione da WordPress che permette l’inserimento dinamico del codice. Questo gancio deve essere posizionato prima della chiusura del tag </head> come mostrato nella riga sotto.
<?php wp_head(); ?> </head>
Il gancio non è obbligatorio da inserire per il funzionamento del Tema, ma senza questo molti plugin potrebbero non funzionare correttamente.
Riassumendo un po’ tutto quello che abbiamo fatto fino a questo punto, la parte iniziale del nostro documento index.php dovrebbe presentarsi come segue:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed', 'yiw'), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php printf(__('%s Atom Feed', 'yiw'), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div class="container">
</div>
</body>
</html>
6. Come Aggiungere Titolo e Descrizione Del Blog Nell’Header?
Finalmente è arrivato il momento di aggiungere e visualizzare qualche contenuto nel nostro documento che fino ad ora mostra una semplice pagina bianca.
Iniziamo con l’aggiungere il titolo e la descrizione del blog nella parte superiore del documento. Apriamo il file index.php e aggiungiamo il seguente markup (X)HTML:
<body>
<div class="container">
<!-- START HEADER -->
<h1>
<a href="<?php echo get_option('home'); ?>/" title="Ritorna alla Home Page">
<?php bloginfo('name'); ?>
</a>
</h1>
<p class="center"><?php bloginfo('description'); ?></p>
<!-- END HEADER -->
</div>
</body>
Abbiamo aggiunto il nome del blog come titolo (<h1>…</h1>) del documento da visualizzare in alto mediante il tag bloginfo (già utilizzato in questa lezione), inoltre lo abbiamo reso un collegamento ipertestuale alla home page del blog passandogli l’URL in modo dinamico mediante l’utilizzo di un altro tag del Template: get_option(‘home’), il quale restituisce appunto l’url della Home Page del blog.
****************************************************
Update (20/04/2011): Raccomandazioni
Le ultime raccomandazioni indicano di utilizzare la nuova funzione messa a disposizione con la versione 3.0 di WordPress, home_url(), che va a sostituire la precedente get_option(‘home’) la quale adesso è da considerarsi deprecata.
Vediamo come diventa a questo punto il codice visto in precedenza:
<body>
<div>
<!-- START HEADER -->
<h1>
<a href="<?php echo home_url(); ?>/" title="Ritorna alla Home Page">
<?php bloginfo('name'); ?>
</a>
</h1>
<p><?php bloginfo('description'); ?></p>
<!-- END HEADER -->
</div>
</body>
Da notare inoltre che entrambe le due novità introdotte hanno bisogno di essere stampate mediante la funzione echo del php affinchè venga mostrato il percorso correttamente all’interno del nostro markup.
****************************************************
Subito sotto il titolo abbiamo aggiunto un paragrafo che richiama dinamicamente la descrizione (che abbiamo assegnato al blog in fase di configurazione, Figura 6) tramite il solito tag bloginfo, questa volta richiamato mediante il passaggio del parametro “description”.
Figura 6 - Titolo e Descrizione del Blog definiti nel Pannello di Amministrazione di WordPress
Adesso apriamo il foglio di stile del tema, style.css, e aggiungiamo alcune regole per definire il modo in cui presentare il contenuto che abbiamo inserito:
/* Intestazioni */
h1, h2, h3, h4, h5, h6 {font-weight:bold;color:#7f192f;}
h1 {font-size:150%;line-height:1;margin-bottom:0.5em;text-align:center;}
/* Paragrafi */
p { padding:4px 0 10px 0;line-height:20px;}
/*link*/
a:link, a:visited {color:#7f192f;text-decoration:none;}
a:hover, a:active {color:#b2030b;}
/* Web Site */
body {background:#fbf7f7;font-family:georgia,verdana,Arial,sans-serif;}
.container {width:960px;margin:20px auto 0;min-height:100px;border:2px solid red;}
Ricarichiamo la home del nostro blog e visualizziamo i cambiamenti (Figura 7).
Figura 7 - Home Page del Blog con Titolo e breve descrizione
Come puoi notare adesso sul blog sono apparsi come per magia il titolo e la descrizione del blog definiti mediante il Pannello di Amministrazione di WordPress.
Conclusione
E anche questa settimana siamo giunti alla fine della lezione, purtroppo mi sono già dilungato abbastanza e non sono riuscito a far rientrare in questa lezione l’argomento riguardante la visualizzazione delle pagine del blog, argomento che richiede qualche piccolo approfondimento e a cui desidero dedicare l’intera lezione della prossima settimana.
Come vedi il corso inizia a farsi sempre più interessante e stiamo per entrare nel vivo su come realizzare un tema per WordPress. Non perderti la prossima puntata.
Indice degli articoli trattati in questa guida: Realizzare un tema per WordPress
Per agevolarti la consultazione della guida “Come realizzare un tema per WordPress“, alla fine di ogni articolo riporterò l’indice comprendente tutti gli argomenti trattati.
- Come Installare WordPress in Locale?
- WordPress: Diamo Uno Sguardo al Pannello di Amministrazione
- Come Creare un Template per WordPress Partendo da Zero?
- WordPress: Come Realizzare l’Header del Template? (Parte 1) | (Parte 2)
- Diamo Uno Sguardo al Loop di WordPress
- Aggiungiamo la Sidebar al nostro tema
- WordPress: come rendere dinamici Header e Sidebar del template?
- Gerarchia dei template e loro utilizzo: come creare un template per gli articoli?
- Come Creare Template Personalizzati per le Pagine di WordPress?
- WordPress: predisporre la sidebar per l’uso di widget
- Realizzare un tema per WordPress: Personalizzare il Template dei Commenti (Parte 1) | (Parte 2)
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
65 commenti
Trackback e pingback
-
Wordpress e feed RSS | The Blogging Expert
[...] WordPress: Come Realizzare l'Header Del Tema? Parte 1 | Yουr … [...] -
Come creare un tema per WordPress partendo da zero? | Your Inspiration Web
[...] WordPress: Come Realizzare l’Header del Template? (Parte 1) | (Parte 2) [...] -
Come installare Wordpress in locale? | Your Inspiration Web
[...] WordPress: Come Realizzare l’Header del Template? (Parte 1) | (Parte 2) [...] -
WordPress: Come Realizzare L’Header Del Tema? Parte 2 | Your Inspiration Web
[...] WordPress: Come Realizzare l’Header del Template? (Parte 1) | (Parte 2) [...] -
WordPress: Diamo Uno Sguardo al Pannello di Amministrazione | Your Inspiration Web
[...] WordPress: Come Realizzare l’Header del Template? (Parte 1) | (Parte 2) [...] -
WordPress: Diamo Uno Sguardo al Loop | Your Inspiration Web
[...] WordPress: Come Realizzare l’Header del Template? (Parte 1) | (Parte 2) [...] -
Aggiungiamo la Sidebar al nostro tema | Your Inspiration Web
[...] WordPress: Come Realizzare l’Header del Template? (Parte 1) | (Parte 2) [...] -
Come Creare Template Personalizzati per le Pagine di WordPress? | Your Inspiration Web
[...] WordPress: Come Realizzare l’Header del Template? (Parte 1) | (Parte 2) [...] -
WordPress: come rendere dinamici Header e Sidebar del template? | Your Inspiration Web
[...] WordPress: Come Realizzare l’Header del Template? (Parte 1) | (Parte 2) [...]
È da un po’ che vi seguo in “silenzio”. Approfitto di questa lezione per farvi i più vivi complimenti. Essendomi affacciato da poco al campo della programmazione, dopo anni passati al semplice disegno, questa serie di articoli si sta rivelando una vera manna dal cielo, per semplicità e completezza dell’informazione. C’era davvero bisogno di un sito come YIW in Italia.
PS: ormai l’appuntamento del martedì mi causa attese pari solo a quelle provocatemi da Lost ;)
Ciao Apnea, benvenuto ufficialmente su YIW! Grazie per le bellissime parole che ci hai rivolto, siamo davvero lusingati.
Sono onorato anche per l’accostamento a Lost (proprio questa sera dovrei vedere le ultime due puntate della serie, quindi niente anticipazioni, mi raccomando =)
[OT]
bene nando allora a domani per i commenti su lost visto che io non sono riuscito ad aspettare oltre le 21:30 di ieri sera!
[/OT]
[ot]
luca, domani apriamo una discussione sul forum, sono proprio curioso di vedere come va a finire.
[/ot]
Ora la cosa inizia a farsi sempre più interessante.
Peccato che ad un certo punto vedi già la fine e rimani con l’amaro in bocca come aal fine di una putata di Lost o di 24.
Aspetto con ansia la prossima puntata!
Continua così Nando
Ciao Luca, grazie per l’incoraggiamento e per l’accostamento alle due serie televisive. Davvero onorato =)
Grazie Nando! Finalmente arriviamo alle portate principali e devo dire che sono molto gustose!
L’attesa è parificabile a quella per gray’s anatomy (ma si scriverà così?), per restare in tema di telefilm
Ma va’, addirittura :) ti sei compromesso, Mauri’…l’unico uomo che conosco che guarda grEy’s anatomy, eh eh
Ciao Maurì, ehm… grazie anche a te per ehm… il paragone con il ehm…
bellissimotelefilm! Sono commosso =)p.s. per favore dimmi che è tua moglie che lo guarda, io ne ho dovuto sorbire qualche puntata in sottofondo perchè è uno dei telefilm preferiti da Sara e ogni tre per due arrivava la frase più abusata da tutti i partecipanti alla serie: “ho fatto sesso tutta la notte” con la variante di: “farei sesso tutta la notte”, oppure: “lei ha fatto sesso tutta la notte, si vede”.
Lo confesso. Adoro greis-anatomi.
E mia moglie non c’entra nulla. Semmai, verso quest’ora, ho come sottofondo qualcosa di moooolto peggio (un posto al sole!), ed in questo caso c’entra eccome!
Mi ripeto: complimenti soprattutto per la semplicità in cui vengono spiegate le cose e grazie e alla prossima.
Ciao Paolo, spero di riuscire a mantenere semplice la guida fino alla fine. Grazie e a presto.
Complimenti da una “ragazza” non più tanto giovane! Vi seguo perché mi piacerebbe creare un sito dove inserire delle lezioni di taglio, cucito, maglia ed altro.
Ho sempre avuto la passione per il computer, dai primissimi in poi.
Mi piace la commistione tra antico e moderno, in altri paesi, come Stati Uniti, Inghilterra e paesi nordici, questo esiste, da noi c’è qualcosa, ma troppo poco.
Vi ho scoperti per caso, e da allora non vi mollo!
Complimenti ancora!
Ciao Marina, benvenuta su YIW da un “ragazzo” non più tanto giovane, ma eternamente giovane dentro =)
Mi fa molto piacere vedere le persone spinte all’azione da una propria passione, in questo modo è possibile raggiungere qualsiasi obiettivo ci prefissiamo. Piacere doppio dunque di averti con noi. A presto.
ottima discussione e ottimo sito :)
non scrivo molto ma leggo sempre :)
Ciao richard, grazie per essere passato. Fa piacere sapere che ci siete e ci seguite anche se non scrivete molto!
Un altro piccolo passo è fatto e capito… attendo la parte più consistente della guida :D
Sempre grazie per la disponibilità a condividere una cosa così importante nel mondo del web, come nessun’altro ha fatto, e per di più gratuitamente! :)
Ciao Antò, grazie per le bellissime parole!
Io continuo a seguirvi perchè mi sto cimentando con i template di wordpress… alla fine degli articoli voglio anche una bella guida in PDF :)
Ciao sharon, ti do una piccola anticipazione: di pari passo sto realizzando anche un ebook sull’argomento dove approfondisco ulteriormente le lezioni trattate con l’aggiunta di alcuni argomenti più avanzati che non ho previsto per questo corso.
Intanto grazie come sempre. Riuscire a modificare un template già esistente andando per tentativi e capire invece come è strutturato sono due cose ben differenti! Un solo appunto: mi sono scaricata il post in pdf, ma nella parte di codice è presente un “intruso”, ovvero la parola Array riportata svariate volte. E’ un problema solo mio?
Ciao Gloria, quello che segnali purtroppo non è un problema solo tuo, durante la generazione del pdf credo si verifichi qualche conflitto con il nostro plugin utilizzato per evidenziare la sintassi del codice all’interno degli articoli.
Stiamo cercando di risolvere in diverso modo, dateci un po’ di tempo (ormai YIW è diventato un lavoro =), ci saranno ulteriori miglioramenti alla versione pfd.
Grazie per essere passata e per la segnalazione.
inserendo il parametro
appare questo avviso nel browser
Fatal error: Call to undefined function bloginfo() in C:\AppServ\www\wordpress\wp-content\themes\Blog\index.php on line 5
cosa significa?
Ciao Luca, quel messaggio di errore significa che wp non trova la funzione bloginfo(), sei sicuro di aver passato i parametri corretti?
Cosa posso dire? Avete riacceso in me il fuoco della passione per il webdesign. Mi ero assopito dal farlo e ci avevo messo una pietra sopra per vari motivi che mi hanno costretto a farlo ma ora sapendo che qua si hanno aiuti e stimoli e ringrazio tutto lo staff di come ci sta documentando su questo mondo del lavoro ho ripreso a fare web. Spero che fra breve vado online con il mio sito web nuovo (anzi non ho avuto mai tempo di fare il mio). Buon lavoro a tutti
Ciao Andrea, grazie per le bellissime parole e benvenuto su YIW!
Siamo davvero felici di sentire che abbiamo riacceso il fuoco della tua passione per il web design. queste sono le parole più belle che possiamo leggere =)
ciao nando,
ho un problema,
questo è il mio blog:
http://legioiediparthenope.wordpress.com/
realizzato con wordpress, e installato il tema organic.
nono riesco a modificare quel box bianco che compare in homepage, non so proprio da dove accedervi per cambiarlo o inserrci un immagine.
a quale delle tue guide devo far roferimento?????
puoi aiutarmi?
grazie
Ciao Rosaria, per il supporto utilizza il nostro forum dovre trovi sempre qualcuno pronto a darti una mano. a presto.
Ciao Nando volevo segnalarti una tecnica dei CSS che usavo quando sviluppavo il file della grafica del sito. Perchè invece di scrivere tutti i tag html e impostargli e resettargli il margin e il padding non scrivi semplicemente cosi * e poi tutte le regole che vuoi?.
Ciao e buona serata
Ciao Andrea, grazie intanto del suggerimento.
Purtroppo la tecnica da te menzionata – l’utilizzo del selettore universale – crea una regola rivolta a tutti gli elementi della pagina e questo comporta diverse controindicazioni, tra le quali l’appesantimento del motore di rendering dei browser (rallentando la resa del css).
Considerato che non tutti gli elementi html hanno un valore di default per margine e padding, conviene resettare in altro modo evitando una così vasta ricerca al motore di rendering.
Salve, ottimo articolo..
Perchè non utilizzare i tag dinamici description ossia e e richiamarli nell’index con l’include a ?
invece che farlo nell’header inserito nell’index che hai citato nell’articolo
<a href="/” title=”Ritorna alla Home Page”>
Salve, ottimo articolo..
Perchè non utilizzare i tag dinamici description
ossia e e richiamarli nell’index con l’include a ?
invece che farlo nell’header inserito nell’index che hai citato nell’articolo
<a href="/” title=”Ritorna alla Home Page”>
Ops.. chiedo scusa per questo ennesimo commento.. ma non riesco a far digerire il codice al commento neanche con il tag pre
Ecco il msg che cerco di postare catturato a video
http://postimage.org/image/vyr596x0/
Scusa la risposta era più avanti qui
https://www.yourinspirationweb.com/2010/06/29/wordpress-come-rendere-dinamici-header-e-sidebar-del-template/
cancella i commenti se vuoi e scusa per il disturbo
Forse mi è sfuggito mi sapete consigliare se è meglio installare una versione WP normale o è meglio la versione XXL. Non so come procedere con quale delle due.
Grazie allo staff di YIM
Ciao Andrea, scusa per il ritardo della risposta ma è un periodo un po’ particolare.
ritornando alla tua domanda: é meglio installare una versione normale e poi caricare solo i plugin che effettivamente servono. la versione XXL di per se ha già un tot di plugin installati.
Ciao Nando!
Una domanda riguardo l’azzeramento dei valori predefiniti.
Bisogna inserire l’intero codice che hai scritto, o solo gli asterischi con la scritta RESET?
Grazie!
ciao sabato, devi inserire tutto il codice.
solo gli asterischi con la scritta RESET sono un semplice commento e non servono a nulla se non a dare un’indicazione a chi legge il codice =)
CIao Nando
Vorrei corredare di WordPress il mio sito web
Vorrei provare a creare un template personalizzato per la categoria, per il singolo articolo… ma soprattutto per la Home Page http://www.guidaolanda.it/
Dai uno sguardo a questa img
http://postimage.org/image/19x8pa9ic/dced404f/
– Home Page (http://www.guidaolanda.it/)
Un unico contenitore in una pagina statica (in WP nelle impostazioni faccio partire questa anzichè il solito blog come qui
http://www.blogolanda.it/)
In file index.php
– Categorie
# Particolarità e simboli olandesi
# Generalità
# Geografia e Conformazione
eccc
In file Categorie.php Ma non esiste in WP dove le metto ?
– Articoli tipo
Title Voli low Cost per Amsterdam
Ecco una tabella dove sono elencati in ordine alfabetico….. eccc
IN file Single.php
E’ corretto partire così ?
Come posso far apparire in home solo i primi articoli ?
Come posso dire alla pagina index.php di pescare solo i più recenti
Grazie per l’aiuto che potresti darmi
ciao francesco, dal commento che hai lasciato vedo che hai ancora una grandissima confusione in merito al funzionamento di un tema per wordpress e che molto probabilmente non hai letto/studiato bene gli articoli di questa guida.
ti consiglio di seguire questa guida passo passo prima di metterti a lavorare sul tuo tema personale, perchè dopo sarà tutto molto più chiaro.
Buon lavoro e a presto
Credo vi sia un errore nella parte dell’update 20/04/2011
echo home_url();
e non
echo home_url;
grazie per la segnalazione oly, ho corretto!
Scusate ma sono l unico imbranato a cui non compare il rettangolo col bordo rosso!
credo di aver eseguito tutti i passaggi senza tralasciare nulla
ho scritto un post sul forum a riguardo:
http://forum.yourinspirationweb.com/problemi-guida-per-creare-un-tema-wp-t1085.html
Scusate sicuramente mi sfugge qualcosa…ma non riesco ad allineare o meglio centrare il campo della descrizione che dovrebbe essere questo:
e che corrisponde alla regola css
/* Paragrafi */
p {padding:4px 0 10px 0;line-height:20px;}
giusto?
solo che a me non si centra, ma rimane giustificato a sinistra
ho dimenticato di inserire il codice relativo alla descrizione:
scusate che impedito non mi fa inserire il codice proco a scriverlo cosi:
?php bloginfo(‘description’); ?
questo perchè nell’update del 20/04 non viene inserita la class=”center” al tag che contiene il campo della descrizione, mentre c’è nella versione precendente!
così viene centrato ;)
Sto intraprendendo un percorso personale per conoscere bene il funzionamento di WordPress…sto leggendo l’ebook “How to be a Rockstar with WordPress” e sembra che questo articolo tocchi proprio gli stessi punti nello stesso ordine e spiegando le stesse cose eheheh
Vi seguo sempre e mi siete stati molto utili per il mio percorso..Grazie a tutti!
Scusate, ma non comprendo un dettaglio: le regole da aggiungere al file style.css sono da inserire a seguire del testo già esistente?
Nel mio caso il browser visualizzava già titolo e descrizione prima di inserire le regole. Cosa cambia inserendole? E’ corretto o ho sbagliato il procedimento?
Grazie e complimenti per le preziose informazioni…
Ciao!
Vi ho scoperti da poco e siete una manna per il mio imminente esame di web design :D
Ora, il mio ultimo ed insormontabile problema è la creazione del tema wp, vedendo gli utilissimi tutorial ero arrivata a caricare la cartella vuota con i file index.php e style.css da modificare, ma ecco che già al primo passo (ovvero la creazione del container dal bordo rosso che spunta su dreamweaver ma non sul browser… O,O panico…
Sai darmi possibili motivazioni alla cosa, dove avrò sbagliato?
Grazie tante in anticipo :)
Sto creando un responsive theme per WordPress e mi sono imbattuto in questo tutorial!!! E’ semplicemente perfetto compliementi all autore,(e’ la prima volta che lascio un commento su un tutorial) bravissimo!!!
Ciao Nando ti volevo chiedere come mai seguendo il tuo tutorial ho notato che il sito prima di tutto mi aggiunge uno spazio prima del mio header non richiesto e l’ho visto con Firebug e come mai anche il foglio di style all’inizio deve avere il percorso assoluto e non relativo dove è presente il file style.css.
So che sei molto impegnato per il webinar quando puoi attendo una risposta .
Ciao Andrea.
Provo a risponderti io: credo che lo “spazio” prima del tuo header sia quello dedicato alla Barra Strumenti (admin bar) che da qualche versione a questa parte WP mette a disposizione per poter effettuare delle modifiche veloci anche dal Front-end, una volta che sei loggato. Non avendo predisposto nel tuo template l’aggancio per questa barra, visualizzi solamente lo spazio che occupa. Per controllare se è questo che ti genera lo spazio, visualizza il sito senza loggarti. Dovrebbe scomparire. Qui il riferimento per agganciare la barra : http://codex.wordpress.org/Function_Reference/show_admin_bar
Per disabilitare la barra devi andare nel pannello di amministrazione wp > utenti > scegli l’utente> togli la spunta a “Barra Strumenti”. Have fun!
Innanzitutto vorrei complimentarmi per la grande risorsa che offri, nel tag delle descrizione va a finire a sinistra , ho modificato la regola paragrafo attribuendo la proprietà text-align:center
Sbagliato?
Ciao Nando, complimenti e grazie per queste utilissimo tutorial!
Unico appunto: nell’aggiornamento del 04/2011 non hai messo l’Header dentro il .container
Un saluto!
Ciao,
complimenti e grazie per questa ottima risorsa! l’unica domanda è: è ancora valida tutt’oggi? Immagino ci siano alcune cose ormai deprecate..nel caso hai tempo e voglia di segnalarmi cosa o di suggerirmi delle buone risorse?
Grazie mille