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.
Sto riscontrando un errore durante l'aggiunta di un widget personalizzato nel mio tema. Questo è il codice che ho aggiunto in functions.php.
function widget()
{
register_sidebar(array(
‘name’ => __(‘Primary Sidebar’, ‘wpb’),
‘id’ => ‘primary_sidebar’
‘description’ => ”,
‘class’ => ”,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
));
}
add_action(‘widgets_init’, ‘widget’);
Quale messaggio di errore stai ricevendo?
Ottimo lavoro sul tuo tutorial!
Una domanda:
Perché hai dovuto aggiungere codice nel file sidebar.php quando lo scopo del tutorial è aggiungere tre aree widgetizzate nel footer?
Ciao Mark, buona domanda.
Questo tutorial presuppone che tu abbia già un'area widgetizzata nella tua sidebar. Quando menziono il file
sidebar.php, sto fondamentalmente ricodificando quell'area widgetizzata per avere un nome univoco (in questo caso, "Sidebar") per distinguerla dalla nuova area widgetizzata del footer che stiamo per creare.Ci sono maggiori informazioni sulla codifica di più aree widget nel mio tutorial sulla widgetizzazione dei temi WordPress.
Wow, sono riuscito a farlo funzionare! (Non è un commento sul tuo codice, solo un commento sulla mia abilità di codifica). Grazie!
Il mio primo tentativo di widgetizzazione, e ha funzionato in modo assolutamente perfetto. Grazie! :)
Hai detto:
“Il primo passo è aggiungere il markup HTML.” e “Inseriremo questo codice HTML sopra la riga “copyright” corrente.”
OK…. aggiungerlo A COSA? Dove metto il markup HTML? A cosa lo aggiungo? Come trovo il file che contiene la riga “copyright”?
Prova a cercare nel tuo file
footer.php.Potresti darmi una rapida panoramica del nuovo tema predefinito del footer 2012? Voglio usare questo tutorial ma il footer 2012 è stranamente lungo o “alto”. Voglio aggiungere 5 widget di testo, e ha un template fluido, io uso il Template Pagina Intera quindi vorrei che fosse centrato. Puoi anche buttarci dentro un sacchetto di patatine se vuoi 😛
Il tutorial è meraviglioso, ma vorrei sapere come colorare lo sfondo dove si trovano i widget o come aggiungere un'immagine sotto di essi. Se potessi rispondere a questo commento o inviarmi un'e-mail sarebbe fantastico.
Ancora una volta, ottimo tutorial ha funzionato perfettamente per il blog del mio tema e ora voglio solo dipingerlo un po', se capisci cosa intendo.
Cordiali saluti e attendo una tua risposta! 🙂
Penso che tu stia cercando la proprietà CSS background – http://www.w3schools.com/css/css_background.asp
Wow, non sapevo davvero che avresti potuto renderlo più diretto e semplice. Ottimo tutorial su un processo che avrebbe potuto essere molto più difficile… 10 minuti e sono operativo con un nuovo widget del footer. Grazie!
Grazie mille per aver dedicato del tempo a farlo! post fantastico. Il tema su cui sto lavorando è stato molto personalizzato, quindi questo dovrebbe aiutarmi ad aggiungere il footer che desidero da un po'!
Grazie per l'ottimo tutorial. Ho una domanda. Aggiungere i widget non è un problema, ma in qualche modo non vuole aggiungere uno sfondo all'intero footer. La parte dove si trovano i widget rimane bianca per me. C'è un modo per risolvere?
http://blog.whenlovefalls.com/
Hmm… sembra che mi sia dimenticato di menzionare di inserire
.clear { clear: both; }nel tuo foglio di stile.Questo dovrebbe risolvere il problema.
Non è un problema sostituire semplicemente il contenuto del file functions.php? Non è uno di quei file che non dovrei toccare?
Inoltre, quale chiamata di funzione dovrei usare per ottenere un elenco di pagine in ogni sezione del sito web? Voglio una sorta di footer "mappa del sito", se capisci cosa intendo (un elenco orizzontale di link di primo livello, ognuno con le sue sottopagine elencate sotto).
Puoi toccarlo se vuoi, ma farei un backup prima di modificarlo, perché se commetti un errore, può causare problemi al resto del tuo sito.
Probabilmente stai cercando la funzione wp_list_pages o il widget "Pagine".
Questo post mi ha salvato. Ho provato tanti altri post, quasi mi ero arreso e poi ho trovato il tuo. Funziona a meraviglia. Essendo un Personal Trainer di San Diego, devo avere informazioni a portata di mano per le persone. Grazie ancora per l'aiuto. 2001 Iron
Scusa, ho premuto il pulsante di invio per errore. Ok, grazie per il post eccezionale. Ti dispiace se metto un link ad esso. Grazie
Campione di Bodybuilding Ironman 2001, Hank Butler
Sono contento che ti sia piaciuto il post, Hank. Sentiti libero di linkarlo.
Posso sostituire questo footer con il footer di qualsiasi tema WordPress?
Praticamente. Ci sono alcuni design di footer che non sono molto flessibili, quindi potrebbe non funzionare su quelli.
Ciao Leland,
Come posso cambiarlo in modo che lo sfondo dell'intero footer sia di un colore diverso dal resto della pagina? Ho provato a usare background-color nella sezione footer-item del foglio di stile, ma cambierà solo lo sfondo delle aree occupate dai widget, ad esempio se il widget occupa solo metà dell'area del widget, anche lo sfondo occupa solo metà dell'area.
Probabilmente dovresti mettere un altro div attorno a tutti i div footer-item e impostare il background-color su quello. Assicurati che anche i div footer-item siano puliti.
Grazie Leland
Ho giocato ancora un po' e sono riuscito a farlo. Ho dovuto mettere il mio tag all'inizio del file e inserire lo stile background-color al suo interno.
Grazie per il post. Ho provato tante altre idee della gente su come fare questo e ho passato la maggior parte del mio tempo a sistemare quello che avevano rovinato. Questo funziona a meraviglia e ora ce l'ho su tutti i miei siti. Grazie
Hank, sono contento di sapere che ha funzionato per te!
Grazie mille per questo bel tutorial, Leland! :)
Pensi che potresti guidarmi su come aggiungere separatori tra ogni blocco (div) di link o widget, come nel footer di questa pagina?
@Saeed: Tutto quello che dovresti fare è cambiare il tuo CSS.
Potresti fare qualcosa come:
.footer-item { border-right:1px solid #000; }
Oppure potresti sempre applicare uno sfondo a ogni elemento del footer.
@Leland: Mi sono imbattuto in questo post, sto cercando di fare qualcosa di un po' più esteso e cercavo consigli. Diciamo che l'utente vuole aggiungere più di 3 widget (ad esempio) e la larghezza del contenitore del footer può gestirne solo 3. Voglio che i successivi 3 widget scendano direttamente sotto. Dove mi blocco è che quando vengono aggiunti i widget dal 4° in poi, non sono allineati verticalmente correttamente... a causa dei primi 3 widget che non hanno un'altezza fissa. Ma non voglio che i widget abbiano un'altezza specifica, voglio che sia dinamica.
L'unica cosa a cui riesco a pensare è avere una funzione che recupera i widget per il footer in gruppi divisibili per 3, e li racchiude in un div contenitore. Puoi aiutarmi con questo? Se no, hai altri suggerimenti su come posso affrontare questo problema?
Grazie,
Jeff
Jeff, quello che farei è creare tre aree widget separate, una per ogni colonna. In questo modo potresti mettere quanti widget vuoi in ogni colonna e sarebbero allineati correttamente.
Ottima idea! Grazie
Ciao
Non riesco a superare la parte di "widgetizzazione" del tutorial. E ora il mio sito è afflitto da errori. Ho seguito i passaggi esattamente come li hai spiegati.
Puoi rispondere in modo che possiamo rivedere cosa è andato storto?
Grazie per aver creato questo tutorial. Non vedo l'ora di farlo funzionare per il mio sito. È una buona idea.
Bel tutorial. Sono bloccato anche io sulla parte di "widgetizzazione". Ho più barre laterali nel mio sito, quindi ho due file sidebar.php. Ho provato ad aggiungere l'HTML della barra laterale al mio file "sibebar1.php", ma ora ricevo un errore simile a quello che altri hanno segnalato.
cosa sto sbagliando?
Articolo davvero fantastico, finalmente ha funzionato per me, ora è implementato sul mio sito. Mi ha aiutato a progettare il tema esistente come desidero invece di cercare un tema adatto. Ancora grazie per averlo fornito.
Ciao, Posso usarlo con Thesis Theme? L'ho acquistato e sto cercando di imparare a usare tutte le sue funzionalità come Thesis OpenHook. Fammi sapere.
Grazie, Tam
[...] In: Plugin WordPress 29 Lug 2009 Vai alla Fonte [...]
[...] Aggiungi un footer widgetizzato al tuo tema WordPress Un tutorial che ti insegna come creare il tuo footer widgetizzato, inclusi il codice HTML, CSS e WordPress necessario. [...]
[…] Aggiungere un piè di pagina con widget al tuo tema WordPress Un tutorial che ti insegna come codificare il tuo piè di pagina con widget, inclusi l'HTML, il CSS e il codice WordPress necessari. […]
[…] Aggiungere un piè di pagina con widget al tuo tema WordPress Un tutorial che ti insegna come codificare il tuo piè di pagina con widget, inclusi l'HTML, il CSS e il codice WordPress necessari. […]
Leland:
Grazie per il tuo commento al mio post. Il mio unico problema con questo tutorial è che non so dove vada il markup "HTML" iniziale. È nel functions.php?
[…] un piè di pagina con widget su un tema WordPress minimalista? Ho già provato il tutorial qui e alcuni suggerimenti qui. Potrei provare questo […]