L'ispirazione per questo tutorial proviene da un tweet che ho ricevuto con feedback per il tema RS12 in uscita.
Sebbene il footer widgetizzato non sia stato incluso nella release del tema RS12, ho deciso di scrivere questo tutorial per mostrare esattamente come aggiungere un footer widgetizzato nel tuo tema. In questa guida, imparerai:
- Il codice HTML e CSS necessario per produrre il footer widgetizzato
- Come aggiungere comunemente i tag template di WordPress come segnaposto
- Come rendere widgetizzabile il footer e inserire i widget al suo interno
Ci sarà molto codice in questo post, quindi se sei pronto, continua a leggere...
Userò il tema WordPress Green Rays come esempio in questo tutorial. Al momento, il footer ha solo un messaggio standard di "copyright" e crediti.
L'HTML
Il primo passo è aggiungere il markup HTML. Diciamo che avremo tre sezioni diverse nel footer widgetizzato con elenchi degli Articoli Più Recenti, Archivi Mensili e Archivi Giornalieri. Inseriremo questo codice HTML sopra la riga "copyright" attuale.
Fondamentalmente questo codice inserisce ogni "widget" in un div. All'interno di ogni widget c'è un'intestazione e un elenco non ordinato con link. Sì, so che i link non portano da nessuna parte. Successivamente sostituiremo questo con i tag template di WordPress. Ecco cosa abbiamo finora:
Il CSS
Come puoi vedere, questo non ha un bell'aspetto senza alcun stile CSS. Aggiungi il seguente codice al tuo foglio di stile.
.footer-item {
float: left;
width: 33%;
padding-bottom: 10px;
}
.footer-item ul {
padding-left: 15px;
}
Ci ò che fa questo codice il floating di ogni elemento del footer a sinistra, il che significa fondamentalmente che possono essere uno accanto all'altro. La larghezza è impostata al 33%, il che offre spazio sufficiente per tre elementi del footer in un'unica riga. Viene anche aggiunta una piccola quantità di padding sotto ogni elemento del footer. La seconda parte consiste semplicemente nell'aggiungere un padding di 15 pixel a sinistra alle liste.
Ora puoi vedere che l'HTML e il CSS stanno iniziando a unirsi. Ecco cosa dovresti avere finora:
Codice WordPress
Al momento, abbiamo un gruppo di link HTML vuoti, senza alcun codice WordPress effettivo. Sostituiamo le liste sotto "Articoli recenti", "Archivi mensili" e "Archivi giornalieri" con gli equivalenti tag di modello di WordPress. Sostituisci quello che hai attualmente con quanto segue:
I parametri dovrebbero essere abbastanza autoesplicativi, ma se non sei sicuro di qualcuno di essi, prova a cercare wp_get_archives nello Strumento di ricerca dei tag di modello di WordPress. Ricorda, sto solo usando i tag di modello wp_get_archives() come segnaposto. Li sostituiremo con altri widget di WordPress in seguito, dopo aver reso il footer "widgetizzabile".
Rendilo "widgetizzabile"
Per questa sezione del tutorial, prenderò in prestito parti dal mio precedente tutorial sulla "widgetizzazione" dei temi.
Il primo passo è registrare le "sidebar". Per fare ciò, sostituisci semplicemente il contenuto corrente del file functions.php con quanto segue:
'Sidebar',
'before_widget' => '',
'before_title' => '',
'after_title' => '
',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer',
'before_widget' => '',
'before_title' => '',
'after_title' => '
',
));
?>
Ora andremo in sidebar.php e sostituiremo il tag condizionale della sidebar dinamica corrente con questo:
Con questo:
Ora andremo nel nostro file footer.php e racchiuderemo gli elementi del footer nei rispettivi tag condizionali della sidebar. Poco prima della prima div "sidebar-item", aggiungi quanto segue.
Subito dopo l'ultima div di chiusura "footer-item" (e sopra la div "clear" che abbiamo aggiunto in precedenza) aggiungeremo quanto segue:
Ok, ora la nostra sidebar *e* il footer dovrebbero essere widgetizzati. Proviamo ad aggiungere alcuni widget nel footer. Aggiungerò un widget Blogroll, un widget Commenti Recenti e un widget di testo. Ecco come dovrebbe apparire:
Conclusione
Bene, queste sono le basi per aggiungere un footer widgetizzato al tuo tema. Potresti voler aggiungere regole di stile separate per altri tipi di widget come il calendario o la casella di ricerca. Questo probabilmente non funzionerà con ogni tema, come ad esempio il tema RS12, poiché aveva un footer non espandibile.
Se qualcuno desidera il tema aggiornato Green Rays per caso, puoi scaricarlo qui. In questo modo puoi vedere dove esattamente ho aggiunto il codice. Puoi anche confrontarlo con il tema originale.
Spero ti sia piaciuto il tutorial. Aggiungerai un footer widgetizzato al tuo tema? C'è qualcosa nel codice che ho usato sopra che faresti diversamente? Domande, commenti, suggerimenti e critiche sono tutti benvenuti, quindi sentiti libero di esprimerti nei commenti.
Leland,
Ecco il link pastebin per il mio file functions.php. L'ho pubblicato senza la tua modifica. Il tuo aiuto è apprezzato.
http://pastebin.com/m40073591
“Sto anche cercando di aggiungere widget al mio footer usando il tuo passaggio, ma quando aggiungo il codice a functions.php, continuo a ricevere lo stesso messaggio di errore:
Errore di analisi: errore di sintassi, '}' inaspettato in /home/………..redacted………/functions.php alla riga 230
Sono sicuro che questo significa che ho solo una '}' fuori posto, ma rimuoverla non sembra funzionare. Aiuto?”
Sto riscontrando gli stessi problemi. Potresti offrire qualche consiglio?
Grazie,
Dave
sei mai riuscito a risolvere? Anch'io ho lo stesso problema ma è successo quando ho modificato il codice di sidebar.php.
come hai risolto?
Sto usando 2 sidebar, quindi ho 2 file sidebar.php. Ho provato a ripristinare il codice al suo stato originale ma niente. Immagino che dovrò caricare il mio file php di backup, ma ciò non risolverà il problema, mi permetterà solo di continuare a lavorare sul mio sito.
se ci sono consigli, li apprezzerei.
grazie
Mi sono imbattuto in questo per caso – ottimo tutorial sia per contenuto che per stile di scrittura – ben fatto.
Questo tutorial mi cambia la vita! Non ho mai visto una spiegazione così approfondita su come fare questo. Sto creando un nuovo look per il mio blog e wow… è esattamente quello di cui avevo bisogno. Grazie mille!!
[...] Aggiungi un footer con widget al tuo tema WordPress | Theme Lab (tag: tutorial wordpress footer CSS) [...]
@Lance: Dipenderebbe dal tema, ma sarebbe da qualche parte all'interno della div "footer" (qualunque sia il suo nome).
Sembra che il footer del tuo sito abbia un'altezza fissa, quindi probabilmente dovresti risolverlo prima di usare questo codice.
Ciao – Grazie per questo tutorial ma sono confuso. Dove devo inserire il codice HTML che hai all'inizio?
Ho i file CSS e footer e so che posso inserire il codice lì. Ma dove va il codice HTML effettivo?
[...] casella, modelli personalizzati di archivio e ricerca, una pagina di opzioni e quattro aree con widget (incluso un footer con widget). Queste funzionalità verranno trattate [...]
@Terri: Nessun problema! Bel footer con widget, comunque. 🙂
Sììì! Grazie!
@Hannah: Sì, è quello che significa. Anche se è un po' difficile per me diagnosticare il problema se non posso vedere il codice esatto. Potresti per caso incollare il codice del tuo file functions.php attuale su qualche pastebin? Qualcosa come http://pastebin.com - grazie!
Ottimo tutorial! Sto cercando di aggiungere i widget al mio footer usando il tuo passaggio, ma quando aggiungo il codice a functions.php, continuo a ricevere il messaggio di errore:
Errore di analisi: errore di sintassi, '}' inaspettato in /home/………..redacted………/functions.php alla riga 230
Sono sicuro che questo significa che ho solo una '}' fuori posto, ma rimuoverla non sembra funzionare. Aiuto?
[...] ho trovato un bel tutorial su come aggiungere widget al footer di un tema. I widget non servono solo per la barra laterale [...]
@ezg: Ah... beh, sono contento che abbia funzionato per te.
@Jeffro: Grazie, apprezzo lo stumble e sono contento che ti sia piaciuto il tutorial.
Aspettavo da tempo un post come questo. L'ho capito da solo, ma è sempre bello avere un riferimento a cui tornare. Ho inviato questo gioiellino a StumbleUpon :)
[...] Aggiungi un footer con widget al tuo tema WordPress | Theme Lab (tag: wordpress) [...]
[...] dominio ), caricato il nuovo tema e ho iniziato a modificarlo. La cosa più importante che ho fatto è stata aggiungere un footer con widget corposo. Puoi fare lo stesso usando il tutorial collegato di Leland su Theme Lab. Principalmente volevo fare [...]
[…] Aggiungere un piè di pagina widgetizzato al tuo tema WordPress – chi dice che i widget sono solo per le barre laterali? Li ho visti usati in molti altri posti, inclusi i piè di pagina, che è esattamente quello che imparerai a fare in questo tutorial. [Link] […]
[…] http://www.themelab.com/2009/04/25/add-a-widgetized-footer-to-your-wordpress-theme/ […]
Non l'hai visto, perché ora non lo sto usando. Ma quando l'ho attivato, sembrava davvero fantastico. Più tardi, quando penserò a quali widget usare, lo attiverò.
@ezg: Bello! Mi stavo chiedendo, su quale blog l'hai usato? Ho controllato l'URL che hai usato per commentare qui, ma non ho visto il piè di pagina widgetizzato.
Ho usato il tuo tutorial nel mio blog. Sembra davvero bello.
Grazie per la tua lezione. :)
@sriganesh: Ottimo, fammi sapere come ti trovi.
grazie. sto usando ora elegant theme. che ho vinto in un concorso. guarda il piè di pagina del mio tema.. grazie mille. ho un piccolo problema: ho aggiunto le mie foto di flickr. ma sono disposte in modo irregolare. come altri siti professionali con bordi, non riesco ad allinearle. puoi aiutarmi in questo? negli ultimi tre mesi ho provato da solo e ho aggiunto codici ma niente è successo.
[…] HTML o per un sistema di gestione dei contenuti (CMS)? A seconda delle tue competenze Aggiungi un piè di pagina widgetizzato al tuo tema WordPress – themelab.com 25/04/2009 L'ispirazione per questo tutorial proviene da un tweet che ho ricevuto con […]
bel tutorial, ci proverò, perché ho bisogno di qualcosa del genere. visita il mio sito. mi piace avere lo stesso di quanto detto qui.
Non fraintendermi, adoro il tutorial e tutto... ma per essere completamente onesto, sento che ci hai un po' fregato... tipo che vogliamo sapere come hai fatto TU il TUO header, capisci? Questo non è un attacco personale, ma mi sento un po' fregato ricevendo un misero e noioso piè di pagina di testo...
Se potessi, per favore, dirci come hai fatto il TUO, sarebbe fantastico. E non limitarti a dire "mettici dietro la tua immagine..." Voglio dire come l'hai fatto davvero. Grazie...
Ho fatto tutto quello che hai detto e non so come "trascinare" i widget...? Non vedo dove trascinarli....
Lo fai nel tuo pannello di amministrazione di WordPress nella pagina dei widget. Con "trascinare" intendo solo inserire i widget nelle varie aree widgetizzate.
Mi dispiace che ti senta “arato”, ma volevo scrivere un tutorial che potesse applicarsi a quasi ogni tipo di tema.
Per tua informazione, non uso nemmeno alcun widget di WordPress nel piè di pagina e nell'intestazione di questo sito, sono codificati direttamente.
Non sono sicuro di quanto altro dettaglio avrebbe potuto fornire. Se sei un web designer e hai un'idea di cosa sia WordPress, allora sapresti come portare a termine il resto. Il suo tutorial è stato perfetto.